【已解决】Vue引入echarts和遇到的问题

参考

• 参考链接：Echarts官网
• 参考文章：Vue中引入echarts。

踩坑

Cannot read properties of undefined (reading ‘init‘)

• 引入echarts失败
• 不可以 import echarts from 'echarts'
• 需要 import * as echarts from 'echarts'

步骤

• 先对main.js 配置import * as echarts from 'echarts'
• 用如何使用路由的形式，使用echarts
• 比如app.use(router)就app.use(echarts)
• 比如下图，就直接加入echarts，等等

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

• 最后在你需要使用的view或者组件的scripts导入即可

下载官方案例

• 

根据html，分出数据和函数

• option：放入data的return{}中
• 函数：放入mount{}中，option要写为this.option

If判断

   if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);

可以简化为一句 myChart.setOption(option);

CSS 布局

• 很多时候引入不显示是由于重叠了组件
• <div id="plat"> </div>
• 由于使用id，修改css时需要#plat而不是.plat

#plat {
	width: 100%;
	height: 100%;
	/* background-color: #f5f5f5; */
}


#plat {
	position: absolute;
	top: 80px;
	left: 200px;
	width: 80%;
	height: 600px;

}

效果图

（修改部分字段）