1. 程式人生 > >讀書筆記四

讀書筆記四

HA .com readonly olt .get legend main 畫圖 document

用echart畫圖:

首先,要先導入echart的jar包,下載地址如下:http://echarts.baidu.com/,然後放入自己的項目中,做一個簡單的圖的代碼如下:

放在body中的代碼:

<div id="main2" style="width: 400px;height:400px;float:left"></div>

然後便是js中的代碼:

var myChart = echarts.init(document.getElementById(‘main2‘));


// 指定圖表的配置項和數據
option2 = {
title : {
text: ‘行業註冊數量‘,

},
tooltip : {
trigger: ‘axis‘
},
legend: {
data:[‘數量‘]
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: [‘line‘, ‘bar‘]},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : ‘category‘,
data : ["2016","207","2018"],
}
],
yAxis : [
{
type : ‘value‘
}
],
series : [
{
name:‘數量‘,
type:‘bar‘,
data:[1,2,3,],
markPoint : {
data : [
{type : ‘max‘, name: ‘最大值‘},
{type : ‘min‘, name: ‘最小值‘}
]
},
markLine : {
data : [
{type : ‘average‘, name: ‘平均值‘}
]
}
}

]
};

// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option2);

以上便是所有的js代碼,當然,前提是要導入下載的echart.js包,還有值得註意的是,必須將js放在body下邊,因為在網頁執行的時候會按照順序來執行,如果放在body上邊就會找不到。

讀書筆記四