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 ...
随机推荐
- js压缩图片上传插件localResizeIMG
示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...
- Codeforces 830C Bamboo Partition 其他
原文链接https://www.cnblogs.com/zhouzhendong/p/CF830C.html 题解 把问题转化成求最大的 $d$ ,满足$$\sum_{1\leq i \leq n}( ...
- thinkphp模板继承
public/base.html <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- notepad++ 去空行
Press Ctrl+H (Replace) Select Extended from SearchMode Put \r\n\r\n in Find What Put \r\n in Replace ...
- C# 正规则表达式
获取括号里的内容 public string GetRegexStr(string Str, string Symbol1, string Symbol2, bool needSymbol) { ]; ...
- XamarinSQLite教程Xamarin.iOS项目中打开数据库文件
XamarinSQLite教程Xamarin.iOS项目中打开数据库文件 以下是打开MyDocuments.db数据库的具体操作步骤: (1)将Mac电脑上的MyDocuments.db数据库移动到W ...
- 2019-1-23IntelliJ IDEAget的使用教程及出现的问题
第一条:快捷键: Ctrl+Alt+h:显示调用当前方法的所有位置. Ctrl+Alt+B:跳转到方法实现处 自动修正,我这是 Alt + L Ctrl+Enter,导入包,自动修正Ctrl+Alt+ ...
- php5.4以下,json_encode不转义实现方法
function json_encode($input){ // 从 PHP 5.4.0 起, 增加了这个选项. if(defined('JSON_UNESCAPED_UNICODE')){ retu ...
- KTV项目之3个ListView的跳转和加载歌手图片
第一个ListView: 第二个ListView: 第三个ListView: 定义一个KTVUtil类,在里面定义一个静态变量保存歌手图片 //定义一个静态变量保存歌手图片路径 public stat ...
- 解放F5——React开启模块热更新
解放F5--React开启模块热更新 在一个正在开发的应用中,刷新页面将会降低你的生产效率:你必须得等待页面加载完毕. 一个大的应用可能会花很多秒钟才能刷新完页面.使用 HMR(模块热替换) 可以避免 ...