手動(dòng)選擇數(shù)據(jù)進(jìn)行展示即允許用戶在頁(yè)面上通過(guò)選項(xiàng)卡腊敲，下拉菜單击喂，單選框，文本框等選擇目標(biāo)對(duì)象碰辅，并且將該目標(biāo)對(duì)象所對(duì)應(yīng)的相關(guān)數(shù)據(jù)傳入圖表當(dāng)中展示出來(lái)懂昂，最終實(shí)現(xiàn)數(shù)據(jù)交互的效果。
具體例子：分別從兩組下拉菜單中選擇省份和其對(duì)應(yīng)的城市没宾，當(dāng)點(diǎn)擊確定按鈕時(shí)凌彬，下方圖表中將獲取該城市對(duì)應(yīng)的數(shù)據(jù)并生成這兩個(gè)城市的PM2.5濃度變化折線圖。
開(kāi)發(fā)工具：webstorm
可視化工具：echarts
語(yǔ)言：html循衰，css铲敛，javascript，jquery庫(kù)
注意：本例僅涉及前端方面的知識(shí)会钝，并不需要搭建后臺(tái)和數(shù)據(jù)庫(kù)伐蒋。
步驟分析：
1、數(shù)據(jù)獲取。將獲取到的省份與城市數(shù)據(jù)存成對(duì)象數(shù)組的形式先鱼，并存在data.js中徒蟆。（這里就不擺出具體數(shù)據(jù)了）
//省份數(shù)組
var provinces = [p1,p2,p3...pn];
//省份與對(duì)應(yīng)城市對(duì)象數(shù)組
var cityMatch = [
{province:p1,city:[c1,c2,c3]},
{province:p2,city:[c4,c5,c6]},
{province:p3,city:[c7,c8,c9]},
...
]
//城市與對(duì)應(yīng)數(shù)據(jù)對(duì)象數(shù)組
var cityData = [
{city:c1,data:[d1,d2,d3]},
{city:c2,data:[d4,d5,d6]},
{city:c3,data:[d7,d8,d9]},
...
]
2、構(gòu)建基本頁(yè)面與布局型型，分別建立index.html和style.css文件。記得引入jquery和echarts庫(kù)文件全蝶！
//下拉菜單的實(shí)現(xiàn)
<select>
<option>city1</option>
<option>city2</option>
<option>city3</option>
...
</select>
//引入兩個(gè)庫(kù)
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/echarts.min.js"></script>
3闹蒜、編寫(xiě)主要邏輯，并存于文件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);
// 匹配省份對(duì)應(yīng)的城市绷落，并添加到#citys下拉菜單中
provinces1.change(function(){
appendCitys(provinces1,citys1);
});
provinces2.change(function(){
appendCitys(provinces2,citys2);
});
//按確認(rèn)按鈕將數(shù)據(jù)傳入圖表中,并刷新圖表
confirmButton.bind("click",function(){
inputData(citys1,selectData1,selectNameAll);
inputData(citys2,selectData2,selectNameAll);
initChart();
});
//各個(gè)函數(shù)定義如下：
//添加省份
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);
}
}
}
}
//傳入數(shù)據(jù)
function inputData(citys,selectData,selectName) {
//先將上一次選擇的殘余數(shù)據(jù)清空
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屬性的特殊性，圖表加載時(shí)便設(shè)定默認(rèn)值始苇，所以這里必須手動(dòng)更改
option.series[0].name = selectNameAll[0];
option.series[1].name = selectNameAll[1];
myChart = echarts.init(document.getElementById('chart-container'));
myChart.setOption(option);
//最后將selectNameAll數(shù)組清空砌烁，等待下次數(shù)據(jù)傳入
selectNameAll.length = 0;
}
});
4、圖表的使用催式，并存于chart.js文件中函喉。利用echarts這個(gè)牛逼的工具實(shí)現(xiàn)。要將數(shù)據(jù)部分換成自己用于存放數(shù)據(jù)的數(shù)組或變量（不能是定值荣月，否則無(wú)法傳入或更改數(shù)據(jù)）管呵。
var myChart = echarts.init(document.getElementById('chart-container'));
option = {
title: {
text: '城市PM2.5變化'
//subtext: '純屬虛構(gòu)'
},
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);
最終效果：
