Echarts簡單使用

1.使用ECharts簡單實現直方圖

1. 爲Echarts準備一個具有大小（寬高）的DOM

<div id="main" style="width:900px;height: 600px;"></div>

1. 初始化ECharts實例（echarts.init()）

//基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById("main"));

1. setOption用指定數據繪圖

myChart.setOption(option);

1. Option對象
   1. 標題：title
   2. 圖例：legend
   3. X軸：xAxis
   4. 數據：series ( name，type和data) 1.工具箱：toolbox

//指定圖表的配置項和數據
			var option = {
				title:{
					text:'Echarts 入門示例'
				},
				toolbox:{
					show:true,
					feature:{
						//顯示保存爲圖片
						saveAsImage:{
							show:true
						}
					}
				},
				//圖例
				legend:{
					data:["銷量"]
				},
				//X軸
				xAxis:{
					data:["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
				},
				//y軸
				yAxis:{},
				//數據
				series:[{
					name:"銷量",
					type:'bar',
					data:[5,20,44,10,10,20]
				}],
			};

1. 畫圖結果查看

2.使用ECharts實現折線圖

1. 方法與直方圖相似，只須要將type='bar'改成type='line'

series:[{
					name:"銷量",
					type:"bar",
					data:[5,20,44,10,10,20]
				},{
					name:"產量",
					type:"line",
					data:[7,30,24,10,10,20]
				}]

1. 結果顯示以下