echarts-环形图处理图列中的点击,使百分比的数据列不发生变化,默认追加其他选项
将下列代码copy的echarts编辑器中
app.title = '环形图';
var $legendData = ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'];
var $legendSelected = {'直接访问':false};
var $seriesData = [
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]; var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data:$legendData,
selected:$legendSelected },
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data:$seriesData
}
]
};
myChart.on('legendselectchanged', function (params) {
if (!$seriesData || $seriesData.length <= 0) return
var legendData = []
var seriesData = []
var selected = params.selected;
/*var selectedMode = false;
for (var i in params.selected) {
if( params.selected[i] && i != '其他'){
selectedMode = true;
}
}*/
console.log('params');
console.log(params); var v = null;
for (var i = 0; i < $seriesData.length; i++) {
var item = $seriesData[i]
console.log(params.selected[item.name]);
if( !params.selected[item.name] ){
if( v === null ){
v = item.value;
}else{
v += item.value;
}
}
if(item.name == '其他'){
continue;
} legendData.push(item.name)
seriesData.push({ value: item.value, name: item.name, })
}
if( v !== null ){
legendData.push('其他');
seriesData.push({ value: v, name: '其他'})
}
console.log(legendData);
console.log(seriesData); var $option = option
$option.legend.data = legendData
$option.legend.selected = selected
//$option.legend.selectedMode = selectedMode
$option.series[0].data = seriesData
myChart.clear() console.log(option);
myChart.setOption(option) });
echarts-环形图处理图列中的点击,使百分比的数据列不发生变化,默认追加其他选项的更多相关文章
- Asp.net中,点击GridView表头实现数据的排序
一.实现该功能的基本工作. 1. 先添加一个GridView,取名为gvData. 2. 设置该控件的属性: 操作步骤如下 设置属性: 这4个属性,还要设置该控件AllowSorting=&quo ...
- Ruby Rails学习中:User 模型,验证用户数据
用户建模 一. User 模型 实现用户注册功能的第一步是,创建一个数据结构,用于存取用户的信息. 在 Rails 中,数据模型的默认数据结构叫模型(model,MVC 中的 M).Rails 为解决 ...
- 修改echarts环形图的牵引线及文字位置
修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...
- react中使用echarts(人物关系图)
项目中有时会用到echarts,可能不同的框架中语法稍有变通,前几天在react项目中遇到,写此篇以作记录. 不同的charts语法跟支持不同,本篇"echarts": " ...
- 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官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...
- echarts、higncharts折线图或柱状图显示数据为0的点
echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...
- Echarts 曲线数少于图例数解决方法
在上一篇文章 Echarts 多曲线“断点”问题解决方法 中说到了Angular 项目中要使用 Echarts 的方法. 说明了自己解决当“每一条曲线的横坐标不相同”时,在各条曲线上,它们的值采用数组 ...
- echarts渲染一个风向图
今天给大家说一个用echarts渲染一个风向图,这里图上其实有三个要素,风向,风级和能见度,主要还是讲讲代码里面的坑 1.风向图标方向修改以及设置 var ownData = echarts.util ...
随机推荐
- BZOJ2219 数论之神 数论 中国剩余定理 原根 BSGS
原文链接https://www.cnblogs.com/zhouzhendong/p/BZOJ2219.html 题目传送门 - BZOJ2219 题意 求同余方程 $x^A\equiv B \pmo ...
- 2018牛客网暑假ACM多校训练赛(第七场)I Tree Subset Diameter 动态规划 长链剖分 线段树
原文链接https://www.cnblogs.com/zhouzhendong/p/NowCoder-2018-Summer-Round7-I.html 题目传送门 - https://www.n ...
- spring开发需要的配置文件
1,applicationContext-dao.xml <?xml version="1.0" encoding="UTF-8"?><bea ...
- HUE的自动化安装部署
HUE=Hadoop User Experience(Hadoop用户体验),直白来说就一个开源的Apache Hadoop UI系统,由Cloudera Desktop演化而来,最后Cloudera ...
- ESP8266进阶篇
ESP8266进阶篇 20170225(应需要,继续使用此模块!!!) 说一下如何通过内网和外网来控制我的ESP8266的数据模块 1.内网控制:(要求手机直接连接在ESP8266的WIFI上面,使用 ...
- 使用 PySide2 开发 Maya 插件系列三:qt语言国际化(internationalization)
使用 PySide2 开发 Maya 插件系列三:qt语言国际化(internationalization) 前言: 这是 qt for python 的语言国际化,基于 UI 的,python 也有 ...
- 初窥Java之一
一.常用的dos命令 打开命令提示符窗口的方式: ① win + R --> 输入cmd --> 回车 ② 开始 --> 搜索程序和文件的框中输入 cmd --> 回车 ③ ...
- QT5版本添加icon图标步骤
QT5版本添加icon图标方法收藏 方法1: step1: 把要显示的图标文件,比如为1.ico文件放到工程v的根目录下 step2: 修改当前项目XXX.pro文件,在文件末尾添加如下内容(注意=的 ...
- js异步梳理:1.从浏览器的多进程到JS的单线程,理解JS运行机制
大家很早就知道JS是一门单线程的语言.但是也时不时的会看到进程这个词.首先简单区分下线程和进程的概念 1. 简单理解进程 - 进程是一个工厂,工厂有它的独立资源 - 工厂之间相互独立 - 线程是工厂中 ...
- python数据结构之quick_sort
Quick sort , also known as partition-exchange sort, divides the data to be sorted into two separate ...