ECharts饼状图添加事件
和柱状图添加事件没有区别，详情如下：
<!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>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="bar" style="width: 600px;height:400px;"></div> <div id="pie" style="width: 600px;height:400px;"></div> </body>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myBarChart = echarts.init(document.getElementById('bar'));
var n1 = Math.floor(Math.random()*500+1);
var n2 = Math.floor(Math.random()*500+1);
var n3 = Math.floor(Math.random()*500+1);
var n4 = Math.floor(Math.random()*500+1);
var n5 = Math.floor(Math.random()*500+1);
var n6 = Math.floor(Math.random()*500+1);
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {
triggerEvent:true},
legend: {
data:['销量',"趋势"]
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
triggerEvent:true, //可以点击x轴坐标,
axisTick: {
alignWithLabel: true //坐标值是否在刻度中间
}
},
yAxis: {
type: 'value',
splitArea: {
show: true
},
//百分比显示Y轴
axisLabel: {
show: true,
interval: 'auto'
},
show: true,
triggerEvent:true //可以点击y轴坐标
},
series: [{
name: '销量',
type: 'bar',
data: [n1, n2, n3, n4, n5, n6],
itemStyle: {
normal: {
label: {
show: true,
position: 'top'
}
}
}
},{
name: '趋势',
type: 'line',
data: [n1, n2, n3, n4, n5, n6],
smooth:false, //是否为曲线,默认为false
itemStyle:{
normal:{
lineStyle:{
width:1, // 虚线的宽度
type:'dotted' //'dotted'虚线 'solid'实线
}
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myBarChart.setOption(option);
//方法1：https://zhuanlan.zhihu.com/p/33050579
// var ids = [55,66,85,86,55,544,5,6,8,4,88,89];
//这样就可以获取到点击柱子或者文本标签对应的id了
// myBarChart.on('click', function (params) {
// if(params.componentType =="xAxis"){
// alert("单击了"+params.value+"x轴标签, 你点击的是第"+(Number(params.event.target.anid.split("_")[1])+1)+"个X标签；当前对应的id为："+ids[params.event.target.anid.split("_")[1]]);
// }else{
// alert("单击了"+params.name+"柱状图, 你点击的是第"+(params.dataIndex+1)+"个柱状图；当前对应的id为："+ids[params.dataIndex]); //数组下标是从0开始的哦，图也是从0开始的
// }
// });
//方法二：https://blog.csdn.net/sophia_xiaoma/article/details/78055947
myBarChart.on('click', function (params) {
// 当componentType == "xAxis"或者 ==“yAxisx”时，取被点击时坐标轴的值params.value
alert("单击了"+params.componentType+"x轴标签"+params.value);
if(params.componentType == "xAxis"){
alert("单击了"+params.value+"x轴标签"+params.name);
}else{
alert("单击了"+params.name+"柱状图"+params.value);
}
});
//方法三：http://www.jb51.net/article/125820.htm
// myBarChart.on("click", barConsole);
// function barConsole(param) {
// // 获取data长度
// // alert(option.series[0].data.length);
// // 获取地N个data的值
// alert(option.series[0].data[i]);
// // 获取series中param.dataIndex事件对应的值
// // alert(option.series[param.seriesIndex].data[param.dataIndex]);
// // alert(param.value); //与上一行等价
// // 获取xAxis当前点击事件索引对应的值，可以用作传参了
// // alert(option.xAxis.data[param.dataIndex]);
// //param.dataIndex 获取当前点击索引，
// // alert(param.dataIndex);
// // 当前点击事件位于series中的索引
// // alert(param.seriesIndex);
// // clickFunc(param.dataIndex);//执行点击效果
// //param具体包含的参数见 https://blog.csdn.net/allenjay11/article/details/76033232 // //刷新页面
// // location.reload();
// // window.location.reload();
// refresh(); // } //方法四：饼图添加事件示例 https://www.cnblogs.com/zhzhair-coding/p/6953982.html?utm_source=itdadao&utm_medium=referral
</script> <script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myPieChart = echarts.init(document.getElementById('pie'));
var n1 = Math.floor(Math.random()*500+1);
var n2 = Math.floor(Math.random()*500+1);
var n3 = Math.floor(Math.random()*500+1);
var n4 = Math.floor(Math.random()*500+1);
var n5 = Math.floor(Math.random()*500+1);
// 指定图表的配置项和数据
var option = {
"legend":{
"orient":"vertical",
"left":"left"
},
"series":[
{
"data":[
{
"name":"直接访问",
"value":n1
},
{
"name":"邮件营销",
"value":n2
},
{
"name":"联盟广告",
"value":n3
},
{
"name":"视频广告",
"value":n4
},
{
"name":"搜索引擎",
"value":n5
}
],
"center":[
"50%",
"60%"
],
"name":"访问来源",
"itemStyle":{
"normal":{
"label":{
"formatter":"{b}\n{c}\n{d}%",
"show":true
}
},
"emphasis":{
"shadowOffsetX":0,
"shadowBlur":10,
"shadowColor":"rgba(0, 0, 0, 0.5)"
}
},
"radius":"55%",
"type":"pie"
}
],
"tooltip":{
"formatter":"{a} <br/>{b} : {c} ({d}%)",
"trigger":"item"
},
"title":{
"subtext":"纯属虚构",
"x":"center",
"text":"某站点用户访问来源"
}
};
// 使用刚指定的配置项和数据显示图表。
myPieChart.setOption(option); myPieChart.on("click", pieConsole);
//方法三：http://www.jb51.net/article/125820.htm
function pieConsole(param) {
// 获取data长度
alert(option.series[0].data.length);
// 获取地N个data的值
// alert(option.series[0].data[i]);
// 获取series中param.dataIndex事件对应的值
alert(param.value);
alert(param.name);
alert(option.series[param.seriesIndex].data[param.dataIndex].value);
alert(option.series[param.seriesIndex].data[param.dataIndex].name);
// clickFunc(param.dataIndex);//执行点击效果,触发相应js函数
//param具体包含的方法见 https://blog.csdn.net/allenjay11/article/details/76033232 //刷新页面
// location.reload();
// window.location.reload();
}
</script> <!--每5秒自动刷新页面-->
<script type="text/javascript">
function refresh(){
// 刷新页面
// location.reload();
window.location.reload();
}; // setInterval(refresh, 5000);//5秒钟执行一次
</script>
</html>
ECharts饼状图添加事件的更多相关文章
- ECharts 报表事件联动系列二：柱状图，饼状图添加事件
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- canvas图表详解系列（3）：动态饼状图（原生Js仿echarts饼状图）
本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...
- Echarts 饼状图自定义颜色
今天给饼状图着色问题,找了好久 终于找到了 话不多说直接上代码 $.ajax({ url: "/HuanBaoYunTai/ajax/HuanBaoYunTaiService.ashx&qu ...
- jquery echarts 饼状图
var myChart = echarts.init(document.getElementById('myChart')); option = { title : { text: '某站点用户访问来 ...
- echarts 饼状图调节 label和labelLine的位置
原理 使用一个默认颜色为透明的,并且只显示labelLine的饼状图 然后通过调节这个透明的饼状图 以达到修改labelLine的位置 echarts地址 https://gallery.echart ...
- vue+element+echarts饼状图+可折叠列表
html: <div id="echartsDiv" style="width: 48%; height: 430px; float: left;"> ...
- echarts 饼状图 改变折线长度
$(function (){ //ups部分 var myChart = echarts.init(document.getElementById('result')) var option = { ...
- echarts 饼状图
说明:这是我做项目时自己写的小例子,里面有冗余的参数. 开发环境 vs2012 asp.net mvc4 c# 1.显示效果 2.HTML代码 <%@ Page Language=" ...
- Echarts饼状图
<head> <meta charset="utf-8"> <title>ECharts</title> <script sr ...
随机推荐
- 51nod 1052 最大M子段和
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1052 题意: 思路:设$dp[i][j]$表示前j个数构成i个字段时的最 ...
- mybatis(错误一) 项目启动时报“Result Maps collection already contains value forxxx”的解决方案
Result Maps collection already contains value for xyx.dsw.dao.mapper.admin.quotationwish.TempTestTab ...
- 【BZOJ】3576: [Hnoi2014]江南乐
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=3576 很显然,这是一个multi-nim游戏. 注意:1.一个点的SG值就是一个不等于它的 ...
- Oracle简单语句查询
语法3-1:简单查询语句语法 SELECT [DISTINCT] * |列名称[AS][列别名],列名称[AS][列别名],...FROM 表名称[表别名]; 在整个简单查询之中,主要有两个子句完成: ...
- vscode所用插件
- Eclispe中编辑xml配置文件时不会提示也不能自动调整格式
创建了一个xml文件后,发现编辑起来和原来的那些有所不同,不会提示补全.也不能自动调整格式???woc? 哈哈哈哈哈,“我最恨你像个石头一样” 后来发现是编辑器被改了!!! 右键xml文件然后open ...
- Inception Network
1. 下图为一个Inception 模块,即将输入的图像通过多种过滤器或者池化操作后,全部再给拼起来形成新的图像. 2. Inception 网络就是讲将多个Inception模块连起来而已,如下图的 ...
- C++中的清屏函数
system("cls") 执行控制台命令cls,功能是清屏,清楚所有屏幕显示信息
- lambda表达式底层处理机制
为了支持函数式编程,Java 8引入了Lambda表达式,那么在Java 8中到底是如何实现Lambda表达式的呢? Lambda表达式经过编译之后,到底会生成什么东西呢? 在没有深入分析前,让我们先 ...
- 在未排序的数组中找到第 k 个最大的元素
在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 k = 2 输出: 5 ...