ECharts學習-柱狀圖
阿新 • • 發佈：2018-12-31
按照官方文件寫了一個柱狀圖的例子。
第一種方式使用網路js:
主要程式碼如下：
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單檔案引入 -->
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts圖表 在option內設定圖表的型別和相關引數：
tooltip:{
show:true
}設定是否顯示工具欄目
legend:{
data:["銷量"]
}設定表述資料和圖形的關聯 描述
xAxis:[{
type:'category',//預設為類目
data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}],
yAxis : [
{
type : 'value'//預設為值型別
}
]xAxis，yAxis分別為x軸和y軸的值和型別,x軸型別預設為‘category’和y軸型別預設為‘value’。
series : [
{
"name":"銷量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]series為資料系列，一個圖表可能包含多個系列，每一個系列可能包含多個數據，設定內容為工具條顯示的具體內容。
總體效果圖：
第二種方式使用本地js:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px;width: 400px"></div>
<!-- ECharts單檔案引入 -->
<script src="../Vendor/echarts/build/dist/echarts-all.js"></script>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts圖表
var myChart = echarts.init(document.getElementById("main"));
var option={
tooltip:{
show:true
},
legend:{
data:["銷量"]
},
xAxis:[{
type:'category',//預設為類目
data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}],
yAxis : [
{
type : 'value'//預設為值型別
}
],
series : [
{
"name":"銷量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 為echarts物件載入資料
myChart.setOption(option);
</script>
</body>
</html>