Vue学习笔记-引入Echarts图表

近期，公司出了一个新需求，我们需要开发一个数据统计平台，于是就需要使用图表来是数据更直观的呈现。Echarts是我们的首选。

重点：用较少的代码实现比较酷炫的数据统计表.

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

丰富的可视化类型

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件，如果只是需要其中一两个图表，又嫌包含所有图表的构建文件太大，也可以在在线构建中选择需要的图表类型后自定义构建。

多种数据格式无需转换直接使用

ECharts 内置的 dataset 属性（4.0+）支持直接传入包括二维表，key-value 等多种格式的数据源，通过简单的设置 encode 属性就可以完成从数据到图形的映射，这种方式更符合可视化的直觉，省去了大部分场景下数据转换的步骤，而且多个组件能够共享一份数据而不用克隆。

为了配合大数据量的展现，ECharts 还支持输入 TypedArray 格式的数据，TypedArray 在大数据量的存储中可以占用更少的内存，对 GC 友好等特性也可以大幅度提升可视化应用的性能。

下面介绍一下echarts的使用过程。

安装echarts依赖

npm install echarts -S

或者使用国内的淘宝镜像：

• 安装

  npm install -g cnpm --registry=https://registry.npm.taobao.org
  

• 使用

  cnpm install echarts -S
  

  创建图表

main.js

// 引入echarts
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

使用步骤：

第一步：引用Js文件

第二步：准备一个放图表的容器（画布）必须指定高度，否则不会显示

第三步：echarts.init(dom容器)，初始化echarts实例,一般放在最后（定义）

var myChart = echarts.init(document.getElementById('chartmain'));

第四步： 使用制定的配置项和数据显示图表,这两步都放在最后（显示）

myChart.setOption(option);

第五步：设置参数

柱状图其实也很简单，只要修改一个参数就可以了。把series里的type 值修改为”bar”

饼图和折线图、柱状图有一点区别。主要是在参数和数据绑定上。饼图没有X轴和Y轴的坐标，数据绑定上也是采用value 和name对应的形式。