echarts pie饼状图绑定点击事件
var valueData = [
{value: 33,name: '诊所'},
{value: 29,name: '汽车服务相关'},
{value: 27, name: '洗衣店'},
{value: 26,name: '中介机构'},
{value: 22,name: '汽车维修'}
];
var nameData = ['诊所', '汽车服务相关', '洗衣店', '中介机构', '汽车维修'];
var colorData = ['#A769EB', '#f69846', '#f6d54a', '#45dbf7', '#5AF6DE', '#89F6DC'];
let Option2 = {
backgroundColor: 'rgba(0,0,0,0)',
tooltip: {
trigger: 'item',
formatter: "{b} : {d}% <br/> {c}"
},
legend: {
// orient: 'vertical',
icon: 'circle',
bottom: 20,
x: 'center',
y: 'top',
data: nameData,
textStyle: {
color: '#fff'
}
//data: ['诊所', '汽车服务相关', '洗衣店', '中介机构', '汽车维修', '火车站', '人流指数', '日式简餐/快餐', 'ATM', '超市']
},
series: [{
type: 'pie',
// radius: ['20%', '40%'],
center: ['50%', '50%'],
left:70,
right:70,
color: colorData,
data: valueData,
labelLine: {
normal: {
show: true,
length: 20,
length2: 20,
lineStyle: {
color: '#fff',
width: 2
}
}
},
label: {
normal: {
formatter: '{c|{b}}\n{a|{d}}'+ '%',
rich: {
b: {
fontSize: 12,
color: '#12EABE',
align: 'left',
padding: 4
},
d: {
fontSize: 12,
align: 'left',
padding: 2
},
c: {
color: '#fff',
fontSize: 12,
align: 'left',
padding: 2
}
}
}
}
}]
}
var dom1 = document.getElementById("Box2");
var myChart1 = echarts.init(dom1);
let number = 0 //声明一个变量稍后接扇区的dataIndex
myChart1.on('click', function(param) { //添加点击事件
console.log(param );
myChart1.dispatchAction({ type: 'highlight', dataIndex: param.dataIndex }); //激活点击区域高亮
if (param.dataIndex !== number) { // 当鼠标点击的时候 消除上一个扇区的高亮
myChart1.dispatchAction({ type: 'downplay', dataIndex: number });
}
number = param.dataIndex //接住当前扇区的dataIndex
});
myChart1.setOption(Option2)
myChart1.dispatchAction({ type: 'highlight', dataIndex: 0 }); // 生成是默认第一条数据高亮
echarts pie饼状图绑定点击事件的更多相关文章
- vue中使用echarts画饼状图
echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...
- echarts中饼状图数据太多进行翻页
echarts饼状图数据太多 echarts 饼状图内容太多怎么处理 有些时候,我们饼状图中echarts的数据可能会很多. 这个时候展示肯定会密密麻麻的.导致显示很凌乱 我们需要'翻页'类似表格展示 ...
- Echarts生成饼状图、条形图以及线形图 JS封装
1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Cre ...
- 4.5Python数据处理篇之Matplotlib系列(五)---plt.pie()饼状图
目录 目录 前言 (一)简单的饼状图 (二)添加阴影和突出部分 (三)显示图例和数据标签: 目录 前言 饼状图需要导入的是: plt.pie(x, labels= ) (一)简单的饼状图 (1)说明: ...
- 图表echarts折线图,柱状图,饼状图
总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...
- js饼状图(带百分比)功能实现,新人必懂
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- [BOT]自己动手实现android 饼状图,PieGraphView,附源码解析
本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...
- C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计
在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...
- ECharts学习(2)--饼状图之南丁格尔图
1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...
随机推荐
- Solution -「BZOJ3894」文理分科
Sol. 说实话,对于一个初学者,这道题很难看出是一道网络流-最小割.对于一个熟练者,这是比较套路的一种模型. 最小割,可以看做是在一个图中删掉最小的边权和使得源点.汇点不连通.或者换一个角度,可以看 ...
- 【新人福利】使用CSDN 官方插件,赠永久免站内广告特权 >>电脑端访问:https://t.csdnimg.cn/PVqS
[新人福利]使用CSDN 官方插件,赠永久免站内广告特权 >>电脑端访问:CSDN开发助手 [新人福利]使用CSDN 官方插件,赠永久免站内广告特权 >>电脑端访问:https ...
- AI全流程开发难题破解之钥
摘要:通过对ModelArts.盘古大模型.ModelBox产品技术的解读,帮助开发者更好的了解AI开发生产线. 本文分享自华为云社区<[大厂内参]第16期:华为云AI开发生产线,破解AI全流程 ...
- 6.11 NOI 模拟
\(T1\)魔法师 \(f(x)\)是各个数位之积,当\(f(x)\ne 0\),每一位只能是\(1\sim 9\),考虑数位积的质因数分解只能是\(2,3,5,7\)的形式,考虑对所有的\((a,b ...
- 5.4 NOI模拟
\(5.4\ NOI\)模拟 \(T1\) 想到分讨,但是暴力输出一下方案之后有很多特别的情况要讨论,就弃了... 假设\(a\)是原序列,\(b\)是我们得到的序列 设\(i\)是最长公共前缀,\( ...
- Pulsar Summit Asia 2020 中文专场议题出炉!
关于 Apache Pulsar Apache Pulsar 是 Apache 软件基金会顶级项目,是下一代云原生分布式消息流平台,集消息.存储.轻量化函数式计算为一体,采用计算与存储分离架构设计,支 ...
- LuoguP1283 平板涂色(状压DP)
参考了I_AM_HelloWord的代码,\(f[i][j]\)表示转态\(i\)时最后一刷为\(j\)的最小代价,上面的块可用暴力填涂,注意边界 #include <cstdio> #i ...
- 深入理解Spring注解机制(一):注解的搜索与处理机制
前言 众所周知,spring 从 2.5 版本以后开始支持使用注解代替繁琐的 xml 配置,到了 springboot 更是全面拥抱了注解式配置.平时在使用的时候,点开一些常见的等注解,会发现往往在一 ...
- 使用three.js(webgl)搭建智慧楼宇、设备检测、数字孪生——第十三课
老子云:有道无术,术尚可求,有术无道,止于术. 咱开篇引用老子的话术,也没其它意思,只是最近学习中忽有感悟,索性就写了上来. 这句话用现代辩证思维理解,这里的"道" 大抵是指方法论 ...
- metasploit进行局域网远控
用metasploit进行局域网远程控制 Metasploit是一款开源的安全漏洞检测工具,可以帮助安全和IT专业人士识别安全性问题,验证漏洞的缓解措施,并管理专家驱动的安全性进行评估,提供真正的安全 ...