echarts中graphic_vue项目中引入echart 调用其graphic方法报错的问题

index.js中引入echart

在页面当中想要使用echart方法

const lineOpts = {

//鼠标移上去时的提示框

tooltip: {

trigger: 'axis',

textStyle: {

color: '#ccc'

},

position: function (p) { //其中p为当前鼠标的位置

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轴的设置

xAxis: {

data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],//数据展示

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 未定义 请问哪里出了问题