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节点

<div id="myChart" :style="{width: '1000px', height: '500px'}"></div>

回看Echarts官网

点击实例的官方实例

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

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

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

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

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