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 ...
随机推荐
- 【抓包】【Charles】
Mac抓包神器-----Charles Charles 是一款Mac上的HTTP代理服务器.HTTP监视器.反向代理服务器,可以让开发者监视查看所有连接互联网的HTTP通信,包括请求,响应和HTTP头 ...
- java 四种线程池的异同
四种线程池的区别仅仅在于executors让threadpoolexecutor的构造器的参数不同,即核心线程池数,最大线程池数等不同.但是其他的,例如终止线程池等都是一样的
- fileInputStream.available()获取 文件的总大小
available():返回与之关联的文件的字节数 我们用inputStream.available()获取 文件的总大小
- web 前端知识体系 网站资源分析
一.比较全面的思维导图 二.相关资源 1. 布局框架:Bootstrap: http://getbootstrap.com/Foundation: http://foundation.zurb.com ...
- ArcFace 2.0 Demo [C++]
环境: win10(10.0.16299.0)+ VS2017 sdk版本:ArcFace v2.0 OPENCV3.43版本 x64平台Debug.Release配置都已通过编译 下载地址:http ...
- Inception网络
2018-12-09 19:39:38 一.1 * 1卷积 pooling可以对feature map的height,width进行修改,但是对通道数目无法修改. 1 * 1卷积可以在不改变图像大小的 ...
- echarts画中国地图并上色
任务是画一个中国地图,并在指定区域上颜色,学姐说用arcgis画,乖乖,4个g的安装文件,算了, 还是echarts大法好..如果想熟悉这个牛X的工具,请移步https://www.w3cschool ...
- spring: beanutils.copyproperties将一个对象的数据塞入到另一个对象中（合并对象）
spring: beanutils.copyproperties将一个对象的数据塞入到另一个对象中(合并对象) 它的出现原因: BeanUtils提供对Java反射和自省API的包装.其主要目的是利用 ...
- boke练习： freemarker对空变量报错 (classic_compatible设置true，解决报空错误)
我有一个变量: commentModel 默认只是为空, 在freemarker模板中使用<#if>判断是报错 <#if commentModel> ..... </#i ...
- mybatis ----> 各种方式使用MBG
1.maven方式使用 配置好.pom文件 ①src/main/resources下创建 generatorConfig.xml,并配置好(自动生成的配置文件骨架) ②src/main/java 下创 ...