将下列代码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-环形图处理图列中的点击,使百分比的数据列不发生变化,默认追加其他选项的更多相关文章

  1. Asp.net中,点击GridView表头实现数据的排序

    一.实现该功能的基本工作. 1.  先添加一个GridView,取名为gvData. 2.  设置该控件的属性: 操作步骤如下 设置属性: 这4个属性,还要设置该控件AllowSorting=&quo ...

  2. Ruby Rails学习中:User 模型,验证用户数据

    用户建模 一. User 模型 实现用户注册功能的第一步是,创建一个数据结构,用于存取用户的信息. 在 Rails 中,数据模型的默认数据结构叫模型(model,MVC 中的 M).Rails 为解决 ...

  3. 修改echarts环形图的牵引线及文字位置

    修改echarts环形图的牵引线及文字位置,下面代码及效果不仅如此,也包含了其它的效果哦.有问题可以留言. 根据echarts官方示例修改效果: 官方示例图: 修改效果图: 直接上代码:其它不多说. ...

  4. react中使用echarts(人物关系图)

    项目中有时会用到echarts,可能不同的框架中语法稍有变通,前几天在react项目中遇到,写此篇以作记录. 不同的charts语法跟支持不同,本篇"echarts": " ...

  5. vue中使用echarts画饼状图

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

  6. 在微信小程序中使用 echarts 图片-例 折线图

    首先进入echarts官方[https://echarts.apache.org/handbook/zh/get-started/].这边只需要在小程序中简单应用一下echarts折线图 所以不需要把 ...

  7. echarts、higncharts折线图或柱状图显示数据为0的点

    echarts.higncharts折线图或柱状图只需要后端传到前端一段json数据,接送数据的x轴与y周有对应数据,折线图或柱状图就会渲染出这数据. 比如,x轴表示美每天日期,y轴表示数量.他们的数 ...

  8. Echarts 曲线数少于图例数解决方法

    在上一篇文章 Echarts 多曲线“断点”问题解决方法 中说到了Angular 项目中要使用 Echarts 的方法. 说明了自己解决当“每一条曲线的横坐标不相同”时,在各条曲线上,它们的值采用数组 ...

  9. echarts渲染一个风向图

    今天给大家说一个用echarts渲染一个风向图,这里图上其实有三个要素,风向,风级和能见度,主要还是讲讲代码里面的坑 1.风向图标方向修改以及设置 var ownData = echarts.util ...

随机推荐

  1. bitset里面一些函数的用法

  2. 数仓1.1 分层| ODS& DWD层

    数仓分层 ODS:Operation Data Store原始数据 DWD(数据清洗/DWI) data warehouse detail数据明细详情,去除空值,脏数据,超过极限范围的明细解析具体表 ...

  3. PAT (Basic Level) Practise - 成绩排名

    1004. 成绩排名 题目链接:https://www.patest.cn/contests/pat-b-practise/1004 读入n名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓 ...

  4. 根据cookie记录跟踪ID来确定分享对象

    一 :思路分析 1:用户注册的时候标记推客 2:推客生成分享链接 分享链接构成   (环境前缀+(此链接打开时需要调用的接口+推客的标记+&url=(商品的链接))) 3:需要写一个分享链接调 ...

  5. 利用log4添加log

    應用log4net.dll 新建Global.asax,在cs文件中添加 protected void Application_Start(object sender, EventArgs e)    ...

  6. scrapy 第一个案例(爬取腾讯招聘职位信息)

    import scrapy import json class TzcSpider(scrapy.Spider): # spider的名字,唯一 name = 'tzc' # 起始地址 start_u ...

  7. Centos7服务器中安装MySQL(选择一个你想要的版本)

    开始,我默认安装了MySQL8,但是在测试的时候发现通过Hibernate连接之前的MySQL5.7的代码运行在连接新版本的库的时候发生异常,出于时间原因没有深度排查 但是我严重怀疑是版本匹配问题,为 ...

  8. RBM:深度学习之Restricted Boltzmann Machine的BRBM学习+LR分类—Jason niu

    from __future__ import print_function print(__doc__) import numpy as np import matplotlib.pyplot as ...

  9. HDU 1533 Going Home (最大权完美匹配)

    <题目链接> 题目大意:给你一张地图,地图上m代表人,H代表房子,现在所有人要走到房子内,且一个房子只能容纳一个人(人和房子的数量相同),人每移动一步,需要花1美元,问所有人走到房子中的最 ...

  10. POJ 2001 Shortest Prefixes 【Trie树】

    <题目链接> 题目大意: 找出能唯一标示一个字符串的最短前缀,如果找不出,就输出该字符串. 解题分析: Trie树的简单应用,对于每个单词的插入,都在相应字符对应的节点 num 值+1 , ...