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. 結果顯示以下

相關文章
相關標籤/搜索