本示例实现了以下功能：

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. Seletct2

    doc 博客: 基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用 <div class="span4 channelSearch&qu ...

  2. 洛谷P1244 青蛙过河 DP/思路

    又是一道奇奇怪怪的DP(其实是思路题). 原文戳>>https://www.luogu.org/problem/show?pid=1244<< 这题的意思给的挺模糊,需要一定的 ...

  3. Ural 1297 Palindrome（后缀数组+最长回文子串）

    https://vjudge.net/problem/URAL-1297 题意: 求最长回文子串. 思路: 先将整个字符串反过来写在原字符串后面,中间需要用特殊字符隔开,那么只需要某两个后缀的最长公共 ...

  4. 2nd，Python基础2——02

    1 列表.元组操作 列表可以对数据实现最方便的存储.修改等操作 names = ['Jack', 'Leon','Eric'] 通过下表访问列表中的元素,下标从0开始计数 names = ['Jack ...

  5. （总结）CentOS 6.x使用yum快速安装Apache+PHP+Tomcat(JSP)+MySQL

    (总结)CentOS 6.x使用yum快速安装Apache+PHP+Tomcat(JSP)+MySQL PS:这个是懒人yum快速安装法,用于开发和测试环境很方便,用于没有特殊要求的生产环境也可以.特 ...

  6. ajax 怎么重新加载页面

    $.ajax({ type:"post", url:url, data:{xxx:xx}, dataType: "json", success : functi ...

  7. python的json模块的dumps，loads，dump，load方法介绍

    dumps和loads方法都在内存中转换, dump和load的方法会多一个步骤,dump是把序列化后的字符串写到一个文件中,而load是从一个文件中读取字符串 将列表转为字符串 >>&g ...

  8. java.io.FileNotFoundException异常,一是“拒绝访问”，二是“系统找不到指定路径”

    关于java.io.FileNotFoundException异常 因为这个异常抛出俩种情况:一是“拒绝访问”,二是“系统找不到指定路径” 这里只讲明什么时候抛拒绝访问,什么时候抛找不到指定路径. 原 ...

  9. Transactional cannot be resolved to a type

    SpringBoot整合Mybatis时遇到“ Transactional cannot be resolved to a type ” ,以为是没有导入相应的包 “ import org.sprin ...

  10. zlib交叉编译

    下载 zlib-1.2.9.tar.gz wget http://www.zlib.net/fossils/zlib-1.2.9.tar.gz 解压文件 tar -zxvf zlib-1.2.9.ta ...