前端工程师-echarts文档看后总结为自己的理解

Echart 请使用的时候一定要升到4.0上，要不就会发现坑一大堆，配到怀疑人生都不起作用

官方网站：https://echarts.apache.org/zh/option.html#legend.orient

Html：
<div ref="analysisEquipments"

id=”analysisEquipments” 

style="width: 455px;height:292px;margin:0 auto"></div> // 一定要指定宽高

js : 我们项目中初始化echarts

// 也可以用document.getElementById(“analysisEquipments”)来获取dom
this.dom = vm.$refs[ref];

// 我们项目中将echarts挂在vue实例上

this.chart = vm.$echarts;

 // 每一个图表的所有配置均在options对象中

this.option = options;

// 直接调用echarts对象的init方法初始化一个 echarts 实例，再调用setOption方法设置图表的配置

this.chart.init(this.dom).setOption(this.option); //每个 echarts 实例独占一个 DOM 节点。

1.重点：option

所有的图表配置均在option中

以饼图为例：

在echarts中：tooltip,legend ... 都叫做组件（不包括Series），组件的配置在当前echarts实例中称为全局配置，简单的来说就是每个系列都用到组件中的配置。（可以看一下官网的图片）

 

 

 

 

Series称为系列（是一种特殊的组件）：一组数值以及他们映射成的图称为系列

在echarts 里系列类型（series.type）就是图表类型。

我们可以在一个echarts实例中实现多个系列，也可以只单独实现一个系列。

再来看看组件与系列的关系：

图中我们的xAxis是直角坐标系 grid（也是一个组件，它是直角坐标系内的网格，后面有示例图） 中的 x 轴，我们可以看到，目前我们的echarts实例中的option中有3个系列，分别为饼图，树状图与折线图，其中树状图与折线图内的data是我们真正的值，而xAxis 中的data，是直角坐标系X轴的值，这就是为什么说，除系列之外，都是组件。

  //下图为grid

 

 

 

 

再来说说：数据集（dataset）组件，刚才我们也看到，组件有自己独立的数据，每一个系列也有独立的数据，这样就出现了数据复用困难的问题，因此，echart很贴心的给我们准备了dataset这个组件

以下图为例，我们说说Dataset的使用

 

 

 

大家看到们这样一句话xAxis: {type: 'category'} 

这句话就是声明了一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。那就一目了然，dataset中source的数组的第一列就是横坐标了，因为我们可以看下图的官方文档解释，除了在source中的设置方法，还可以从xAxis.data中设置类目，第一个例子我们就发现了，在xAxis.data中的数据就是直角坐标系X轴的值。

 

 

再看在我们每个series中，有一个encode属性

每一种图表encode的配置都有不同之处，可以参考下图中的说明。

 

以上就是echarts的简单说明，当然还有很多，这个需要我们在文档中多多学习。

希望有理解不到位的地方可以予以指正，不胜感激。