epmet-work-mp/pages/statistics/modules/Trend/Trend.js

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
            })
        }
    }
});