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