将下列代码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. 010 pandas的DataFrame

    一:创建 1.通过二维数组进行创建 2.取值 取列,取位置的值 3.切片取值 这个和上面的有些不同,这里先取行,再取列 4.设定列索引 这里使用的行索引与上面不同. 5.通过字典的方式创建 6.索引 ...

  2. redics在windows平台下的使用

    https://www.cnblogs.com/ding2011/p/4745732.html 一::下载    windows 下的redis: https://github.com/Service ...

  3. Python argparse 模块

    Python argparse 模块 test.py: import argparse argparser = argparse.ArgumentParser(add_help=False) argp ...

  4. Python中list、字典、字符串的讲解

    python 的list讲解  计算机中的数组是从0开始的 list中的下标.角标.索引说的都是一个 数组都是从0开始的. stus=["刘",“王”,“张”] stus2=[] ...

  5. 一个简单需求:HashMap实现相同key存入数据后不被覆盖

    做一个积极的人 编码.改bug.提升自己 我有一个乐园,面向编程,春暖花开! 看似是一个简单的问题,其实里面包含很多的东西! 需求: 实现一个在HashMap中存入(任意类型)相同的key值后,key ...

  6. LoRaWAN 1.1 网络协议规范 - 5 MAC指令

    LoRaWAN 1.1 网络协议规范 LoRaWAN 1.1 版本封稿很久了也没有完整啃过一遍,最近边啃边翻译,趁着这个机会把它码下来. 如果觉得哪里有问题,欢迎留言斧正. 翻译不易,转载请申明出处和 ...

  7. C#为什么要多线程开发(一)

    首先说下多线程出现的原因: 为了解决负载均衡问题,充分利用CPU资源.为了提高CPU的使用率,采用多线程的方式去同时完成几件事情而不互相干扰.为了处理大量的IO操作时或处理的情况需要花费大量的时间等等 ...

  8. linux 命令基础一。

    UNIX是什么 UNIX的定义: UNIX是一个计算机操作系统,一个用来协调.管理和控制计算机硬件和软件资源的控制程序. UNIX操作系统的特点:多用户和多任务多用户表示在同一时刻可以有多个用户同时使 ...

  9. docker部署springboot项目

    本文介绍一下docker如何部署springboot项目. 前提条件: 1.可以运行jar包的环境 2.机器上已经安装了docker 3.准备部署的springboot的jar包 4.Dockerfi ...

  10. 转:自旋锁(spinlock)

    自旋锁与互斥锁有点类似,只是自旋锁不会引起调用者睡眠,如果自旋锁已经被别的执行单元保持,调用者就一直循环在那里看是否该自旋锁的保持者已经释放了锁,"自旋"一词就是因此而得名. 由于 ...