vue 项目添加echarts图表

1.安装echarts

npm install echarts --save

image.gif

2.可以在项目入口一如全局 也可以在局部页面引入

1.在单独页面引入

import echarts from 'echarts'

image.gif

2. 也可以在main.js 引入全局

import echarts from 'echarts'

//放入全局vue 对象中
Vue.prototype.$echarts = echarts

image.gif

3.div容器

<div id="main" style="width: 600px;height: 400px;"></div>

image.gif

var demo = echarts.init(document.getElementById("main"));

 demo.setOption({

       ...渲染图表js
 });

image.gif

4.图表重新渲染的方法 需要自适应宽度 放到窗口变化事件中OK

echarts.resize();

image.gif