本示例实现了以下功能：

1.点击刷新按钮，仅刷新柱状图，而不是整个页面

2.点击柱状内容刷新柱状图，并更新title

3.点击X轴，Y轴更新title，并弹出alert。

源码代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>ECharts</title>

    <!-- <script src="http://echarts.baidu.com/dist/echarts.min.js"></script>  -->

    <script src="https://cdn.bootcss.com/echarts/4.0.2/echarts.js"></script>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    您选择了X轴的标签[<span id="xAxisTag"></span>],他的值为[<span id="barValue"></span>]

    <input type="submit" name="" value="刷新" onclick="refresh()">

    <div id="main" style="width: 600px;height:400px;"></div>

</body>

<script type="text/javascript">

  function getSeriesData(){

      //根据js方法本身的加载顺序，此方法需要定义在myChart前面

      //此处可以通过后台生成数据，这样后台就无需返回整个option，只需要返回动态的数据部分即可

      // $.ajax({

      //     type: 'GET',

      //     url: "getSeriesData",

      //     cache: false,

      //     async : false,

      //     dataType: 'json',

      //     success: function (result) {

      //         seriesdata = result;

      //     },

      //     error: function (result, XMLHttpRequest, textStatus, errorThrown) {

      //         // 状态码

      //         // console.log(XMLHttpRequest.status);

      //         // console.log(XMLHttpRequest.toLocaleString());

      //         // 状态

      //         // console.log(XMLHttpRequest.readyState);

      //         // 错误信息

      //         // console.log(textStatus);

      //     }

      // });

        var n1 = Math.floor(Math.random()*50+1);

        var n2 = Math.floor(Math.random()*50+1);

        var n3 = Math.floor(Math.random()*50+1);

        var n4 = Math.floor(Math.random()*50+1);

        var n5 = Math.floor(Math.random()*50+1);

        var n6 = Math.floor(Math.random()*50+1);

        seriesdata = [n1, n2, n3, n4, n5, n6];

      return seriesdata;

  }  

  function getxAxisData(){

    //同样适用以ajax的方式从后台获取数据

    xAxisData = ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"];

    return xAxisData;

  }

  function getSaleOption(){

      saleOption = {

            title: {

                text: 'ECharts 入门示例'

            },

            tooltip: {},

            legend: {

                data:['销量']

            },

            xAxis: {

                // data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],

                data : getxAxisData(),

                triggerEvent:true,

                axisTick: {

                    alignWithLabel: true //坐标值是否在刻度中间

                }

            },

            yAxis: {triggerEvent:true},

            series: {

                name: '销量',

                type: 'bar',

                //data: [n1, n2, n3, n4, n5, n6],

                // data : seriesdata,

                data : getSeriesData(),

                itemStyle: {

                    normal: {

                        color: function(params) {

          　　　　　　      var colorList = ['#2eddc1','#FCCE10','#E87C25','#277bbb','#E87fff','#277aaa'];

                            //若返回的list长度不足，不足部分自动显示为最后一个颜色

          　　　　　　        return colorList[params.dataIndex]

         　　　　　　       },

                        label: {

                            show: true,

                            position: 'top'

                        }

                    }

                }

            }

        };

        return saleOption;

  }

</script>

<script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = getSaleOption();

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

        myChart.on('click', function (params) {

            //param具体包含的参数见 https://blog.csdn.net/allenjay11/article/details/76033232

            updatePage(params);

            if (params.componentType == "series"){

                refresh();

            }

        });

    </script>

<script type="text/javascript">

  function updatePage(params){

    //点击内容区域

    if (params.componentType == "series"){

        tag = option.xAxis.data[params.dataIndex];

        value = params.value;

        var xAxisTag = $("#xAxisTag");

        xAxisTag.html(tag);

        var barValue = $("#barValue");

        barValue.html(value);

    }

    //点击X轴

    if (params.componentType == "xAxis"){

        tag = params.value;

        value = "";

        var xAxisTag = $("#xAxisTag");

        xAxisTag.html(tag);

        var barValue = $("#barValue");

        barValue.html(value);

        alert("单击了"+params.value+",X轴标签");

    }

    //点击Y轴

    if (params.componentType == "yAxis"){

        tag = null;

        value = params.value;

        var xAxisTag = $("#xAxisTag");

        xAxisTag.html(tag);

        var barValue = $("#barValue");

        barValue.html(value);

        alert("单击了"+params.value+",Y轴标签");

    }

  };

  function refresh(){             

      //局部刷新series内容

      //此处没有用常用的刷新div等方法，而是直接改变了option的值，然后重新赋值给myChart

      //简化方法，调用getSeriesData更新数据。

      option.series.data = getSeriesData();

      myChart.setOption(option);

  };     

</script>

</html>

显示效果如下：

ECharts 报表事件联动系列一：刷新页面的更多相关文章

  1. ECharts 报表事件联动系列三：柱状图，饼状图实现联动

    源码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  2. ECharts 报表事件联动系列二：柱状图，饼状图添加事件

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  3. ECharts 报表事件联动系列四：柱状图，折线图，饼状图实现联动

    代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...

  4. AngularJS路由系列(2)--刷新、查看路由,路由事件和URL格式，获取路由参数，路由的Resolve

    本系列探寻AngularJS的路由机制,在WebStorm下开发.主要包括: ● 刷新路由● 查看当前路由以及所有路由● 路由触发事件● 获取路由参数 ● 路由的resolve属性● 路由URL格式 ...

  5. Asp:Button控件onclick事件无刷新页面提示消息

    <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptMana ...

  6. vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面

    3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...

  7. 表单中设置了 `keyup.enter.native` 的按键事件，但是回车后没有执行查询，反而会刷新页面

    场景 添加属性对话框中,input输入后点击 enter,不会执行绑定的 handleDialogQuery 事件,反而会刷新整个页面: 如果不点击 enter,点击搜索按钮,则是正常的. 又测试:在 ...

  8. asp.net onclientclick事件刷新页面问题解决

      做网页经常要和JavaScript打交道,经常要用JavaScript做一些客户端的验证,但是如果我们的按钮用的是HTML控件的话,验证通过后无法调用后台代码,如果用服务器端控件,验证不通过有要刷 ...

  9. 26.VUE学习之--提交表单不刷新页面,事件修饰符之使用$event与prevent修复符操作表单

    提交表单不刷新页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

随机推荐

  1. vscode "没有活动的源代码控制提供程序" 解决办法

    确保安装git F1,输入Show built-in Extensions, 左侧列表中找Git,然后启用即可

  2. awk详解2

    7.控制语句 if(condition) {statments} 单分支语句 if(condition) {statments} else {statements}组合语句 while(condito ...

  3. 【OJ】 : 容斥原理计算出 1< =n < 1e9 中是2,3,5倍数的整数的数量

    最近ACM时遇到个题,题意如下. 问题描述: 有个1到n的数列,数一下其中能够被 2, 的时候有 ,,,,.这5个数满足条件,所以我们应该输出 5 . 输入 多组输入到文件尾,每组输入一个 n (n ...

  4. URAL 1004 Sightseeing Trip（floyd求最小环+路径输出）

    https://vjudge.net/problem/URAL-1004 题意:求路径最小的环(至少三个点),并且输出路径. 思路: 一开始INF开大了...无限wa,原来相加时会爆int... 路径 ...

  5. Linux下清空或删除大文件内容的2种方法

    在Linux终端下处理文件时,有时候我们想要直接清空文件的内容时但又不用使用任何Linux命令行编辑器,去打开这些文件.那如何才能达到这个目的呢? 1.通过重定向到NULL来清空文件内容 清空或者让一 ...

  6. https申请部署

    此案例用IIS8.0演示 前提条件: 1.HTTPS协议需要443端口,安全组和防火墙开放443端口. 2.需要SSL证书 开放端口就不说了,主要说下申请SSL证书. 1.https://www.ss ...

  7. GZip对字符串压缩和解压

    /// <summary> /// 压缩 /// </summary> /// <param name="value">需要压缩字符串</ ...

  8. SQL Server DATEADD() 函数及实际项目应用注意事项

    1. DATEADD() 函数的解释和语法分析 DATEADD() 函数在日期中添加或减去指定的时间间隔. 语法: DATEADD(datepart,number,date) date 参数是合法的日 ...

  9. WSL(Windows Subsystem for Linux) 适用于Linux的Windows子系统

    打开 Microsoft Store , 搜索 Linux .选择 Ubuntu , 仔细看介绍,尤其是安装前的说明 ========================================= ...

  10. 数据库 Mysql 使用，优化，索引

    数据库事务的隔离级别,由低到高 : READ UNCOMMITTED(读未提交数据):允许事务读取未被其他事务提交的变更数据,会出现脏读.不可重复读和幻读问题. READ COMMITTED(读已提交 ...