Vue中使用echarts

npm 安装 ECharts

npm install echarts --save

引入 echarts

 基于准备好的dom,初始化echarts实例 通过 document.getElementById("main") 获取原生dom ;

项目中有多个图表时,须使用不同的 id,通过 ref 获取dom ,不同于上面, ref 作用于这个组件实例内,保证 ref 在这个组件实例中是唯一的即可

以饼图为例

将柱状图echarts实例挂载到window下,通过window.onresize函数实现柱状图能自适应浏览器窗口大小的变化

引入饼图页面这个组件

你可能感兴趣的:(Vue中使用echarts)