vue-cli搭建的项目中使用echarts——echarts版本问题导致的报错解决

系统管理员 2022-08-31 00:46 451阅读 0赞

今天遇到一个功能，就是绘制折线图，我之前是有写过的，但是之前是在引入的`vue.js`的项目中使用的，因此当时也是直接下载`echarts.js`，然后`src`引入后使用的。

今天的项目是`vue-cli`搭建的项目，因此最好还是通过`npm install echarts --save`的方式来下载插件，并引入插件来使用。  
![在这里插入图片描述][1f0c1e1de449d30a77adfc5d020a994e.png]  
下载插件的时候，一定要注意要指定`echarts`的版本号，因此最新版的`echarts`与`vue2.0`有冲突，我今天就吃了这个亏。

安装插件后，在`main.js`中挂载到`vue`原型上后，在页面中使用时，一直提示我`init of undefined`，也就是说`echarts`根本没有。。。

最后通过大神的链接，找到了答案：

[大神解决echarts出现init of undefined报错的问题：https://blog.csdn.net/lwh156541064/article/details/110660837][echarts_init of undefined_https_blog.csdn.net_lwh156541064_article_details_110660837]

先说下具体步骤：

## 1.安装`echarts`插件——不要安装最新版本，要指定版本 ##

`npm install echarts@4.8.0 --save`

如果`npm`失败，则可以使用`cnpm`试一下

`cnpm install echarts@4.8.0 --save`

## 2.在`main.js`中挂载到`vue`原型上——先引入，再挂载 ##

//main.js中的内容
    import echarts from 'echarts';
    Vue.prototype.$echarts = echarts;

## 3.在其他页面使用——先有div容器，在初始化赋值操作 ##

`html`部分代码：

需要注意一点，初始化`echarts`元素最好是在获取到数据之后进行操作：  
`data`中初始化`options`

data(){ 
    	return{ 
    		optionLine: { 
            title: { 
              text: "中国精铜价格(元/每吨)",
              textStyle: { 
                fontSize: 14,//修改标题的字号
              },
            },
            grid: { //此处改变折现区域与坐标轴之间的间距，不能紧靠着
              x: 40,
              y: 45,
              x2: 20,
              y2: 20,
            },
            xAxis: { 
              type: "category",
              boundaryGap: true,
              axisLabel: { 
                textStyle: { 
                  fontSize: 10,//修改刻度值的字号大小
                },
              },
              axisTick: { 
                show: false,//刻度线是否显示
              },
              axisLine: { 
                lineStyle: { 
                  color: "#A4A4A4",//x轴平行的网格线颜色
                },
              },
              data: [],
            },
            yAxis: { 
              type: "value",
              axisLabel: { 
                show: true,
                interval: "auto",
                textStyle: { 
                  fontSize: 10,//y轴刻度值的字号大小
                },
              },
              axisLine: { 
                show: false,//y轴刻度线是否展示
              },
              axisTick: { 
                show: false,//y轴网格线是否展示
              },
            },
            legend: { 
              data: ["铜"],
              right: "right",
              icon: "line",//图例图标的样式，可以是圆形 方形 矩形
              textStyle: { 
                fontSize: 12,
                color: "#f90",//图例文字的字号和颜色
              },
            },
            series: [
              { 
                name: "铜",
                type: "line",
                stack: "价格",
                data: [],
                symbol: "circle", //修改交叉点样式
                symbolSize: 6, //修改交叉点大小
                label: { 
                  show: false,//点击交叉点后是否有弹窗展示内容
                  position: "right",
                  textStyle: { 
                    fontSize: 10,
                  },
                },
                itemStyle: { 
                  normal: { 
                    color: "#f90",//交叉点的颜色
                  },
                },
                lineStyle: { 
                  color: "#f90",//线条颜色
                },
              },
            ],
          },
        };
    	}
    }

drawLine(id) { 
      this.$api
        .getLineData({ 
          top: homeShop.top,
          RawMaterialDataType: homeShop.Rawmaterialtype,
        })
        .then((res) => { 
          var data = res.data;
          this.charts = this.$echarts.init(document.getElementById(id));
          for (var i = 0; i < data.length; i++) { 
            this.optionLine.xAxis.data.push(data[i].valueTime);
            this.optionLine.series[0].data.push(data[i].value);
          }
          this.charts.setOption(this.optionLine);
        });
    },

[1f0c1e1de449d30a77adfc5d020a994e.png]: /images/20220829/0b3d3794e31242a8be115538e8589ace.png
[echarts_init of undefined_https_blog.csdn.net_lwh156541064_article_details_110660837]: https://blog.csdn.net/lwh156541064/article/details/110660837