本示例实现了以下功能：

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. idea 常用设置初始化

    1.idea中mybatis关联到mapper.xml文件 2.idea热部署设置 3.IDEA Properties中文unicode转码问题

  2. HDU 5236 Article（概率DP）

    http://acm.hdu.edu.cn/showproblem.php?pid=5236 题意:现在有人要在文本编辑器中输入n个字符,然而这个编辑器有点问题. 在i+0.1s(i>=0)的时 ...

  3. Newtonsoft.Json 去掉\r\n

    itemKindList.ToString(Newtonsoft.Json.Formatting.None)

  4. Perl关联数组用法集锦

    本文和大家重点讨论一下Perl关联数组的概念,创建Perl关联数组,从数组变量复制到Perl关联数组,元素的增删,用Perl关联数组循环等内容,相信通过本文的学习你对Perl关联数组的用法一定会有深刻 ...

  5. 初步接触ES6

    Babel---ES6转码器 ES6 声明变量的六种方法 ES5 只有两种声明变量的方法:var命令和function命令. ES6除了添加let和const命令,另外两种声明变量的方法:import ...

  6. hiho #1196 : 高斯消元·二

    #1196 : 高斯消元·二 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 在上一回中,小Hi和小Ho趁着便利店打折,买了一大堆零食.当他们结账后,看到便利店门口还有其 ...

  7. Easy Graphics Engine vs2015使用

    vs2017: 下载 https://pan.baidu.com/s/1qWxAgeK 里面的 “ege19.01_vs2017 (推荐, 修正win10 1809 上无法正常运行的问题).zip”  ...

  8. 学习笔记3—matlab中load特殊用法

    1.在matlab中 ,infro.mat中存有很多子矩阵(比如:mean_FA.mat, mean_e1.mat和 mean_e2.mat),调出某一个矩阵时,命令行为:load([path,'\' ...

  9. 原生ajax的请求封装get和post

    一个完整的AJAX请求包括五个步骤: 1.创建XMLHTTPRequest对象 2.使用open方法创建http请求,并设置请求地址 3.设置发送的数据,开始和服务器端交互 4.注册事件 5.获取响应 ...

  10. js常见知识点3.面向对象之继承、设计模式

    一.面向对象的三大特征 建议回复: 封装:屏蔽内部细节.调用外部接口实现对应功能(函数调用) 继承:子类继承父类中的属性和方法 多态(js中不存在多态的概念) 二.继承 建议回复: 继承:子类继承父类 ...