调用graphic.LinearGradient()方法报undefined about vue-echarts-v3 HOT 3 CLOSED

<template>
    <div>
        <div class="chart">
            <label>{{title}}</label>
            <IEcharts :option="bar" :loading="loadingFlag" @ready="onReady"></IEcharts>
        </div>
    </div>
</template>
<script>
    import IEcharts from 'vue-echarts-v3/src/full.vue';

    var data = {
        name: ['党政', '经济', '农业', '政法', '信访', '扶贫', '财贸'],
        value: [1, 3, 5, 7, 9, 11, 13],
    };
    export default {
        props: ['title', 'chartData'],
        data() {
            return {
                loadingFlag: true,
                bar: {}
            }
        },
        components: {
            IEcharts
        },
        mounted() {
        },
        methods: {
            onReady(instance, echarts) {
                this.loadingFlag = false;
                console.log(echarts)
                this.getOptions(echarts)
            },
            getOptions(echarts){
                let options = {
                    xAxis: {
                        data: data.name,
                        axisLabel: {
                            inside: false,
                            textStyle: {
                                interval: 0,
                                color: '#fff',
                                fontSize: 12
                            }
                        },
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        z: 10
                    },
                    yAxis: {
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#999'
                            }
                        }
                    },
                    dataZoom: [
                        {
                            type: 'inside'
                        }
                    ],
                    series: [
                        {
                            type: 'bar',
                            itemStyle: {
                                normal: {
                                    color: echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#fff'},
                                            {offset: 1, color: '#000'}
                                        ]
                                    )
                                }
                            },
                            label: {
                                normal: {
                                    fontWeight: 'bolder',
                                    fontSize: 23
                                }
                            },
                            barWidth: 20,
                            data: data.value
                        }
                    ]
                }
                this.bar = options;
                return options;
            }
        }
    }
</script>

<template>
  <div class="echarts">
    <IEcharts :option="bar" @ready="onReady" />
  </div>
</template>

<script>
import IEcharts from 'vue-echarts-v3/src/full.vue'

export default {
  name: 'view',
  components: {
    IEcharts
  },
  data () {
    // const that = this
    return {
      ins: null,
      echarts: null,
      bar: {}
    }
  },
  methods: {
    onReady (instance, echarts) {
      const that = this
      that.ins = instance
      that.echarts = echarts

      that.bar = {
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
          axisLabel: {
            inside: false,
            textStyle: {
              interval: 0,
              color: '#fff',
              fontSize: 12
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
        dataZoom: [
          {
            type: 'inside'
          }
        ],
        series: [
          {
            type: 'bar',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    { offset: 0, color: '#fff' },
                    { offset: 1, color: '#000' }
                  ]
                )
              }
            },
            label: {
              normal: {
                fontWeight: 'bolder',
                fontSize: 23
              }
            },
            barWidth: 20,
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      }
    }
  }
  // beforeMount () {
  //   const that = this
  // },
  // mounted () {
  //   const that = this
  // },
  // beforeDestroy () {
  //   const that = this
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.echarts {
  width: 800px;
  height: 800px;
}
</style>