echarts 的使用

官网地址

https://echarts.apache.org/handbook/zh/concepts/dataset

要配合打在echarts Api进行查看，api地址如下:

https://echarts.apache.org/zh/option.html#title

使用步骤一：引入echarts

1、设置dom标签的宽度和高度

 2、调用echarts.init方法初始化echarts

注：在vue中获取标签实例的方法，通过ref标签即可。

3、设置图标配置项

数据集dataSet

 最重要的就是option配置项的设置。其中推荐使用数据集dataSet的配置。在项目中数据常常发生改变，而配置不常发生改变，更接近于后端返回的数据。

 官网数据集的说明链接：

https://echarts.apache.org/handbook/zh/concepts/dataset

示例：

option = {legend: {},tooltip: {},dataset: {// 提供一份数据。
    source: [['product', '2015', '2016', '2017'],['Matcha Latte', 43.3, 85.8, 93.7],['Milk Tea', 83.1, 73.4, 55.1],['Cheese Cocoa', 86.4, 65.2, 82.5],['Walnut Brownie', 72.4, 53.9, 39.1]]},// 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。xAxis: { type: 'category' },// 声明一个 Y 轴，数值轴。
  yAxis: {},// 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

 数据集定义为对象数组的格式

option = {legend: {},tooltip: {},dataset: {// 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，// 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。// 如果不指定 dimensions，也可以通过指定 series.encode// 完成映射，参见后文。dimensions: ['product', '2015', '2016', '2017'],source: [{ product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7 },{ product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1 },{ product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5 },{ product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1 }]},xAxis: { type: 'category' },yAxis: {},series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
};

 其他常见的用法可以看看应用篇

https://echarts.apache.org/handbook/zh/how-to/chart-types/bar/basic-bar