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. K阶斐波那契数列--------西工大NOJ习题.10

    K阶斐波那契数列--------西工大NOJ习题.10 原创不易,转载请说明出处!!! 科普:k阶斐波那契数列的0到n-1项需要有初始值. 其中,0到n-2项初始化为0,第n-1项初始化为1. 在这道 ...

  2. python 装饰器理解

    简介 装饰器可以在不修改原有代码的基础上添加新的功能,可以将重复重用的代码抽取出来,进一步解耦,方便维护,一般适用于插入日志.性能测试.事务处理.缓存等 装饰器的前提 闭包 一般来说,当一个函数嵌套另 ...

  3. React报错之Object is possibly null

    正文从这开始~ 类型守卫 使用类型守卫来解决React中useRef钩子"Object is possibly null"的错误.比如说,if (inputRef.current) ...

  4. 数据仓库模型之CDM、LDM与PDM的区别

    在数据仓库建设中,概念数据模型设计与逻辑数据模型设计.物理数据模型设计是数据库及数据仓库模型设计的三个主要步骤. conceptual data model 概念数据模型是最终用户对数据存储的看法,反 ...

  5. 基于Sikuli GUI图像识别框架的PC客户端自动化测试实践

    写在前面 最近两天,公司有个PC客户端的测试任务,除了最基础的功能测试外,还包括稳定性测试和兼容性测试需求.刚好去年接触过Sikuli这款基于GUI图像识别框架的自动化测试工具,于是便应用于测试工作中 ...

  6. 如何用 refcursor 返回结果集

    可以通过返回 Refcursor 类型的函数,或者out 类型的函数或 procedure 返回结果集. 一.返回refcursor 类型的函数 create or replace function ...

  7. KingbaseES DBLink 扩展介绍

    DBLink 扩展插件功能与 Kingbase_FDW 类似,用于远程访问KingbaseES 数据库.相比于Kingbase_FDW,DBLink 功能更强大,可以执行DML,还可以通过 begin ...

  8. SpringBoot使用libreoffice转换PDF

    1.简介 有时候我们需要在程序中使用到office的转换和预览功能,本文就针对这个需求记录了较为简单的office转换和功能:jodconverter.当然也有aspose和其他开源第三方(kkfil ...

  9. 读时加写锁,写时加读锁,Eureka可真的会玩

    大家好,我是三友~~ 在对于读写锁的认识当中,我们都认为读时加读锁,写时加写锁来保证读写和写写互斥,从而达到读写安全的目的.但是就在我翻Eureka源码的时候,发现Eureka在使用读写锁时竟然是在读 ...

  10. C#:winform窗体 实现类似QQ的窗体在桌面边缘停靠和隐藏

    设计思路:1.使用定时器(Timer)来监控鼠标位置和窗体位置,并实现窗体的停靠和隐藏2.当鼠标拖动窗体时,窗体才有可能根据自身位置决定是否停靠3.如果窗体四周没有接触到屏幕边缘则不会停靠4.如果窗体 ...