用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容

Posted 猎八哥FLY

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用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用R语言进行相关性分析:画出散点图、拟合线及标注相关系数和P值

Plotly:将时间序列/烛台图与气泡/散点图相结合

matplotlib学习之散点图与条形图

如何用R画折线图,散点图,平滑曲线图

我要做一个散点图,用来拟合直线

echarts散点图怎么改涟漪纹的颜色