本示例实现了以下功能：

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. HDU 5119 Happy Matt Friends（递推）

    http://acm.hdu.edu.cn/showproblem.php?pid=5119 题意:给出n个数和一个上限m,求从这n个数里取任意个数做异或运算,最后的结果不小于m有多少种取法. 思路: ...

  2. 初步：jenkins自动构建安卓Apk

    1:本地搭建jenkins 2:下载插件 3:配置相关信息(git,sdk等等) 3:拉取git仓库代码 4:编译执行 参考文章:http://www.cnblogs.com/reblue520/p/ ...

  3. 前端阶段_html部分2后台frame的初始构架案例

    1.<frameset cols="25%,75%">          把页面分为1:3,并且使用frame的同时应该删除body标签 2.<frame src ...

  4. How Many O's? UVA - 11038

    这个题个人感觉有点难,不容易理解. 题意 给你两个数,n,m,找出从n到m所有的数一共包含几个0,看似简单,包含0的不就都是整数么,然后就用暴力循环来找,绝对TL.我自己写这题也没有什么好的办法,没有 ...

  5. .NET Core 管道

    从用户发请求到服务器响应返回数据 请求从 Request进去    先经过 Middleware(中间件) 然后经过AuthoriationFilters授权验证(token验证和 多租户验证) 在经 ...

  6. 从flask视角理解angular（四）Route

    app-routing.modules.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } fro ...

  7. 安装Linux系统的磁盘分区

    ●CentOS磁盘分区 分区顺序: "/"分区(逻辑) -> "/boot"分区(主分区) -> "swap"分区(逻辑) -& ...

  8. Google Map 谷歌地图

    <script> var map; function initMap() { var position = new google.maps.LatLng(1.539187, 103.647 ...

  9. Python全栈开发-Day2-Python基础2

    本节内容 列表.元组操作 字符串操作 字典操作 集合操作 文件操作 字符编码与转码 1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 ...

  10. jenkins之从0到1利用Git和Ant插件打war包并自动部署到tomcat(第二话)：安装插件，配置JDK、Git、Ant

    jenkins之所以这么强大,离不开丰富的插件库. 要确保jenkins上安装好Git plugin.GitHub plugin.AntPlugin插件,一般在启动jenkins时默认安装的插件中就包 ...