本示例实现了以下功能:

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中不存在多态的概念) 二.继承 建议回复: 继承:子类继承父类 ...