今天一個(gè)星期的努力，終于對(duì)于echar.js圖表有了深刻的形象，哎，以前覺(jué)得做一個(gè)圖表有多難，現(xiàn)在發(fā)現(xiàn)不是做圖有多難，而是圖的數(shù)據(jù)都弄不懂，根本做不出來(lái)。。。廢話(huà)不多說(shuō)了開(kāi)始講解。
我們先來(lái)看下我們要做的效果：
Paste_Image.png
是不是覺(jué)得這張圖，不好做呀，接下來(lái)我們一步一步的講解；
在官網(wǎng)，有一個(gè)最簡(jiǎn)單的案例，我們基于最簡(jiǎn)單的案例進(jìn)行開(kāi)發(fā)；做成我們上圖樣子；
代碼：
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/3.5.3/echarts.min.js"></script>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大?。▽捀撸┑?DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
這是我們需要寫(xiě)的html的基本代碼結(jié)構(gòu)；接下來(lái)我們寫(xiě)js
//獲取頁(yè)面節(jié)點(diǎn)，并進(jìn)行圖表初始化
var myChart = echarts.init(document.getElementById('main'));
// 接受數(shù)據(jù)的變量
var info =[
{
name: '農(nóng)村戶(hù)籍',
type: 'bar',//這個(gè)就是顯示，圖表是什么什么類(lèi)型的圖，‘bar'代表的就是柱狀圖
stack: '總量1', //這個(gè)是什么呢？如果上下兩個(gè)人名字一樣的柱狀圖就會(huì)重合起來(lái)。
data: []
},
{
name :'城鎮(zhèn)戶(hù)籍',
type :'bar',
stack: '總量1',//
data :[]
}
];
//定義橫坐標(biāo)（x軸顯示什么東西）
var cityName=[];
//接下來(lái)是一個(gè)圖表參數(shù)的變量
var option = {
color:['#5292CD','#9AD94C'], //定義柱狀圖的顏色
backgroundColor:'gray',//定義圖的北京顏色
title:{ //這個(gè)是控制標(biāo)題部分
text:'各區(qū)縣老人數(shù)量分布', 這
left: 'center'
},
tooltip: { //這個(gè)是用來(lái)控制鼠標(biāo)劃上去顯示什么內(nèi)容
trigger: 'axis',
axisPointer : { // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
type : 'shadow' // 默認(rèn)為直線(xiàn)，可選為：'line' | 'shadow'
}
},
legend: { //這個(gè)翻譯是傳奇的意思，這個(gè)主要和series里面的對(duì)應(yīng)使用
top:30,
left: 10,
data: ['農(nóng)村戶(hù)籍','城鎮(zhèn)戶(hù)籍']
},
xAxis:{//控制X軸
type:'category',
data:cityName,
axisTick: {
alignWithLabel:true
}
},
yAxis:{ //控制y軸
type:'value',
},
// 數(shù)據(jù)要想顯示全靠它了
series:info
};
$.ajax({
url: './data.json',
success: function(success){
var data = success.data;
data.forEach(function(v,i){
if(v.registerStats == '農(nóng)村戶(hù)籍'){
info[0].data.push(v.sCount);
cityName.push(v.cityName);
}else {
info[1].data.push(v.sCount);
}
})
myChart.setOption(option);
}
})
最后我們通過(guò)一個(gè)ajax,獲取到數(shù)據(jù)，然后把他們數(shù)據(jù)進(jìn)行解析，分別放到info，和cityName中；
接下來(lái)我要分析下數(shù)據(jù)data.js，
Paste_Image.png
由于這是公司的數(shù)據(jù)，所以不能公開(kāi)，所以只能讓大家看一下格式，然后得到數(shù)據(jù)后我們自己整理下數(shù)據(jù)就可以使用了
Paste_Image.png
整理方式如上圖；
這樣子我們就可以畫(huà)出圖了，具體的api還要參考官網(wǎng)文檔，我們就大概講解下其用法。
