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饼状图绑定点击事件的更多相关文章

  1. vue中使用echarts画饼状图

    echarts的中文文档地址:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EC ...

  2. echarts中饼状图数据太多进行翻页

    echarts饼状图数据太多 echarts 饼状图内容太多怎么处理 有些时候,我们饼状图中echarts的数据可能会很多. 这个时候展示肯定会密密麻麻的.导致显示很凌乱 我们需要'翻页'类似表格展示 ...

  3. Echarts生成饼状图、条形图以及线形图 JS封装

    1.在我们开发程序中,经常会用到生成一些报表,比方说饼状图,条形图,折线图等.不多说了,直接上封装好的代码,如下Echarts.js所示 以下代码是封装在Echarts.js文件中 /** * Cre ...

  4. 4.5Python数据处理篇之Matplotlib系列(五)---plt.pie()饼状图

    目录 目录 前言 (一)简单的饼状图 (二)添加阴影和突出部分 (三)显示图例和数据标签: 目录 前言 饼状图需要导入的是: plt.pie(x, labels= ) (一)简单的饼状图 (1)说明: ...

  5. 图表echarts折线图,柱状图,饼状图

    总体就是有折线图相关图标的设置,x,y轴的设置,x,y轴或者数据加上单位的设置.饼状图如何默认显示几个数据中的某个数据 折线图:legend(小标题)中间默认是圆圈 改变成直线 在legend设置的时 ...

  6. js饼状图(带百分比)功能实现,新人必懂

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. [BOT]自己动手实现android 饼状图,PieGraphView,附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...

  8. C#+JQuery+.Ashx+百度Echarts实现全国省市地图和饼状图动态数据图形报表的统计

    在目前的一个项目中,需要用到报表表现数据,这些数据有多个维度,需要同时表现出来,同时可能会有大量数据呈现的需求,经过几轮挑选,最终选择了百度的echarts作为报表基础类库.echarts功能强大,界 ...

  9. ECharts学习(2)--饼状图之南丁格尔图

    1.上一篇中讲了如何绘制一个简单的柱状图,这次要画的是饼图,饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比,它的数据格式比柱状图更简单,只有一维的数值,不需要给类目.因为不在直角坐标系上,所 ...

随机推荐

  1. 通过jmeter压测surging

    前言 surging是异构微服务引擎,提供了模块化RPC请求通道,引擎在RPC服务治理基础之上还提供了各种协议,并且还提供了stage组件,以便针对于网关的访问, 相对于功能,可能大家更想知道能承受多 ...

  2. 编程技巧│超实用 nginx 中常见的配置合集

    目录 封禁 IP 仅开放内网 负载均衡 列出文件列表 路由转发 开启 gzip 压缩 解决跨域 资源防盗链 Keepalived 提高吞吐量 HTTP 强制跳转 HTTPS 封禁 IP 通过 deny ...

  3. JavaScript数组方法总结及手写

    目录 手写数组衍生方法 1.检测是否为数组 2.类数组转化为数组 3.数组扁平化 4.数组去重 5.数组使用Math.max 手写数组内置方法 1. Array.prototype.filter 2. ...

  4. 如何在 pyqt 中实现桌面歌词

    前言 酷狗.网抑云和 QQ 音乐都有桌面歌词功能,这篇博客也将使用 pyqt 实现桌面歌词功能,效果如下图所示: 代码实现 桌面歌词部件 LyricWidget 在 paintEvent 中绘制歌词. ...

  5. iframe 标签

    iframe是一个内联框架,可以在当前HTML页面中嵌入另一个文档,一般情况下使用iframe直接在页面嵌套iframe标签再指定src就可以了. iframe 的常用属性: name : 规定 &l ...

  6. P1980 计数问题 - 记录

    P1980 计数问题 题目描述 试计算在区间 1 到 n的所有整数中,数字x(0 ≤ x ≤ 9)共出现了多少次?例如,在 1到11中,即在 1,2,3,4,5,6,7,8,9,10,11中,数字1出 ...

  7. 自己做一个RTOS

    什么是操作系统?其实就是一个程序, 这个程序可以控制计算机的所有资源,对资源进行分配,包括CPU时间,内存,IO端口等,按一定规则分配给所需要的进程(进程?也就是一个程序,可以单独执行),并且自动控制 ...

  8. 手把手教你springboot集成微信支付

    20220727 最近要做一个微信小程序,需要微信支付,所以研究了下怎么在 java 上集成微信支付功能,特此记录下. 本文完整代码:点击跳转 准备工作 小程序开通微信支付 首先需要在微信支付的官网点 ...

  9. ArrayList,LinkedList

    ArrayList,LinkedList ArrayList 采用的是数组形式来保存对象的,这种方式将对象放在连续的位置中,所以最大的缺点就是插入删除时非常麻烦LinkedList 采用的将链表的数据 ...

  10. java-正则、object中的两个方法的使用

    正则: "."和"\" "."点儿,在正则表达式中表示任意一个字符. "\"在正则表达式中是转意字符,当我们需要描述一个 ...