手动选择数据进行展示即允许用户在页面上通过选项卡，下拉菜单，单选框，文本框等选择目标对象，并且将该目标对象所对应的相关数据传入图表当中展示出来，最终实现数据交互的效果。
具体例子：分别从两组下拉菜单中选择省份和其对应的城市，当点击确定按钮时，下方图表中将获取该城市对应的数据并生成这两个城市的PM2.5浓度变化折线图。
开发工具：webstorm
可视化工具：echarts
语言：html，css，javascript，jquery库
注意：本例仅涉及前端方面的知识，并不需要搭建后台和数据库。
步骤分析：
1、数据获取。将获取到的省份与城市数据存成对象数组的形式，并存在data.js中。（这里就不摆出具体数据了）
//省份数组
var provinces = [p1,p2,p3...pn];
//省份与对应城市对象数组
var cityMatch = [
{province:p1,city:[c1,c2,c3]},
{province:p2,city:[c4,c5,c6]},
{province:p3,city:[c7,c8,c9]},
...
]
//城市与对应数据对象数组
var cityData = [
{city:c1,data:[d1,d2,d3]},
{city:c2,data:[d4,d5,d6]},
{city:c3,data:[d7,d8,d9]},
...
]
2、构建基本页面与布局，分别建立index.html和style.css文件。记得引入jquery和echarts库文件！
//下拉菜单的实现
<select>
<option>city1</option>
<option>city2</option>
<option>city3</option>
...
</select>
//引入两个库
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/echarts.min.js"></script>
3、编写主要逻辑，并存于文件script.js文件中。
var selectCity,selectProvince,selectData1=[],selectData2=[],selectNameAll=[];
var provinces1 = $("#provinces1");
var provinces2 = $("#provinces2");
var citys1 = $("#citys1");
var citys2 = $("#citys2");
var confirmButton = $("#confirm-button");
$(function(){
//将省份添加到#provinces下拉菜单中
appendProvinces(provinces1);
appendProvinces(provinces2);
// 匹配省份对应的城市，并添加到#citys下拉菜单中
provinces1.change(function(){
appendCitys(provinces1,citys1);
});
provinces2.change(function(){
appendCitys(provinces2,citys2);
});
//按确认按钮将数据传入图表中,并刷新图表
confirmButton.bind("click",function(){
inputData(citys1,selectData1,selectNameAll);
inputData(citys2,selectData2,selectNameAll);
initChart();
});
//各个函数定义如下：
//添加省份
function appendProvinces(provinces){
for (var i=0; i<province.length; i++){
$("<option>" + province[i] +"</option>").appendTo(provinces);
}
}
//添加城市
function appendCitys(provinces,citys){
selectProvince = provinces.find("option:selected").text();
citys.empty();
for (var i=0; i<cityMatch.length; i++){
if(cityMatch[i].province == selectProvince){
for(var j=0; j<cityMatch[i].city.length; j++){
$("<option>" + cityMatch[i].city[j] +"</option>").appendTo(citys);
}
}
}
}
//传入数据
function inputData(citys,selectData,selectName) {
//先将上一次选择的残余数据清空
selectData.length = 0;
selectCity = citys.find("option:selected").text();
for (var i = 0; i < cityData.length; i++) {
if (cityData[i].city == selectCity) {
for (var j = 0; j < cityData[i].data.length; j++) {
selectData.push(cityData[i].data[j]);
}
selectName.push(cityData[i].city);
break;
}
}
}
//刷新图表
function initChart(){
//由于option.series.name属性的特殊性，图表加载时便设定默认值，所以这里必须手动更改
option.series[0].name = selectNameAll[0];
option.series[1].name = selectNameAll[1];
myChart = echarts.init(document.getElementById('chart-container'));
myChart.setOption(option);
//最后将selectNameAll数组清空，等待下次数据传入
selectNameAll.length = 0;
}
});
4、图表的使用，并存于chart.js文件中。利用echarts这个牛逼的工具实现。要将数据部分换成自己用于存放数据的数组或变量（不能是定值，否则无法传入或更改数据）。
var myChart = echarts.init(document.getElementById('chart-container'));
option = {
title: {
text: '城市PM2.5变化'
//subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:selectNameAll
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [d1,d2,d3...dn]
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value}μg/m3'
}
},
series: [
{
name:selectNameAll[0],
type:'line',
data:selectData1,
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
},
{
name:selectNameAll[1],
type:'line',
data:selectData2,
markLine: {
data: [
{type: 'average', name: '平均值'}
]
}
}
]
};
myChart.setOption(option);
最终效果：
网友评论