<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>
