解决首页销售趋势图不显示问题

guanqb

2022-08-25 ef0c1ce446331f3fb805105b190f0f20846d956e

解决首页销售趋势图不显示问题

 src/views/home/index.vue

@@ -1324,7 +1324,7 @@
            params.farmId = this.farmId
            selctSaletCount(Object.assign(params)).then((res) => {
                that.salaNumY = res.data.data
                this.initLine('TrendEcharts')
                this.initSaleLine('TrendEcharts')
            })
        },
        // 按行政区统计市场流通
@@ -1788,7 +1788,6 @@
                },
                xAxis: [
                    {

                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
@@ -1890,6 +1889,111 @@

            option && myChart.setOption(option)
        },
        initSaleLine (dom) {
            const that = this
            const chartDom = document.getElementById(dom)
            const myChart = this.$echarts.init(chartDom)

            var x = []
            var y = []
            for (let i = 1; i <= 12; i++) {
                x.push(i)
                y.push(that.salaNumY[i])
            }

            const option = {
                tooltip: {},
                grid: {
                    top: '16%',
                    left: '6%',
                    right: '6%',
                    bottom: '12%',
                    containLabel: true
                },
                xAxis: [
                    {

                        type: 'category',
                        boundaryGap: false,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#697B89'
                            }
                        },
                        axisLabel: {
                            // 坐标轴刻度标签的相关设置
                            textStyle: {
                                color: '#A9D1D7',
                                margin: 8
                            }
                        },
                        axisTick: { show: false },
                        data: x
                    }
                ],
                yAxis: [
                    {
                        name: '（元）',
                        nameTextStyle: {
                            color: '#A9D1D7'
                        },
                        type: 'value',
                        min: 0,
                        splitLine: {
                            show: false
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#697B89'
                            }
                        },
                        axisLabel: {
                            margin: 8,
                            textStyle: {
                                color: '#A9D1D7'
                            }
                        },
                        axisTick: { show: false }
                    }
                ],
                series: [
                    {
                        type: 'line',
                        smooth: true, // 是否平滑曲线显示
                        symbolSize: 0,
                        lineStyle: {
                            normal: {
                                color: '#66DDE9' // 线条颜色
                            }
                        },
                        areaStyle: {
                            // 区域填充样式
                            normal: {
                                // 线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                                color: new that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#66DDE9'
                                }, {
                                    offset: 1,
                                    color: 'rgba(102,221,233,0)'
                                }]),

                                shadowColor: 'rgba(53,142,215, 0.9)', // 阴影颜色
                                shadowBlur: 20 // shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                            }
                        },
                        data: y
                    }
                ]
            }

            option && myChart.setOption(option)
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        },
        // flv视频播放
        playFlvVideo (url) {
            // 先销毁