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.
169 lines
5.8 KiB
169 lines
5.8 KiB
<template>
|
|
<view class="trend">
|
|
<ec-canvas id="Trend" canvas-id="Trend" :ec="ec"></ec-canvas>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ecCanvas from '../../../../ec-canvas/ec-canvas';
|
|
import * as echarts from '../../../../static/echarts.js';
|
|
import { notSatisfactionTrend } from '../../../../utils/statisticsApi';
|
|
var chart = null;
|
|
export default {
|
|
components: {
|
|
ecCanvas
|
|
},
|
|
data() {
|
|
return {
|
|
ec: {
|
|
lazyLoad: true
|
|
// onInit: initChart
|
|
}
|
|
};
|
|
},
|
|
props: {},
|
|
mounted() {
|
|
// 处理小程序 ready 生命周期
|
|
this.$nextTick(() => this.ready());
|
|
},
|
|
methods: {
|
|
ready() {
|
|
this.getData();
|
|
},
|
|
|
|
getData() {
|
|
this.zpSelectComponent('#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;
|
|
});
|
|
}
|
|
},
|
|
created: function () {}
|
|
};
|
|
</script>
|
|
<style>
|
|
ec-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.trend {
|
|
width: 100%;
|
|
height: 338rpx;
|
|
}
|
|
</style>
|
|
|