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

import * as echarts from '../../../../ec-canvas/echarts';

function initChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // 像素比
    });
    canvas.setChart(chart);
    let xData = ['10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月'];
    let tq1 = [12, 20, 30, 60, 49, 18, 90, 48, 39, 30, 27, 40, 48, 39, 27, 49];
    let tq2 = [10, 50, 50, 27, 49, 58, 80, 80, 19, 60, 30, 30, 49, 18, 90, 20];
    let tq3 = [300, 90, 48, 39, 30, 27, 49, 18, 90, 39, 27, 49, 30, 100, 49, 100];

    var option =  {
        title: {
            show: false,
            text: '',
            x: 'center',
            top: '15px',
            textStyle: {
                color: '#333333',
                fontWeight: 500,
                fontSize: 18,
            },
        },

        legend: {
            // icon: 'circle',
            data: ['12345投诉事件数', '省调查不满意数', '社区自查不满意数'],
            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: [
            {
                name: '12345投诉事件数',
                type: 'line',
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 0,
                lineStyle: {
                    normal: {
                        color: '#3A80E7',
                    },
                },
                label: {
                    show: false,
                },
                itemStyle: {
                    show: false,
                    color: '#FFF',
                    borderColor: '#3A80E7',
                    borderWidth: 1,
                },
                data: tq1,
            },
            {
                name: '省调查不满意数',
                type: 'line',
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 0,
                lineStyle: {
                    normal: {
                        color: '#EB8E16',
                    },
                },
                label: {
                    show: false,
                },
                itemStyle: {
                    color: '#fff',
                    borderColor: '#EB8E16',
                    borderWidth: 1,
                },
                data: tq2, //data.values
            },
            {
                name: '社区自查不满意数',
                type: 'line',
                yIndex: 0,
                showAllSymbol: true,
                symbol: 'circle',
                symbolSize: 0,
                lineStyle: {
                    normal: {
                        color: '#10B2A5',
                    },
                },
                label: {
                    show: false,
                },
                itemStyle: {
                    color: '#fff',
                    borderColor: '#10B2A5',
                    borderWidth: 1,
                },
                data: tq3, //data.values
            }
        ],
    };
    chart.setOption(option);
    return chart;
}

Component({
    properties: {},
    data: {
        ec: {
            onInit: initChart
        }
    },
    methods: {
    }
});