echart.js 之 柱状图
2017-04-27 本文已影响68人
believedream
今天一个星期的努力，终于对于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还要参考官网文档，我们就大概讲解下其用法。
