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

最新推荐文章于 2024-07-01 10:49:56 发布
最新推荐文章于 2024-07-01 10:49:56 发布
阅读量813 收藏 2
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/liebagefly/p/7961734.html
版权

本人研究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>
View Code

如果你觉得写的不错请点赞，欢迎与我交流学习，谢谢！

转载请表明原出处：http://www.cnblogs.com/liebagefly/p/7961734.html 谢谢！

 

转载于:https://www.cnblogs.com/liebagefly/p/7961734.html

weixin_33984032
关注
Echarts实现图形报表
04-26
java+mysql实现图形报表，附带数据库代码。用servlet实现
JAVA SWT Table SWTChart Jdbc 数据 表格 散点图 界面
03-19
在本文中，我们将深入探讨如何使用Java编程语言，结合Eclipse SWT库，SWTChart组件以及JDBC技术，来创建一个跨平台且安全的应用程序，该程序能够在同一个界面上同时展示散点图和数据表格。这有助于数据分析和可视化...
echarts带table表格展示
Z_Gleng的博客
02-20 4043
整体思路就是用graphic这个属性去画线 表格里的值用的定位写的。
echarts实现表格图例
Vevean2545116309的博客
02-21 1807
饼图的表格图例 Pie实现表格图例，点击某行，图表显示除这条之外剩下的数据（会有多条被选中的情况）
将Echarts的数据视图展示为table并且导出Excel
huanhuan03的博客
12-23 8841
Echarts官网示例，用过Echarts的小伙伴都知道，它带有自己很多原生功能，比如简单举例： 想要详细了解可以去官网看配置项，今天主要说一下图中蓝色框的‘数据视图’这个功能，如下是官网上这个功能按钮所展示的数据视图： 现在项目有需求，就是客户既要看到这个折线图，又要看到数据展示，当然这个已经实现展示了，只不过没有样式，要求是整齐的table表格，而且还能导出这个table。 当然方式很多，...
ECharts的多表联动
2301_81685623的博客
04-15 1049
当需要展示的数据比较多时，放在一个图表进行展示的效果不佳，此时，可以考虑使用两个图表进行联动展示。ECharts提供了多图表联动的功能(connect)，联动的多个图表可以共享组件事件并实现保存图片时的自动拼接。(1)分别设置每个ECharts对象为相同的group值,并通过在调用ECharts对象的connect方法时，传入group值，从而使用多个ECharts对象建立联动关系。(2)直接调用ECharts 的connect方法,参数为一个由多个需要联动的ECharts 对象组成的数组。
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
10-20
描述部分解释了文章的主要内容，即通过实例分析的方式，向读者介绍使用echarts插件绘制简单折线图的操作步骤和实现技巧，并且提供了源码下载链接，供需要的读者参考使用。这为想要学习和应用echarts图表库的开发者...
ECharts前台后台数据交互Demo
11-26
ECharts是一款由百度开源的、基于JavaScript的数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，能够帮助开发者在网页上实现复杂的数据展示。本教程将深入讲解如何通过AJAX技术实现ECharts...
appendData异步加载大数据量分片加载数据和增量渲染的解决方案
10-12
"appendData异步加载大数据量分片加载数据和增量渲染的解决方案"是Echarts为优化性能提供的一种高效策略，尤其适用于展示百万级甚至千万级的数据集。本文将深入探讨这一高级进阶技巧。 首先，我们来理解"appendData...
多种echart图转表格
qq_63431773的博客
05-16 1123
项目中提到了一个需求，想要看到echarts图表中的数据，这里使用toolbox工具栏渲染出一个table表格，并加入导出excel功能。所以就用到echarts配置项中的toolbox工具栏，使用 jquery.table2excel.js实现 导出excel功能。首先引入jquery.js，再次引入 jquery.table2excel.js。
报表工具ECharts
09-29
提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。
echart数据视图以table表格展示
xiao_yu_1的博客
01-15 8170
import { barDataView } from "./echartsdata.js";//引入方法 const workorderType = echarts.init(this.$refs.workorder) var option = { xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"], },..
多表格Echarts绘制
Sage_WZF的博客
04-22 662
生成多表格Echarts图 1.多表格需求 需求定义，当你需要在页面上一次性画出多个echarts图表，而且一个表格两侧都需要展示Y坐标，亦或者在曲线上展示多个曲线都可以实现 此例子是基于VUE实现的。 实现效果图 数据格式 代码 initEchart(data) { this.yAixData = []; this.echartSeries = []; //图表定位
echarts x轴下绘制表格
最新发布
st646889325的博客
07-01 475
把下面代码复制到官网实例的js代码编辑中即可预览。
前端开发实习（二） 表单数据和地图联动效果的实现
孙霸天的专栏
07-20 1116
上一次我实现了表单数据的模糊查询，紧接着公司老总又有新的指示给我，要求我在table界面上实现表单数据和地图的联动跳转，也就是在table数据中加入onclick事件，当用户点击某行数据时跳转到map的特定点位置。 听到上司的要求我有些紧张，因为我对该地图API的使用还没有一个概念，不确定用什么方法可行，不过我一个新手总不能老是怕东怕西，那我就没必要去学开发了，不会就是干！！！ 先过一遍思路：...
ECharts制作报表模板
热门推荐
一直在奋起，一直在路上
10-20 2万+
最近公司的问题汇总平台差不多接近尾声，回顾前段时间领导任命做的报表真是别有一番成长波折；在这之前以为问题汇总平台就差不多完结了，结果原来压轴的在后面呢，报表的设计涵盖了本平台80%的核心内容，既然这么重要就更得放上十足的精神干了O(∩_∩)O~
Echarts简单的多表联动效果和添加水印和按钮切换数据效果
weixin_68473774的博客
04-14 1340
多表联动效果指的是在多个表格之间建立一种交互关系，以便它们之间的操作或选择能够相互影响。当在一个表格中选择或操作某些数据时，另一个表格会根据这些选择或操作自动更新显示相关的数据。例如，如果在一个表格中选择了某个地区的销售数据，另一个表格会显示该地区的详细销售信息。当在一个表格中进行视觉操作（如缩放、平移等）时，另一个表格会以相同的方式进行相应的视觉变化。这种方式可以在多个表格之间保持一致的视觉效果，从而提供更好的用户体验。
ECharts 图表嵌入表格样式的demo
rainyspring4540的专栏
01-31 834
【代码】ECharts 图表嵌入表格样式的demo。
如何绘制一个echarts带表格的图表
m0_50478723的博客
08-31 2478
echarts带表格
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值