echats大规模面积图在vue中

    // 大面积图
    initCharArea (element, title, titleArr, numberArr) {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(element)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '',
          x: '10px',
          color: '#fff'
        },
        tooltip: { trigger: 'axis', formatter: `{b}: 当前${title}{c}%` },
        legend: {
          orient: 'horizontal',
          x: '50px',
          y: 'top',
          // data: ['cpu'],
        },
        grid: {
          // containLabel: false,
          show: true,
          top: '16%',
          left: '8%',
          right: '8%',
          bottom: '3%',
          containLabel: true,
          borderColor: '#096aae',
          borderWidth: 1
        },
        xAxis: {
          name: '',
          type: 'category',
          data: [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
          splitLine: {
            show: true,
            lineStyle: {
              type: 'solid',
              color: '#096aae',
            }
          },
          nameTextStyle: {
            color: '#fff'
          },
          nameLocation: 'middle',
          axisLabel: {
            color: '#fff',
            rotate: 30,
            interval: 0
          },
          axisTick: {
            lineStyle: {
              color: '#096aae'
            }
          }
        },
        dataZoom: [{
          type: 'slider',
          show: false, // flase直接隐藏图形
          xAxisIndex: [0],
          left: '9%', // 滚动条靠左侧的百分比
          bottom: 0,
          startValue: this.chatStart, // 滚动条的起始位置
          endValue: this.chatEnd // 滚动条的截止位置（按比例分割你的柱状图x轴长度）
        }],
        yAxis: {
          // show: false,
          max: '100',
          axisLabel: {
            color: '#fff',
            rotate: 30,
            interval: 0
          },
          axisLine: {
            show: false
          },
          splitLine: {    // 网格线
            lineStyle: {
              type: 'solid',
              color: '#096aae'   // 设置网格线类型 dotted：虚线   solid:实线
            },
            show: true // 隐藏或显示
          },
          axisTick: {
            lineStyle: {
              color: '#096aae'
            }
          }
        },
        series: [{
          name: title,
          type: 'line',
          smooth: true,
          data: numberArr,
          itemStyle: {
            normal: {
              color: '#f11ab3',
              lineStyle: {
                color: '#f11ab3',
              }
            }
          },
          areaStyle: {
            /* normal: { origin: 'start', color: 'rgba(57,127,255,.1)', opacity: 1 }, */
            normal: {
              color: {
                type: 'linear', // 设置线性渐变
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: '#f11ab3' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgb(96,104,241)' // 100% 处的颜色
                }],
                globalCoord: false // 缺省为 false
              },

            }
          },
        },
        ]
      })
    }