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 ...
随机推荐
- Shiro笔记(二)Shiro集成SpringMVC的环境配置
0.pom文件引入 <!-- SECURITY begin --> <dependency> <groupId>org.apache.shiro</group ...
- KMP算法2
给定一个主串s,一个子串sub,将主串中的所有子串替换成replaceStr,并将最终结果输出来. #include<stdio.h> #include<string.h> # ...
- SpringMVC(二八) 重定向
在控制器中在返回的字符串中使用 return "redirect:/index.jsp" 的形式,使返回重定向到另外一个页面. 控制器参考代码: package com.tiek ...
- Oracle DB
索引 一.安装 卸载 一.安装 1.Oracle首先询问用户是否接受更新信息,一般选择不接受:Oracle安装选项,需为其配置数据库,所以此处会询问是否创建安装数据库,选择是系统类型,一般选择服务 ...
- UVA 509 RAID!
思路来自:https://blog.csdn.net/wcr1996/article/details/43834545 先解释一下题意: ①输入:先输入d(disk的数量) s(每块数据块有s个bi ...
- 前后端通过API交互
前两篇已经写好了后端接口,和前段项目环境也搭建好了 现在要通过接口把数据展示在页面上 先占位置写架子 创建一个头部组件和底部组件占位置 <template> <h1>这是头部组 ...
- 给有C或C++基础的Python入门 :Python Crash Course 4 操作列表 4.4 -- 4.5
上接前一篇文章. 4.4 使用列表的一部分 一,切片 切边,顾名思义,就是处理列表的部分元素. 我们可以联系一下C++的一段语句:for(int i = 0; i < n-2; ++i) cou ...
- 权限框架Apache Shiro 和 Spring Security
Shiro 首先Shiro较之 Spring Security,Shiro在保持强大功能的同时,还在简单性和灵活性方面拥有巨大优势.Shiro是一个强大而灵活的开源安全框架,能够非常清晰的处理认证.授 ...
- Java 8 (二) 新的时间API
新的时间API 一)时间线 Instant对象:表示时间轴上的一个点,原点为1970-1-1的午夜. Duration对象:表示一段时间. 注意Instant和Duration类都是final. 二) ...
- node cluster模块,仿多线程并发调用,
worker.js var cluster = require('cluster')function fibo(n) { return n == 0 ? 0 : n > 1 ? fibo(n - ...