手動選擇數(shù)據(jù)進行展示即允許用戶在頁面上通過選項卡，下拉菜單，單選框，文本框等選擇目標對象，并且將該目標對象所對應的相關數(shù)據(jù)傳入圖表當中展示出來，最終實現(xiàn)數(shù)據(jù)交互的效果。
具體例子：分別從兩組下拉菜單中選擇省份和其對應的城市，當點擊確定按鈕時，下方圖表中將獲取該城市對應的數(shù)據(jù)并生成這兩個城市的PM2.5濃度變化折線圖。
開發(fā)工具：webstorm
可視化工具：echarts
語言：html，css，javascript，jquery庫
注意：本例僅涉及前端方面的知識，并不需要搭建后臺和數(shù)據(jù)庫。
步驟分析：
1、數(shù)據(jù)獲取。將獲取到的省份與城市數(shù)據(jù)存成對象數(shù)組的形式，并存在data.js中。（這里就不擺出具體數(shù)據(jù)了）

//省份數(shù)組
var provinces = [p1,p2,p3...pn];

//省份與對應城市對象數(shù)組
var cityMatch = [
{province:p1,city:[c1,c2,c3]},
{province:p2,city:[c4,c5,c6]},
{province:p3,city:[c7,c8,c9]},
...
]

//城市與對應數(shù)據(jù)對象數(shù)組
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庫文件！

//下拉菜單的實現(xiàn)
<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);
    });

    //按確認按鈕將數(shù)據(jù)傳入圖表中,并刷新圖表
    confirmButton.bind("click",function(){
        inputData(citys1,selectData1,selectNameAll);
        inputData(citys2,selectData2,selectNameAll);
        initChart();
    });


    //各個函數(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屬性的特殊性，圖表加載時便設定默認值，所以這里必須手動更改
        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這個牛逼的工具實現(xiàn)。要將數(shù)據(jù)部分換成自己用于存放數(shù)據(jù)的數(shù)組或變量（不能是定值，否則無法傳入或更改數(shù)據(jù)）。

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);

最終效果：