基本所有人接触数据可视化的第一步都是excel图表，不过基本也就止步于此。每天来来回回就柱状图、饼图，做的人不吐，看的人也快吐了。
今天就介绍一款数据可视化工具及其基本原理和使用方法。先看几张图感受下，重要的是这些图可以动，可以动的图表诶，看了很有感觉有没有。动态图表需要用html格式来实现，不会的话只能截图来用。不过样式繁多，截图也还是可以接受的。
image
image
这款工具叫ECharts，百度出品，网址：https://echarts.baidu.com/examples/index.html。同样还有另外一款简化版的叫百度图说，对于新手比较友好，不过支持的图表较少。
ECharts用的是基于Elasticsearch自有的查询语法DSL，和CSS有点像，如果你把它当做CSS来用也没多大问题。同时，还使用了JS，不过基本是导入JS文件来使用，不用了解太多，CV下去就是，除非ECharts上没有你想要的图表或效果（这个基本不存在，官方和社区的图表组合起来可以满足绝大多数的制表需求）。
建议上手前可以先看下官方的教程，接下去我也会以自己理解的来讲，可以根据哪种比较好理解看哪种（纯粹个人理解，理解错了轻喷）。没有基础的也没关系，知道里面的各类单词是什么意思，也可以在原有图表的基础上进行修改。
image.png
随便点一个图表进去，你会看到界面分为两个部分，左边为代码部分，右边为可视化图表。点击右下角的Download可以下载html格式，可以直接在浏览器中打开。
左侧的代码是包含在<script>标签内的，修改“：”后面的参数，图表会有相应的变化。下面就以上图为例， 解析其代码含义，代码是完整的html格式，具体看“//”和!-- 内的注释，建议在电脑端观看。
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0"> <!--定义容器高度及外边距-->
<div id="container" style="height: 100%"></div> <!--定义图表的高度，多个图表可用px等具体单位，要注意适配。此处ID的值为唯一，如果有多个图表，要设置不同的值。-->
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
<!--
上面几个 script 均为实现效果所需插入的文件，多个图表的话，仅需插入这5个即可，无需重复插入。
-->
<script type="text/javascript"> // 此处为实现效果所需，不同图表，具体内容不同。
var dom = document.getElementById("container"); //获取ID，此处（）内的值要和ID一致
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title: {//标题
text: '深圳月最低生活费组成（单位:元）',//标题文本
subtext: 'From ExcelHome',//子标题
sublink: 'http://e.weibo.com/1341556070/AjQH99che'//子标题关联的网址
},
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
formatter: function (params) {
var tar = params[1];
return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true//图表边距的开关，默认不修改
},
xAxis: {
type : 'category',//x轴的类型
splitLine: {show:false},
data : ['总费用','房租','水电费','交通费','伙食费','日用品数']//x轴的属性，此处可根据x轴的不同进行修改
},
yAxis: {
type : 'value'
},
series: [
{
name: '辅助',
type: 'bar', //类型为柱状图
stack: '总量',//一个大的类型，在如堆积图中，可锚定同一个类型来做堆积图
itemStyle: {
normal: {
barBorderColor: 'rgba(0,0,0,0)',//边框颜色及透明度
color: 'rgba(0,0,0,0)' //图表的颜色
},
emphasis: {
barBorderColor: 'rgba(0,0,0,0)',
color: 'rgba(0,0,0,0)'
}
},
data: [0, 1700, 1400, 1200, 300, 0] //空值，该表格比较特殊，因为各柱状y轴坐标不同，需要通过不同数值来确定高度。如第一个是总额2900，那高度就是0；第二个数值是1200，那其高度就是2900-1200=1700；第三个数值，因为高度剩余1700，而值是300，则高度就是1700-300=400，依此类推下去。
},
{
name: '生活费',
type: 'bar',
stack: '总量',
label: {
normal: {
show: true,
position: 'inside' //数值显示样式，inside显示在柱状内，outside显示在柱状外
}
},
data:[2900, 1200, 300, 200, 900, 300] //具体的值
}
]
};
;
if (option && typeof option === "object") {//必须有的
myChart.setOption(option, true);
}
</script>
</body>
</html>
其他的图表也是这样的流程，理解“：”前面单词的意思，修改“：”后面的属性。一个图表理解了，基本所有的图表都能理解，实在不能理解，建议先去试试百度图说。
网友评论