在vue中引入echart的折线图时，echarts.graphic.LinearGradient，不能正常显示的解决方法。

在vue中需要达到折线图，且有区域渐变色的效果，那么像下面那样子直接复制过来，在vue中不能渲染出来。需要将原来的 new echarts.graphic.LinearGradient 改成这样，new this.$echarts.graphic.LinearGradient

前提先是npm安装echart

1、使用npm安装

npm install echarts --save

2、main.js中引入挂载原型

import echarts from 'echarts'
//需要挂载到Vue原型上
Vue.prototype.$echarts = echarts

<-- 3、记得要设置宽高-->

<div id="bottomRight" :style="{width: '580px', height: '500px'}">折线示意图</div>

methods: {
    // 初始化echarts
    ageInit () {
      // 因为初始化echarts 的时候，需要指定的容器 id='bottomRight'
      // 基于刚刚准备好的 DOM 容器，初始化 EChart 实例
      const myChart1 = this.$echarts.init(document.getElementById('bottomRight'))
      const color = ['#6080EB', 'rgba(96, 128, 235, 0.42)', 'rgba(96, 128, 235, 0.03)']
      const xData = ['2021-10-01', '2021-10-02', '2021-10-03', '2021-10-04', '2021-10-05', '2021-10-06', '2021-10-07']
      const yData = [1220, 182, 491, 234, 790, 330, 310]
      // 绘制图表
      myChart1.setOption({
        color: color[0],
        dataZoom: {
          type: 'inside',
          xAxisIndex: [0]
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        grid: {
          top: 10,
          bottom: 40
          // left: 70,
          // right: 20,
        },
        xAxis: {
          boundaryGap: false,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#d8d8d8'
            }
          },
          axisLabel: {
            color: 'rgba(0, 0, 0, 0.65)'
          },
          data: xData
        },
        yAxis: {
          splitNumber: 4,
          splitLine: {
            show: true
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#d8d8d8'
            }
          },
          axisLabel: {
            color: 'rgba(0, 0, 0, 0.65)'
          }
        },
        series: [
          {
            type: 'line',
            showSymbol: false,
            smooth: true,
            lineStyle: {
              color: color[0],
              width: 3
            },
            areaStyle: {
              // 区域填充样式
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: color[1]
                    },
                    {
                      offset: 1,
                      color: color[2]
                    }
                  ],
                  false
                )
              }
            },
            data: yData
          }
        ]
      })
    }

mounted () {
  this.ageInit()
},

效果图