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 ...
随机推荐
- Linux下 网卡测速
参考: How do I verify the speed of my NIC? Linux下 网卡测速 命令: $ sudo ethtool eth0 Settings for eth0: Supp ...
- 在GeoServer里设置图层的默认自定义样式，出现不显示预览图的情况（不起作用）
在GeoServer里设置图层的默认自定义样式 点击"Layers-->world:country"图层,点击"Publishing"标签,在下面的&qu ...
- 使用R语言的RTCGA包获取TCGA数据--转载
转载生信技能树 https://mp.weixin.qq.com/s/JB_329LCWqo5dY6MLawfEA TCGA数据源 - R包RTCGA的简单介绍 - 首先安装及加载包 - 指定任意基因 ...
- BioConda--转载
1. Conda安装 如BioConda官网[1]所说,BioConda需要Conda安装环境,如果你使用过Anaconda python安装环境,那么你已经有了Conda安装环境,否则,最好的办法是 ...
- linux 校准时间方法
Debian.Ubuntu 系统安装NTP校时包: apt-get install ntpdate CentOS系统安装NTP校时包: yum install ntp 校时 ...
- 【五】php 面向对象
面向对象 概念:按类进行分类,类是表示彼此之间可能互不相同,但是具有一些共同点的对象集合 多态性:不同的类对同一操作可以有不同的行为 继承:允许我们使用子类在类之间创建层次关系 类 关键字:class ...
- Jmeter 老司机带你一小时学会Jmeter
Jmeter的安装 官网下载地址:http://jmeter.apache.org/download_jmeter.cgi 作为Java应用,是需要JDK环境的,因此需要下载安装JAVA,并且作必 ...
- MySQL基本使用
来自李兴华视频. 1. 启动命令行方式 2. 连接mysql数据库,其中“-u”标记的是输入用户名,“-p”标记的是输入密码. 3. 建立一个新数据库——mldn,使用UTF-8编码: create ...
- django自定制Admin
如果只是在admin中简单的展示及管理模型,那么在admin.py模块中使用admin.site.register将模型注册一下就好了: from django.contrib import admi ...
- Vue项目中如何使用Element-UI以及如何使用sass
Vue项目中如何使用Element-UI以及如何使用sass 当我们在开发Vue项目的时候通常会选择Element-UI作为我们的UI框架,其官方中文文档地址是http://element.eleme ...