1.引入echarts

· 直接html引入 src

· ES引入 import echarts from node_module/echarts/echarts

· 普通引入 var echarts = require(“echarts”);

2. js配置部分

1.  Echarts初始化并绑定容器var echarts = Echarts.init(document.getElementById('main'));
2.  option配置项var option = {title: {text: "Echarts 数据统计图表"},tooltip: {},legend: {name: "数据划分"    // 必须与下文的serise中的name保持一致},xAxis: {data: ["Android","IOS","PC","oPPer","mot","Ohter"]},yAxis: {},serise: [{name: "数据划分",type: "line", //  图表类型： treemap(树状图)，pie(饼状图)，bar(柱状图) data：[500,200,360,100,10, 1000]  //y轴数据}]}// 上面的serise的data数组里是对象条的时候一般用于饼状图，显示区域名称Example: data: [{value:500,name:'Android'},{value:200,name:'IOS'},{value:360,name:'PC'},{value:100,name:'Ohter'}]
3.  Echarts调用配置项optionecharts.setOption(option);

图形色块颜色设置，以饼状图为例：

1. 图块的整体设置var option = {serise: [{data: [{ value:310, name:'邮件营销', itemStyle: {        // 图块设置，  normal可带可不带normal: {color: '#058f98',  // 颜色设置shadowBlur: 100,   // shadow距离设置shadowColor: ''    // 投影颜色设置},},label: {            // 饼状图字体颜色设置未带normaltextStyle: {color: '#058f98'}},label: {            // 饼状图字体颜色设置带normalnormal: {textStyle: {color: '#058f98'}}},labelLine: {        // 饼状图对应色块线颜色设置normal: {lineStyle: {color: '#058f98'}}},},]}]}2.当扇形（柱形其他型待测）的区块只有明暗度（颜色的深浅）的变化时，有一种更快捷的方式是通过 visualMap 组件将数值的大小映射到明暗度。
var option = {visualMap: {// 不显示 visualMap 组件，只用于明暗度的映射show: false,// 映射的最小值为 80 --> 指的是明暗度的值不是区块的值，下面600也是min: 80,// 映射的最大值为 600max: 600,inRange: {// 明暗度的范围是 0 到 1colorLightness: [0, 1]}}
}

Echart新引进的两套主题： light、dark

调用方式： Echart.init(dom, “light”);

Echarts 全局调色盘和局部调色盘：

1. 全局调色盘指的是在option下直接添加color数组，图块区域会根据数组的的排序依次获取颜色，如果添加了系列自己专属的调色盘(局部颜色），也是color属性,系列自己的颜色高于全局原色；
   所以图块的颜色可直接定义好添加在color属性中，然后让它自动去取；
2. 在饼图中图块颜色文字和线以及对应字体颜色默认都是一一对应的，一般情况下不建议调

好看的颜色推荐：

color: ['#dd6b66','#759aa0','#e69d87','#8dc1a9','#ea7e53','#eedd78','#73a373','#73b9bc','#7289ab', '#91ca8c','#f49f42'],
color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
color: ['#37A2DA', '#32C5E9', '#67E0E3', '#9FE6B8', '#FFDB5C','#ff9f7f', '#fb7293', '#E062AE', '#E690D1', '#e7bcf3', '#9d96f5', '#8378EA', '#96BFFF'],

给图块或文字添加高亮（高亮也就是鼠标经过的时候的颜色，也就是hover时的颜色），相关代码:

emphasis: {show: true,     // 定义标签文字高亮时会要此属性，图块高亮是此属性直接省略；color: "blue"
} 1. 标签lable：
lable: {// 普通样式/正常样式normal: {show: true,formatter: 'This is a normal label.'},// 高亮样式emphasis: {show: true,formatter: "This is a emphasis label."   // 高亮时显示的文字} 
}2.itemStyle: {// 普通样式normal: {color: 'red',},// 高亮样式emphasis: {color: "yellow"}
}

加载动画： loading

Echarts有自己内置的loading方法：showLoading() 和 hideLoading();

var echart = Echarts.init(dom);
echart.showLoading();     // 未绑定数据时调用   显示loading
echart.hideLoading();     // 绑定好数据后调用   隐藏loading

数据的动态更新 --> 产生动态图

ECharts 由数据驱动，数据的改变驱动图表展现的改变;

所有数据的更新都通过 setOption实现，你只需要定时获取数据，setOption 填入数据，而不用考虑数据到底产生了那些变化，ECharts 会找到两组数据之间的差异然后通过合适的动画去表现数据的变化。

使用 dataset 管理数据

优点: 直观易理解，以及适于对一些特殊图表类型进行一定的数据类型定制。

缺点: 为匹配这种数据输入形式，常需要有数据处理的过程，把数据分割设置到各个系列（和类目轴）中。此外，不利于多个系列共享一份数据，也不利于基于数据原始进行图表类型、系列的映射安排

option = {legend: {},tooltip: {},dataset: {// 提供一份数据。source: [['product', '2015', '2016', '2017'],   //   这组后面的三个字符串相当于name代表不同bar图块['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，也可以通过指定 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'}]
};

数据到图形的映射（encode）

var option = {dataset: {source: [['score', 'amount', 'product'],  // 这一列对应它后面的每份数据，跟索引i相似[89.3, 58212, 'Matcha Latte'],[57.1, 78254, 'Milk Tea'],[74.4, 41032, 'Cheese Cocoa'],[50.1, 12755, 'Cheese Brownie'],[89.7, 20145, 'Matcha Cocoa'],[68.1, 79146, 'Tea'],[19.6, 91852, 'Orange Juice'],[10.6, 101852, 'Lemon Juice'],[32.7, 20112, 'Walnut Brownie']]},xAxis: {},yAxis: {type: 'category'}, // type的定义直接决定图形的展现形式是横向还是竖向series: [{type: 'bar',encode: {// 将source中 "amount" 列对应的列映射到 X 轴。x: 'amount',  // 将将source中 "product" 列对应的列映射到 Y 轴。y: 'product'   // 决定渲染对应列的哪一项}}]
};// yAxis的type属性 + encode定位直接决定了图形的展现形式

按行还是按列做映射

用户可以使用 seriesLayoutBy 配置项，改变图表对于行列的理解。seriesLayoutBy 可取值：

(1) ‘column’: 默认值。系列被安放到 dataset 的列上面。

(2) ‘row’: 系列被安放到 dataset 的行上面。

option = {legend: {},tooltip: {},dataset: {source: [['product', '2012', '2013', '2014', '2015'],['Matcha Latte', 41.1, 30.4, 65.1, 53.3],['Milk Tea', 86.5, 92.1, 85.7, 83.1],['Cheese Cocoa', 24.1, 67.2, 79.5, 86.4]]},xAxis: [{type: 'category', gridIndex: 0},{type: 'category', gridIndex: 1}],yAxis: [{gridIndex: 0},{gridIndex: 1}],grid: [{bottom: '55%'},  // 定义第一个距离底部的距离{top: '55%'}     // 定义第二个距离顶部的距离],series: [// 这几个系列会在第一个直角坐标系中，每个系列对应到 dataset 的每一行。{type: 'bar', seriesLayoutBy: 'row'},{type: 'bar', seriesLayoutBy: 'row'},{type: 'bar', seriesLayoutBy: 'row'},// 这几个系列会在第二个直角坐标系中，每个系列对应到 dataset 的每一列。{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},{type: 'bar', xAxisIndex: 1, yAxisIndex: 1},{type: 'bar', xAxisIndex: 1, yAxisIndex: 1}]
}

维度（dimension）

demensions介绍：

当我们把系列（series）对应到“列”的时候，那么每一列就称为一个“维度（dimension）”，而每一行称为数据项（item）。反之，如果我们把系列（series）对应到表行，那么每一行就是“维度（dimension）”，每一列就是数据项（item）。

维度可以有单独的名字，便于在图表中显示。维度名（dimension name）可以在定义在 dataset 的第一行（或者第一列）。例如上面的例子中，‘score’、‘amount’、‘product’ 就是维度名。从第二行开始，才是正式的数据。dataset.source 中第一行（列）到底包含不包含维度名，ECharts 默认会自动探测。当然也可以设置 dataset.sourceHeader: true 显示声明第一行（列）就是维度，或者 dataset.sourceHeader: false 表明第一行（列）开始就直接是数据。

var option1 = {dataset: {dimensions: [{name: 'score'},// 可以简写为 string，表示维度名。'amount',// 可以在 type 中指定维度类型。{name: 'product', type: 'ordinal'}],source: [...]},...
};var option2 = {dataset: {source: [...]},series: {type: 'line',// 在系列中设置的 dimensions 会更优先采纳。dimensions: [null, // 可以设置为 null 表示不想设置维度名'amount',{name: 'product', type: 'ordinal'}]},...
};