vue图表插件echarts简单使用办法

一、了解Echarts

            ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

二、下载插件

cnpm install echarts --save  &  npm install echarts --save

三、不多说直接来干的。

       下载完成后,打开我们的vue项目中的main.js中引入插件

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

       在main.js中全局引入后,在组件中添加一个dom节点

回看Echarts官网


点击实例的官方实例


选择需要的列表类型,点进去。。。


ok,拿到了。 左边的代码直接复制到刚才创建节点的文件内,定义一个方法,


最后通过 myChart.setOption(var的那个名称)方法传到实例中就欧克了!

仅供参考,其中的属性全是语义化命名的。

得到参数后,把对应的属性复制 就ok了。。。

你可能感兴趣的:(vue图表插件echarts简单使用办法)