echarts报错提示echarts is not defined &&& echarts柱状图分段叠加展示

在浏览器页面实现如下图效果所示，放在项目里后报错，排查后发现渐变透明色代码中的color: new echarts 设置完报错,

• 方法一，在使用渐变色的地方改为new this.$echarts可以加载出来，为什么呢？

• 方法二，在当前项目引入
  import echarts from “echarts” ，报错消失
  引入import时位置不能放在export default的内部，而在顶层作用域，否则报错import is a reserved word
  

app.title = '堆叠柱状图';

option = {
   
    backgroundColor: '#fff',
    tooltip: {
   
        trigger: 'axis',
        axisPointer: {
    // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        }
    },
    legend: {
   
        data: ['组合有功尖电能', '组合有功峰电能', '组合有功平电能', '组合有功谷电能'],
        textStyle: {
   
            color: '33363b'
        }
    },
    grid: {
   
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
   
        type: 'category',
        data: