You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
156 lines
5.5 KiB
156 lines
5.5 KiB
import * as echarts from '../../../../ec-canvas/echarts';
|
|
import {notSatisfactionTrend} from "../../../../utils/statisticsApi";
|
|
|
|
var chart = null;
|
|
|
|
function initChart(canvas, width, height, dpr) {
|
|
chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr // 像素比
|
|
});
|
|
canvas.setChart(chart);
|
|
|
|
return chart;
|
|
}
|
|
|
|
Component({
|
|
properties: {},
|
|
data: {
|
|
ec: {
|
|
lazyLoad: true
|
|
// onInit: initChart
|
|
}
|
|
},
|
|
lifetimes: {
|
|
ready() {
|
|
this.getData()
|
|
}
|
|
},
|
|
methods: {
|
|
getData() {
|
|
this.selectComponent('#Trend').init((canvas, width, height, dpr) => {
|
|
chart = echarts.init(canvas, null, {
|
|
width: width,
|
|
height: height,
|
|
devicePixelRatio: dpr // 像素比
|
|
});
|
|
canvas.setChart(chart);
|
|
notSatisfactionTrend().then(({data}) => {
|
|
let xData = data.monthTimes.map(item => (item.split('-')[1] - 0) + '月');
|
|
let series = []
|
|
let color = ['#3A80E7', '#EB8E16', '#10B2A5',]
|
|
data.series.forEach((item, index) => {
|
|
series.push({
|
|
name: item.name,
|
|
type: 'line',
|
|
showAllSymbol: true,
|
|
symbol: 'circle',
|
|
symbolSize: 0,
|
|
lineStyle: {
|
|
normal: {
|
|
color: color[index],
|
|
},
|
|
},
|
|
label: {
|
|
show: false,
|
|
},
|
|
itemStyle: {
|
|
show: false,
|
|
color: '#FFF',
|
|
borderColor: color[index],
|
|
borderWidth: 1,
|
|
},
|
|
data: item.data,
|
|
},)
|
|
})
|
|
var option = {
|
|
title: {
|
|
show: false,
|
|
text: '',
|
|
x: 'center',
|
|
top: '15px',
|
|
textStyle: {
|
|
color: '#333333',
|
|
fontWeight: 500,
|
|
fontSize: 18,
|
|
},
|
|
},
|
|
|
|
legend: {
|
|
// icon: 'circle',
|
|
data: data.series.map(item => item.name),
|
|
itemGap: 12,
|
|
itemWidth: 12,
|
|
itemHeight: 5,
|
|
x: 'left',
|
|
top: '0%',
|
|
textStyle: {
|
|
color: '#999999',
|
|
fontSize: 10,
|
|
// padding:[0, 10, 0, 10],
|
|
}
|
|
},
|
|
grid: {
|
|
top: '18%',
|
|
left: '2%',
|
|
right: '4%',
|
|
bottom: '8%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#323c41'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
align: 'center',
|
|
textStyle: {
|
|
fontSize: 11,
|
|
color: '#C1C1C1'
|
|
}
|
|
},
|
|
boundaryGap: true,
|
|
data: xData,
|
|
},
|
|
],
|
|
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
color: '#999999',
|
|
textStyle: {
|
|
fontSize: 11
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
}
|
|
}
|
|
|
|
],
|
|
series,
|
|
};
|
|
chart.setOption(option);
|
|
|
|
})
|
|
return chart
|
|
})
|
|
}
|
|
}
|
|
});
|
|
|