echarts官网:点击跳转
npm安装
npm install [email protected] --save
注意:
-
不要直接安装
npm install echarts --save
这样安装默认会安装最新版本,最新版本会有一些莫名其妙的bug,@5.2.0是前一个版本,5.2.0会稳定一些
引入echarts
main.js全局引入
//踩过坑 import echarts from 'echarts' 会报错
import * as echarts from 'echarts';
// 起别名
Vue.prototype.$echarts = echarts;
创建一个容器
<!-- 一个带宽高和id的div就可以了
*注意需要设置宽高 不然图表显示不出来 -->
<div id="zhu" style="width: 100%;height: 400px;"></div>
初始化
//柱状图
getZhu() {
let myEchart = this