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

柴火棒_

于 2020-07-22 18:50:27 发布

阅读量1.4k

点赞数 1

分类专栏： echarts 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_35283993/article/details/107519951

版权

在Vue.js项目中尝试实现echarts柱状图分段叠加展示时遇到错误，提示'echarts is not defined'。通过两种方法解决了问题：1) 将渐变色代码中的`color: new echarts`更改为`color: new this.$echarts`；2) 在项目顶层引入echarts库，避免在export default内部引入导致的'import is a reserved word'错误。

摘要由CSDN通过智能技术生成

在浏览器页面实现如下图效果所示，放在项目里后报错，排查后发现渐变透明色代码中的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: ['周一', '周二',