用echartsjs 實現散點圖與table表格雙向交互，以及實現echarts取自於table數據，和自定義echarts提示內容

本人研究echarts已經有一段時間了，今天就分享幾個關於echarts的小技巧。雖然看起來簡單，但做起來卻很繁瑣，不過實用性倒是很好。

在一個大的頁面中，左邊為table表格，右邊為echarts的散點圖。

需求一，實現echarts中所有的散點取自table中的數據。

需求二：兩個交互，交互1，點擊左邊的table中數據時，先實現table重新隔行變色，然后左邊被點擊的數據背景顏色變黃，右邊的散點圖點亮。通過table控制散點圖。

交互2：當點擊散點圖中任意數據時，獲取此數據來自於左邊散點圖的位置，並控制頁面滾動到指定位置（本例數據較少，這個方法的作用感覺不明顯，但當有大量數據時，這個方法會很有用），先對table進行重新隔行變色，然后左邊的table會先重構，接着右邊被點擊的散點圖點亮。通過散點圖來控制table表格。

需求三：自定義echarts提示內容。

下圖是我做的小demo的簡單樣式圖（不要覺得簡單，其實可以在這個基礎上增加許多的東西）。

首先我們先引入echarts

<script type="text/javascript" src="js/echarts.js" ></script>

我們先來實現第一個需求。思路：我們通過遍歷將table中的數據全部獲取，並存入一個數組中，再在series中使用這個數組。

篇幅有限，先在這里放核心代碼（文章結尾我會全部的代碼）：

function gainData() {//將table中的數據賦給information
                var td = info.getElementsByTagName("td");
                for(var i = 0;i<td.length - 1;i++,i++){
                    var x = td[i].innerText*1; // x軸
                    var y = td[i+1].innerText*1;// y軸
                    information.push([// 獲取所有散點數據
                        x,
                        y
                    ]);
                }
            }



 series: [{
     name: '銷量',
     type: 'scatter',
     data: information,
 },

擴展：當table的數據是動態改變時，其實這里可以給table加上MutationObserver方法，在不刷新頁面的情況可以確保散點圖與它完全一致，我們這里考慮的是table數據是不改變情況。

實現兩個交互：當點擊左邊table時，先重新加載一次隔行變色（將原先的點擊記錄清除掉），然后再將被點擊的行變色，獲取被點擊的數據，將此數據存入chose數組中，重新加載echarts散點圖（被點亮的值為chose中的值）。

核心代碼：

    function trclick() {//點擊table事件，下方的順序不要錯，還有一定要使用this方法
                for (var i = 1; i < tr.length; i++) {
                    tr[i].onclick = function clicktr() {
                        interleavecolor();
                        //重新加載一次隔行變色
                        this.style.background = "#FFFF00";
                        //被點擊的變為黃色
                        var td = this.getElementsByTagName("td");
                        chosex  = td[0].innerText*1;//獲取點擊的數據
                        chosey  = td[1].innerText*1;
                        operationEcharts();    //重新運行Echarts        
                    }
                }    
            }

　　 name: 'CHOSE',
    type: 'effectScatter',
    coordinateSystem: 'cartesian2d',
    data: choseData(),//重新加載echarts時獲取chose數組中需要標亮的x、y軸的值，新的數據會標亮

    //標亮數據存入chose中
               function choseData(){
                   var chose = [];
                   if(null==chosex||null==chosey){
                       chosex = 1;//這是一開始默認的標亮數據
                       chosey = 100;
                   }
                   chose.push([chosex,chosey]);//將獲取的值存入chose數組中
                   return chose;
               }

交互2：交互2與交互1有兩點不同，1，多了一個滾動事件，控制頁面滾動到我們可以看到的table指定位置，2，標亮數據來源不同，交互二中點擊echarts時，將點擊的數據存入chose數組中。

點擊echarts的代碼：

     //如果點擊echarts圖
              myChart.on('click', function (params) {
                if(params.componentType == 'series') {
                    for (var k = 1; k < tr.length; k++) {    
                        var tablex = String(tr[k].children[0].innerHTML); // 表格中的x軸
                        var tabley = String(tr[k].children[1].innerHTML); // 表格中的y軸
                        var chartx = String(params.data[0]);// 散點中的x軸
                        var charty = String(params.data[1]);// 散點中的y軸
                        if(tablex ==  chartx && tabley == charty) {
                            interleavecolor();
                            // 控制頁面滾動到指定位置
                            tr[k].scrollIntoView();
                            tr[k].style.background = "#FFFF00";
//                            對應行變為黃色
                            chosex  = params.data[0];
                            chosey  = params.data[1];
                            operationEcharts();//重新加載echarts視圖
                            trclick();    
                            break;
                        }
                    } 
                }                
            });

需求三：一般情況下，當我們鼠標移動到數據上時，echarts的原生方法的數據是沒有名稱，也沒有單位的，會給我們造成許多的不便，我們想看到單位和名稱就要對formatter的方法進行重寫。我們先來看看重新前后的區別。

你會發現重寫formatter方法前，數據顯示2和300（你會發現根本不知道顯示了什么），而重寫之后我增加了日期和產量等名稱。是不是高大上了一些。而這個2，300是什么數據呢。我們可以通過console.log（）這個方法打印出來所有的內容，我們對內容進行拼接，就可以展示任何自己想展示的內容。看下圖。

 tooltip: {
                                padding: 10,
                                backgroundColor: '#222',
                                borderColor: '#777',
                                borderWidth: 1,
                                formatter: function (param) {
//                                    return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
//                                        + 'table與ECharts交互模式'                                    
//                                        + '</div>'
//                                        + '日期：' + param.data[0]
//                                        + "<div></div>"
//                                        + '產量：' + param.data[1];
                                     console.log(param);
                                }
                    }

完整的代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/echarts.js" ></script>
        <title></title>
    </head>
    <body>
        <div id="information"style="width: 400px;float: left;">
            <table border="1">
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>產量</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>100</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>300</td>
                    </tr>
                    
                    <tr>
                        <td>3</td>
                        <td>700</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>800</td>
                    </tr>
                    
                    <tr>
                        <td>5</td>
                        <td>700</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>200</td>
                    </tr>
                </tbody>
                </table>
        </div>
        <div id="main"style="width: 600px;height:400px;float: left;">
            cccc
        </div>
        <script type="text/javascript">
            var information = [];        // 數據的源頭，取自於表格
            var info = document.getElementById("information");
            var table = info.getElementsByTagName("table");
            var tr = table[0].getElementsByTagName("tr");
            var myChart = echarts.init(document.getElementById('main'));
            var chosex,chosey;//被選擇的x、y
            //初始化echarts實例  information
            gainData();//獲取數據源
            operationEcharts();//運行echarts
            trclick();//點擊table的數據時右邊進行標亮
            interleavecolor();//隔行變色
            function gainData() {//將table中的數據賦給information
                var td = info.getElementsByTagName("td");
                for(var i = 0;i<td.length - 1;i++,i++){
                    var x = td[i].innerText*1; // x軸
                    var y = td[i+1].innerText*1;// y軸
                    information.push([// 獲取所有散點數據
                        x,
                        y
                    ]);
                }
            }
           //畫echarts
               function operationEcharts(){
                var option = {
                    title: {
                        text: 'table與ECharts交互模式'
                    },
                    tooltip: {
                                padding: 10,
                                backgroundColor: '#222',
                                borderColor: '#777',
                                borderWidth: 1,
                                formatter: function (param) {
//                                    return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
//                                        + 'table與ECharts交互模式'                                    
//                                        + '</div>'
//                                        + '日期：' + param.data[0]
//                                        + "<div></div>"
//                                        + '產量：' + param.data[1];
                                     console.log(param);
                                }
                    },
                    legend: {
                       
                    },
                    xAxis: {
                        splitLine: {show: false},
                        axisLine: {
                            lineStyle : {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'red' // 0% 處的顏色
                                    }, {
                                        offset: 1, color: 'blue' // 100% 處的顏色
                                    }],
                                    globalCoord: false // 缺省為 false
                                },
                                    width: 2,
                            }
                        },
                    },
                    yAxis: {
                        splitLine: {show: true},
                    },
                    series: [{
                        name: '銷量',
                        type: 'scatter',
                        data: information,
                    },
                    {
                            name: 'CHOSE',
                            type: 'effectScatter',
                            coordinateSystem: 'cartesian2d',
                            data: choseData(),
                            symbolSize: 12,
                            showEffectOn: 'render',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            hoverAnimation: true,
                            itemStyle: {
                                normal: {
                                    shadowBlur: 10,
                                    shadowColor: 'rgba(25, 100, 150, 0.5)',
                                    shadowOffsetY: 5,
                                    color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                                        offset: 0,
                                        color: '#FF4500'
                                    }, {
                                        offset: 1,
                                        color: '#FFFF00'
                                    }])
                                }
                            },
                            zlevel: 1,
                            label: {
                                emphasis: {
                                    show: true,
                                    formatter: function (param) {
                                        return param.data[2];
                                    },
                                    position: 'top',    
                                    textStyle: {
                                        color : '#FF4500'
                                    }                                
                                }
                            }
                        }
                    ]
               };
                myChart.setOption(option);
               }
               //標亮數據
               function choseData(){
                   var chose = [];
                   if(null==chosex||null==chosey){
                       chosex = 1;
                       chosey = 100;
                   }
                   chose.push([chosex,chosey]);
                   return chose;
               }
               function trclick() {
                for (var i = 1; i < tr.length; i++) {
                    tr[i].onclick = function clicktr() {
                        interleavecolor();
                        //重新加載一次隔行變色
                        this.style.background = "#FFFF00";
                        //被點擊的變為黃色
                        var td = this.getElementsByTagName("td");
                        chosex  = td[0].innerText*1;
                        chosey  = td[1].innerText*1;
                        operationEcharts();    //重新運行Echarts        
                    }
                }    
            }
               //隔行變色
               function interleavecolor(){
                   for (j = 1; j < tr.length; j++) {
                       if(0 != j%2){
                           tr[j].style.background = "#F0FFF0";
                       }else{
                           tr[j].style.background = "#FFFAFA";
                       }
                }
               }
               //如果點擊echarts圖
              myChart.on('click', function (params) {
                if(params.componentType == 'series') {
                    for (var k = 1; k < tr.length; k++) {    
                        var tablex = String(tr[k].children[0].innerHTML); // 表格中的x軸
                        var tabley = String(tr[k].children[1].innerHTML); // 表格中的y軸
                        var chartx = String(params.data[0]);// 散點中的x軸
                        var charty = String(params.data[1]);// 散點中的y軸
                        if(tablex ==  chartx && tabley == charty) {
                            interleavecolor();
                            // 控制頁面滾動到指定位置
                            tr[k].scrollIntoView();
                            tr[k].style.background = "#FFFF00";
//                            對應行變為黃色
                            chosex  = params.data[0];
                            chosey  = params.data[1];
                            operationEcharts();//重新加載echarts視圖
                            trclick();    
                            break;
                        }
                    } 
                }                
            });
            </script>
    </body>
</html>

如果你覺得寫的不錯請點贊，歡迎與我交流學習，謝謝！

轉載請表明原出處：http://www.cnblogs.com/liebagefly/p/7961734.html 謝謝！