【已解决】在vue中引入echart的折线图时，echarts.graphic.LinearGradient报错，不能正常显示。

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

报错

错误代码

 //自定义环形图颜色
                color: [
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#4494F5" },
                        { offset: 1, color: "#08DDF2 " }
                    ]),
                    new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 1, color: "#08DDF280" },
                        { offset: 0, color: "#3D9CF580" },
                    ]),

                ],

修改后

  color: [
                    new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#4494F5" },
                        { offset: 1, color: "#08DDF2 " }
                    ]),
                    new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 1, color: "#08DDF280" },
                        { offset: 0, color: "#3D9CF580" },
                    ]),

                ], //自定义环形图颜色

正确展示

完整步骤

前提先是npm安装echart

1、使用npm安装

npm install echarts --save

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

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

3、记得要设置宽高-

 <div :class="className" :style="{ height: height, width: width }" ref="Echart" />

   initChart() {
            // 创建 echarts 实例。
            var myChartOne = this.$echarts.init(this.$refs.Echart);
            myChartOne.setOption({
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "shadow",
                    },
                },
                tooltip: {
                    trigger: "item",
                },
                //自定义环形图颜色
                color: [
                    new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: "#4494F5" },
                        { offset: 1, color: "#08DDF2 " }
                    ]),
                    new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 1, color: "#08DDF280" },
                        { offset: 0, color: "#3D9CF580" },
                    ]),
                ],
                series: [
                    {
                        type: 'pie',
                        radius: ['25%', '40%'],
                        center: ['50%', '70%'], 
                        startAngle: 180,
                        label: {
                            show: false,
                        },
                        data: [
                            { value: 1048, name: 'Search Engine' },
                            { value: 735, name: 'Direct' },
                            {
                                value: 1048 + 735,
                                itemStyle: {
                                    color: 'none',
                                    decal: {
                                        symbol: 'none'
                                    }
                                },
                                label: {
                                    show: false
                                }
                            }
                        ]
                    }
                ]
            });
        },

mounted () {
  this.initChart()
},

效果图