vue使用echarts基本原理以及报错提示undefined(reading init)的解决过程
作者：中芯12341
vue使用echarts及报错提示undefined(reading init)
在通常使用vue去编辑echarts图的时候，对于echarts初学者去论坛搜索echats操作实现柱状图、折线图、饼状图有很多博客都是基于一直怎么去“注册”echarts给出的逻辑代码，所以我们并不能一劳永逸的直接去cv复制我们需要的echarts，有的甚至不理解究竟为什么这样写。
今天我按照vue2的逻辑和结构给大家说一下echarts的使用以及报错的解决过程。
报错如下：
Error in mounted hook: "TypeError: Cannot read properties of undefined (reading init )"
1、全局注册echarts
// echarts import * as echarts from 'echarts'; Vue.prototype.$echarts = echarts
这样注册就可以解决
Error in mounted hook: "TypeError: Cannot read properties of undefined (reading init )" 的问题
原因是有些博客很老当然使用的echarts的引入方式也根据版本在不断更新，所以我们并不能使用老的引入方式echarts（列入）：（错误引入方式）import echarts from 'echarts';
2、编辑vue页面echarts
html部分，需要注意的是我们不管怎么去写echarts都不要忘记编辑width和height;
<!-- 折线图 -->
<div id="main2" class="echarts" style="width:100%;height:300px;"></div>js部分 ，通过触发事件getmain2（）来去调用echarts；
getmain2（）可以挂在生命周期中或者你的项目请求数据请求完毕之后在进行这个方法引入就可以。
// echarts图
getmain2() {
let myChart = this.$echarts.init(document.getElementById("main2"));
let option = {
xAxis: {
type: "category",
name: '年、月',
data: this.echarttable.months,
},
legend: {},
toolbox: { //工具栏
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ["line", "bar"] },
// restore: { show: true },
saveAsImage: { show: true }
}
},
tooltip: {
trigger: "axis" //显示当前列的所有信息
},
yAxis: {
type: "value",
name: '通过率%',
axisLabel: {
formatter: '{value} %', // 设置纵坐标显示百分比形式
},
},
series: [
//数据 五条折线数据 line 折线
{
name: '海口市公安局秀英分局(百分比)',
data: this.echarttable.xiuying,
type: "line"
},
{
name: '海口市公安局龙华分局(百分比)',
data: this.echarttable.longhua,
type: "line"
},
{
name: '海口市公安局美兰分局(百分比)',
data: this.echarttable.meilan,
type: "line"
},
{
name: '海口市公安局琼山分局(百分比)',
data: this.echarttable.qiongshan,
type: "line"
},
{
name: '海口市公安局开发区分局(百分比)',
data: this.echarttable.kaifaqu,
type: "line"
}
]
};
// 注册echarts的option
myChart.setOption(option);
},这里一定会萌新看不懂，这是怎么建立的关联的呢？？？
1、首先我们通过获取节点的方式获取到html部分的id 是main2
let myChart = this.$echarts.init(document.getElementById("main2"));这里其实也就是我们使用其他博客的人项目中的代码后报错的地方，主要就是因为我们在main上的引入方式不对；
2、注册option
// 注册echarts的option
myChart.setOption(option);其实option这个对象里面才是我们实现echarts的根本，通过上面的步骤我们已经把option和div标签深度绑定也就是说这里面填写的js都会在div里面显示我们要状态
3、编写option
let option = {
内容在上面
}这就是整个echarts的步骤了，关于他的功能上述代码
注意注意
可以直接cv，不过要更改横纵坐标的data换成已知的假数据才可以
相信如果这里你全部看完的话，你是一定会全面理解这个东西咋ivue上的使用方法，当然为了防止即拿主意，上面代码的data都是我们请求后端出的数据，所以想要看效果还是需要进行数组编辑的，不过这不是很难，也是为了排除一部分cv的吧，毕竟分享一篇博客不是用来cv的是学习和记录的过程，所以很感谢你能看到这里！
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。