1.使用ECharts簡單實現直方圖
- 爲Echarts準備一個具有大小(寬高)的DOM
<div id="main" style="width:900px;height: 600px;"></div>
- 初始化ECharts實例(echarts.init())
//基於準備好的dom,初始化echarts實例
var myChart = echarts.init(document.getElementById("main"));
- setOption用指定數據繪圖
myChart.setOption(option);
- Option對象
- 標題:title
- 圖例:legend
- X軸:xAxis
- 數據: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]
}],
};
- 畫圖結果查看

2.使用ECharts實現折線圖
- 方法與直方圖相似,只須要將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]
}]
- 結果顯示以下
