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

時間 2019-11-18

標籤 echartsjs 實現散點圖 table 表格雙向交互以及 echarts 取自數據自定義提示內容简体版

原文原文鏈接

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

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

需求一，實現echarts中全部的散點取自table中的數據。java

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

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

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

下圖是我作的小demo的簡單樣式圖（不要以爲簡單，其實能夠在這個基礎上增長許多的東西）。學習

首先咱們先引入echartsthis

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

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

篇幅有限，先在這裏放核心代碼（文章結尾我會所有的代碼）：code

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>