百度图表 ECharts

ECharts的基本使用：完成一个简单的柱形图。

到ECharts的官网下载ECharts组件
将下载的ECharts组件加载到项目的HTML文档中
在HTML文档中设置一个盛放图表的容器：<div id=”tu”></div> //自行在CSS中为#tu设置CSS样式
在JS文件中为百度图表进行编程：
（1）寻找DOM结构中盛放图表的容器：var tuNode=document.getElementById(“tu”);
（2）对ECharts实例进行初始化：var myChart=echarts.init(tuNode);
（3）利用JSON数据为图表进行设置：

 var option={"title":{"text":"2018年下半年商品销售量"},"legend":{"data":["销量"]},"tooltip":{},"xAxis":{"data":["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","钱包"]},"yAxis":{},"series":[{"name":"销量","type":"bar",   //图表类型：bar表示柱形图"data":[50,20,30,100,30,15]}]
}

（4）利用ECharts实例的setOption()方法显示图表：myChart.setOption(option);
5. 百度图表的常用组件：
（1）title：图表的标题组件。
（2）legend：图表的图例组件。
（3）xAxis：图表的x轴组件。
（4）yAxis：图表的y轴组件。
（5）series：图表的数据系列组件。
（6）tooltip：图表的工具提示组件。

百度图表（柱形图以及各个组件的含义）

一、制作一个百度图表的注意事项：

图表中的组件键名必须用双引号引住。
series组件中的name取值必须和legend组件中的data取值相同。
series组件中的data取值个数必须和xAxis类目轴中data取值个数相同。
series组件的取值是一个数组。
所有以px为单位的数值取值，单位px必须省略。

二、多数据系列的柱形图如何绘制：

增加图例组件legend的data数据取值：

“legend”:{“data”:[“平均成绩”,“及格人数”]
}

增加数据系列组件series的取值个数：

“series”:[{“name”:“平均成绩”,“type”:“bar”,“data”:[87,92,79,90,81,66]
},{“name”:“及格人数”,“type”:“bar”,“data”:[25,30,21,10,15,33]
}]

为颜色组件color增添新的颜色元素。

“color”:[“#3385ff”,“#ff5857”]

三、认识标题组件title：

主标题
（1）“text”：设置主标题文本。
（2）“show”：取值为逻辑值，设置主标题是否显示。
（3）“link”：设置主标题为一个可以单击的链接。
（4）“target”：设置主标题链接的打开方式。取值self、blank。
副标题
（1）“subtext”：设置副标题文本。
（2）“sublink”：设置副标题链接。
（3）“subtarget”：设置副标题链接打开方式。取值self、blank。
背景颜色： “backgroundColor”
边框
“borderColor”：设置边框颜色。
“borderWidth”：设置边框粗细
“broderRadius”：设置边框圆角。
填充
padding：设置填充内容与背景边框之间的距离。
设置标题组件存放的位置：
left、right、top、bottom。
textStyle，设置主标题的外观样式。subtextStyle，设置副标题的外观样式。
取值为键值对，键值对内部可以使用CSS中有关字体样式的属性来实现。
例：设置主标题的字体、字色、字号。

“textStyle”:{“fontFamily”:“Microsoft YaHei”,“fontSize”:18,“color”:“#888888”
}

四、实现可堆叠柱形图。

1、可堆叠柱形图：可以将多个数据系列的柱形图堆叠到一起，形成一个柱形图。
2、在每一个数据系列中设置：“stack”。
stack键取值相同的数据系列会进行堆叠。

五、交换坐标轴的图表展示：

1、默认情况下x轴是“类目轴”，y轴是“数值轴”。
2、将x轴变为“数值轴”：

“xAxis”:{“type”:“value”
},
“yAxis”:{“type”:“category”,“data”:["前端1班","前端2班","前端3班","前端4班","前端5班","前端6班"]
}

六、双Y轴数据图表的展示：

地中海气候全年十二个月的气温数据：（单位：℃）【数据范围：-70℃至30摄氏度】

option配置数据代码：

var option={"title":{"text":"地中海气候气温和降水量对比图","right":0,"bottom":0},"tooltip":{},"legend":{"data":["气温","降水量"]},"xAxis":{"data":["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],"axisLine":{"onZero":false}},"yAxis":[{"name":"气温/℃","min":-70,"max":30,"interval":14.28},{"name":"降水量/mm","min":0,"max":700,"interval":100}],"series":[{"name":"气温","type":"line","data":[4,7,10,15,20,24,28,27,22,20,15,8],"yAxisIndex":0},{"name":"降水量","type":"bar","data":[55,90,86,84,82,52,10,15,80,110,120,90],"yAxisIndex":1}],"color":["#ff5857","#3385ff"]
};

1、双Y轴图表中，yAxis组件的取值将变为数组。

yAxis:[{“name”:”气温/℃”, “min”:-70, “max”:30, “interval”:14.28
},{“name”:”降水量/mm”, “min”:0, “max”:700, “interval”:100
}]

（1）“name”：为每一个Y轴起一个名字，最终的名字会显示在图表Y轴的顶端。
（2）“min”：为Y轴设置起始的最小数值。
（3）“max”：为Y轴设置最终的最大数值。
（4）“interval”：为Y轴数据设置一个间隔大小。

2、设置类目轴（X轴）是否与Y轴的0点对齐。

xAxis:{axisLine:{onZero:false}
}

3、设置数据系列series组件中每一个数组系列对应的y轴。
yAxisIndex:y轴的索引值。

七、折线图：

1、在数据系列组件series中，将“type”改为“line”就是折线图。
2、在数据系列组件series中，添加 “smooth”:true，可以绘制圆滑的折线图。

八、饼形图：

1、将数据系列组件series中，将“type”改为“pie”就是饼形图。
2、饼形图不需要坐标轴。
3、饼形图无法向柱形图那样在一个类目上显示多组数据，所以可以不需要图例。
4、饼形图的数据系列书写格式：

“series”:[{“type”:“pie”,“radius”:[60,170],“center”:[“50%”,“50%”],“data”:[{“name”:“一月”,“value”:10},{“name”:“二月”,“value”:20},{“name”:“三月”,“value”:30}]
}]

5、当数据系列组件series中的radius属性取值为一个值时，pie表示饼形图。
当数据系列组件series中的radius属性取值为一个数组时，pie表示环形图。

6、数据系列组件series中的center属性取值为一个数组，用于设置饼形图圆心的位置。
center:[x,y] //x圆心的水平坐标，y圆心的垂直坐标
要想让饼形图位于容器的正中心：center:[“50%”,“50%”]
ECharts规定当取值为百分比时，需要带有%，并利用双引号引住。