一、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文件。