一、Echarts的简单使用
先到echarts官网，查看“文档”——“教程”，有详细说明，步骤就是：获取echarts库——引入echarts——画图。这里咱们讲一下后两步。
引入echarts
使用script标签引入echarts.js文件
然后需要一个div，设置id和width、height。如果不设置宽和高，图片有可能不正常显示。
<body>
<div id="main" style="width: 600px;height:400px;"></div>
</body>
画图
通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法配置图形
具体代码如下：
<script type="text/javascript">
// 基于准备好的div，初始化echarts实例，填充到id为main的元素
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// setOption，使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
二、Highcharts的简单使用
我之所以又使用了highcharts是因为，echarts不提供地图数据了，只能使用highcharts。
一般的统计图可直接下载官网的demo对应的html、css、js，所以这里会重点说一下地图可视化的问题。
中国地图
https://www.hcharts.cn/mapdata
由于地图数据比较难找，highcharts直接提供了模板，不过不能用于商业目的。可以查看上面这个网站，来使用地图数据可视化。
除了地图数据，其它的应用比较简单，但是会涉及图表的自定义，那么就会涉及图表配置，比如标题、坐标轴、图例、提示栏等等，具体可以查看官网的文档。
https://www.hcharts.cn/docs
类似的，echarts也有对应的文档：
http://echarts.baidu.com/option.html#title
三、Tab效果的实现
简单
这个项目中需要实现一个Tab切换内容的效果，这里我使用了最简单的办法，就是使用了iframe。
Tab可以分为两大部分：Tab选项卡和显示界面
显示界面
就是在一个div里面放置多个iframe，但是除了第一个iframe的display属性设置为block（显示），其余的均设置为none（隐藏）。
Tab选项卡
使用ul标签和li标签来实现，当然这只是满足界面要求，那么怎么切换显示界面的内容呢？
可以在每个li标签加一个a标签，不进行跳转，而且在每个a标签加入一个事件。以下面我的代码为例，加入了open自定义事件。
<body >
<div class="tab">
<div class="box">
<div class="right">
<div class="scroll">
<div class="tab_right" id="dis1">
<iframe align="center" width="100%" height="100%" src="map.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="yes">
</iframe>
</div>
<div class="tab_right" id="dis2" style="display:none;">
<iframe align="center" width="100%" height="100%" src="bar.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no">
</iframe>
</div>
<div class="tab_right" id="dis3" style="display:none;">
<iframe align="center" width="100%" height="100%" src="pyramid.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no">
</iframe>
</div>
<div class="tab_right" id="dis4" style="display:none;">
<iframe align="center" width="100%" height="100%" src="pie.html" frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no">
</iframe>
</div>
</div>
</div>
<ul id="menu" class="menus">
<li><a href="#" onclick="opens(1)"><image src="../img/map.png" width="220px" height="180px"></image></a> </li>
<li><a href="#" onclick="opens(2)"><image src="../img/bar.png" width="220px" height="180px"></image></a> </li>
<li><a href="#" onclick="opens(3)"><image src="../img/pyramid.png" width="220px" height="180px"></image></a> </li>
<li><a href="#" onclick="opens(4)"><image src="../img/pie.png" width="220px" height="180px"></image></a> </li>
</ul>
</div>
</div>
<script>
function opens(obj){
for(var i = 1;i<=4;i++){
if(i == obj){document.getElementById("dis"+i).style.display="block"
}else
document.getElementById("dis"+i).style.display="none"
}
}
</script>
</body>
改进
但是这么做，会遇到一个问题，如果很多个Tab标签，就意味着要载入很多iframe，这会很耗时，所以还可以改为只有一个ifame，自定义的事件不再是改变display属性，而是改变src属性，把src改成你想要显示的html文件。