百度图表 ECharts

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

1. 到ECharts的官网下载ECharts组件
2. 将下载的ECharts组件加载到项目的HTML文档中
3. 在HTML文档中设置一个盛放图表的容器：<div id=”tu”></div> //自行在CSS中为#tu设置CSS样式
4. 在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：图表的工具提示组件。

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

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

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

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

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

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

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

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

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

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

三、认识标题组件title：

1. 主标题
   （1）“text”：设置主标题文本。
   （2）“show”：取值为逻辑值，设置主标题是否显示。
   （3）“link”：设置主标题为一个可以单击的链接。
   （4）“target”：设置主标题链接的打开方式。取值self、blank。
2. 副标题
   （1）“subtext”：设置副标题文本。
   （2）“sublink”：设置副标题链接。
   （3）“subtarget”：设置副标题链接打开方式。取值self、blank。
3. 背景颜色： “backgroundColor”
4. 边框
   “borderColor”：设置边框颜色。
   “borderWidth”：设置边框粗细
   “broderRadius”：设置边框圆角。
5. 填充
   padding：设置填充内容与背景边框之间的距离。
6. 设置标题组件存放的位置：
   left、right、top、bottom。
7. 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规定当取值为百分比时，需要带有%，并利用双引号引住。