vue項目中引入echart 調(diào)用其graphic方法報錯的問題

index.js中引入echart

在頁面當(dāng)中想要使用echart方法

const lineOpts = {  
    //鼠標(biāo)移上去時的提示框
    tooltip: {
      trigger: 'axis',
      textStyle: {
        color: '#ccc'
      },
      position: function (p) {   //其中p為當(dāng)前鼠標(biāo)的位置
        return [p[0] - 70, p[1] - 90];
      },
      extraCssText: 'box-shadow: 0 0 10px 2px rgba(214, 222, 230, 0.8); background: #fff; color: #8E99A1; padding: 20px 20px; line-height: 20px'
    },
    //圖表相對于容器的位置
    grid: {
      top : 40,
      bottom: 20,
      left: 70,
      right: 70
    },
   //X軸的設(shè)置
    xAxis: {
      data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"],//數(shù)據(jù)展示
      axisLabel: {
        inside: true,
        textStyle: {
          color: '#fff'
        }
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      z: 10
    },
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#999'
        }
      }
    },
    series: [
      {
        type: 'bar',
        barWidth:60,//柱狀圖寬度
        itemStyle: {
          normal: {
            color: this.$echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: '#83bff6'},
                {offset: 0.5, color: '#188df0'},
                {offset: 1, color: '#188df0'}
              ]
            )
          },
          emphasis: {
            color: this.$echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: '#2378f7'},
                {offset: 0.7, color: '#2378f7'},
                {offset: 1, color: '#83bff6'}
              ]
            )
          }
        },
        data: [5, 20, 36, 10, 10, 20]
      },
      
     
    ]
  };

控制臺報錯 說graphic 未定義 請問哪里出了問題