本示例实现了以下功能：

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. 33 Python 详解命令解析 - argparse--更加详细--转载

    https://blog.csdn.net/lis_12/article/details/54618868 Python 详解命令行解析 - argparse Python 详解命令行解析 - arg ...

  2. CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）

    转载自:http://blog.csdn.net/u014175572/article/details/51535768 CSS3的transform:scale()可以实现按比例放大或者缩小功能. ...

  3. sublime3 mac : Package Control There are no packages available for installation

    如下问题: 查看控制台:点击 ctrl+`打开控制台 发现是因为http://packagecontrol.io/channel_v3.json 获取失败,手动下载channel_v3.json文件, ...

  4. idea中svn的使用教程

    引言:以下是idea集成小乌龟后的svn使用教程,一张图足以说明问题,后续如果遇到了比较复杂一点的问题再来补充. 参考文档:https://blog.csdn.net/liuhailiuhai12/a ...

  5. 能改变this各种情况下的总结，还有没有总结到的，请留言！！

    1.. 在函数参数中的,回调函数的this ,指向window 如: promise中的回调函数, 可以在方法外,转存this 2..构造函数中,this指向,实例对象  , 在全局中this是win ...

  6. C语言中的多线程编程

    很久很久以前,我对C语言的了解并不是很多,我最早听说多线程编程是用Java,其实C语言也有多线程编程,而且更为简单.方便.强大.下面就让我们简单领略一下Unix C语言环境下的多线程编程吧! 下面先看 ...

  7. "不是内部或外部命令"

    问题描述: 使用cmd 运行某个路径下(一般是C:PROGRAM FILES\...或者E:\program files\....或者D:\program files\......下面的某个)的exe ...

  8. Cordova插件：InAppBrowser

    版权声明:本文为博主原创文章,转载请注明出处 一.应用场景 我们在做cordova app开发的时候,可能会经常遇到这种需求.比如在你的app中,你想打开一个URL,但是又不想跳转到系统的浏览器去打开 ...

  9. Golang socket

    1.本例子实现了一个简单的TCP echo.客户端发送Hello,服务端回应World. 参考:<Socket编程> 2.服务端代码 package main import ( " ...

  10. ionic日历插件

       1:引入插件的两个文件 timePicker.js 和timePicker.css文件    2:填加插件模块到项目模块中CorderYuan->app.js的moudule    3:在 ...