liuyongli
3 years ago
parent
3adabb1ed8
commit
ffaf72c111
@ -0,0 +1,256 @@
|
||||
Component({
|
||||
data: {
|
||||
showChart: true,
|
||||
showChart: true,
|
||||
positiveOption: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
confine: true
|
||||
},
|
||||
|
||||
legend: {
|
||||
x:'15',
|
||||
icon: 'rectangle',//data图标样式
|
||||
itemWidth: 10,//data图标大小
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
fontSize: 9
|
||||
},
|
||||
data: ['正面', '中性','负面'],
|
||||
},
|
||||
//图表位置
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 15,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisTick:{
|
||||
show:false //去除刻度线
|
||||
},
|
||||
axisLine:{
|
||||
show:false //去除轴线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999999',//y轴文本颜色
|
||||
textStyle: {
|
||||
fontSize : 9
|
||||
}
|
||||
},
|
||||
splitLine: { //分割线
|
||||
// lineStyle:{
|
||||
// // color:"#2d3436"
|
||||
|
||||
// }
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E8E8E8',
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
|
||||
axisTick:{
|
||||
show:false //去除刻度线
|
||||
},
|
||||
axisLine:{
|
||||
show:false, //去除轴线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999999',//x轴文本颜色
|
||||
textStyle: {
|
||||
fontSize : 9
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '正面',
|
||||
type: 'line',
|
||||
symbol:'none', //去圆点
|
||||
data: [100, 200, 300, 500, 700, 500, 300],
|
||||
itemStyle: {
|
||||
normal:{
|
||||
color: '#0084FF',
|
||||
lineStyle: {
|
||||
color: '#0084FF'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '中性',
|
||||
type: 'line',
|
||||
symbol:'none', //去圆点
|
||||
data: [700, 900, 1100, 800, 1690, 1250, 920],
|
||||
itemStyle: {
|
||||
normal:{
|
||||
color: '#20CC62',
|
||||
lineStyle: {
|
||||
color: '#20CC62'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '负面',
|
||||
type: 'line',
|
||||
symbol:'none', //去圆点
|
||||
data: [1100, 1300, 1500, 1200, 1300, 2000, 1000],
|
||||
itemStyle: {
|
||||
normal:{
|
||||
color: '#FFBF00',
|
||||
lineStyle: {
|
||||
color: '#FFBF00'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
]
|
||||
},
|
||||
negativeOption: {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
||||
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
confine: true
|
||||
},
|
||||
|
||||
legend: {
|
||||
x:'15',
|
||||
icon: 'rectangle',//data图标样式
|
||||
itemWidth: 10,//data图标大小
|
||||
itemHeight: 10,
|
||||
textStyle: {
|
||||
fontSize: 9
|
||||
},
|
||||
data: ['低级危机', '中级危机','高级危机'],
|
||||
|
||||
},
|
||||
//图表位置
|
||||
grid: {
|
||||
left: 20,
|
||||
right: 20,
|
||||
bottom: 15,
|
||||
top: 40,
|
||||
containLabel: true
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
axisTick:{
|
||||
show:false //去除刻度线
|
||||
},
|
||||
axisLine:{
|
||||
show:false //去除轴线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999999',//y轴文本颜色
|
||||
textStyle: {
|
||||
fontSize : 9
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#E8E8E8',
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
|
||||
axisTick:{
|
||||
show:false //去除刻度线
|
||||
},
|
||||
axisLine:{
|
||||
show:false, //去除轴线
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#999999',//x轴文本颜色
|
||||
textStyle: {
|
||||
fontSize : 9
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '低级危机',
|
||||
type: 'line',
|
||||
symbol:'none', //去圆点
|
||||
data: [1400, 2000, 1500, 1800, 1490, 900, 310],
|
||||
itemStyle: {
|
||||
normal:{
|
||||
color: '#FFBF00',
|
||||
lineStyle: {
|
||||
color: '#FFBF00'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '中级危机',
|
||||
type: 'line',
|
||||
symbol:'none', //去圆点
|
||||
data: [210, 322, 551, 364, 960, 1307, 10],
|
||||
itemStyle: {
|
||||
normal:{
|
||||
color: '#FF6E25',
|
||||
lineStyle: {
|
||||
color: '#FF6E25'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
name: '高级危机',
|
||||
type: 'line',
|
||||
symbol:'none', //去圆点
|
||||
data: [250, 362, 71, 374, 970, 130, 170],
|
||||
itemStyle: {
|
||||
normal:{
|
||||
color: '#FF4852',
|
||||
lineStyle: {
|
||||
color: '#FF4852'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
},
|
||||
onShow() {
|
||||
this.getTabBar().init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
priceSel(e){
|
||||
this.setData({
|
||||
intervalSel: e.currentTarget.dataset.index
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"c-echars": "../../c-echars/index",
|
||||
"time-component":"/components/timecomponent/index"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
<view>
|
||||
<!-- 时间组件 -->
|
||||
<time-component></time-component>
|
||||
<view class="brand">
|
||||
<view class="text">正负调性</view>
|
||||
<view class="brand_tu">
|
||||
<c-echars showChart="{{showChart}}" canvasId="tonalitybar-canvas" chartId="tonalitybar" chartOption="{{positiveOption}}" width="100%" height="100%"></c-echars>
|
||||
</view>
|
||||
</view>
|
||||
<view class="brand">
|
||||
<view class="text">负面等级</view>
|
||||
<view class="brand_tu">
|
||||
<c-echars showChart="{{showChart}}" canvasId="ratingbar-canvas" chartId="ratingbar" chartOption="{{negativeOption}}" height="100%"></c-echars>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,16 @@
|
||||
/* 正负调性 */
|
||||
.brand{
|
||||
width: 100%;
|
||||
height: 484rpx;
|
||||
background-color: #fff;
|
||||
margin: 32rpx;
|
||||
border-radius: 4rpx;
|
||||
}
|
||||
.brand_tu{
|
||||
width: 100%;
|
||||
height: 350rpx;
|
||||
}
|
||||
.text{
|
||||
font-size: 36rpx;
|
||||
padding: 32rpx;
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"c-echars": "../../c-echars/index"
|
||||
"c-echars": "../../c-echars/index",
|
||||
"time-component":"/components/timecomponent/index"
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"component": true
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"time-component":"/components/timecomponent/index"
|
||||
}
|
||||
}
|
||||
@ -1,3 +1,6 @@
|
||||
{
|
||||
"component": true
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"time-component":"/components/timecomponent/index"
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"c-echars": "../../c-echars/index"
|
||||
"c-echars": "../../c-echars/index",
|
||||
"time-component":"/components/timecomponent/index"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,14 @@
|
||||
Component({
|
||||
data: {
|
||||
timelist: ['二十四小时', '最近七天', '最近三十天', '自定义'],
|
||||
|
||||
},
|
||||
methods: {
|
||||
priceSel(e){
|
||||
this.setData({
|
||||
intervalSel: e.currentTarget.dataset.index
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
})
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"component": true
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
<view class="timelist">
|
||||
<view wx:for="{{timelist}}" class="{{index === intervalSel?'active':''}}" wx:key="index" data-index="{{index}}" bindtap="priceSel">{{item}}
|
||||
</view>
|
||||
</view>
|
||||
@ -0,0 +1,26 @@
|
||||
.timelist {
|
||||
width: 686rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
margin: 32rpx;
|
||||
border-radius: 4rpx;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4,1fr);
|
||||
grid-gap: 16rpx;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.timelist view {
|
||||
text-align: center;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
margin: 8rpx;
|
||||
}
|
||||
|
||||
.timelist .active {
|
||||
color: #027AFF;
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 4rpx;
|
||||
line-height: 64rpx;
|
||||
height: 64rpx;
|
||||
}
|
||||
Loading…
Reference in new issue