不多废话,笔记如下

var myEcharts = echarts.init(document.getElementById('doughnut'));

option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['未處理', '處理中', '已處理'],
// formatter方法会传入一个name,值是当前的data元素(也就是data[i])
formatter: function (name) {
var index = 0;
var clientlabels = data;
// 要显示在 legend 旁边的值
var clientcounts = [2, 3, 12];
// forEach() value为每个值,i为索引值
clientlabels.forEach(function (value, i) {
if (value == name) {
index = i;
}
});
return name + ":" + clientcounts[index];
}
},
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: [
{ value: 2, name: '未處理' },
{ value: 3, name: '處理中' },
{ value: 12, name: '已處理' },
]
}
]
}; myEcharts.setOption(option);

Echarts饼图将数据显示在 legend 旁边的更多相关文章

  1. ECharts饼图试玩

    处理类似提交问卷的数据,要生成图表,用了ECharts,好方便的. 简陋效果: 1.表单存储 有单选和多选题,单选直接存储各选项数字值,1,2,3,4...中一个:多选用|分隔存储选项值,如1|3,2 ...

  2. 将数据动态加载到Echarts饼图中

    需求描述 Echarts中的官方示例是将数据的设定写好在页面的配置项中的,但在实际的开发展示中,我们需要按照需求通过调用后台的接口获取数据,再将数据加载到特定的Echarts饼图中. 实现效果 实现步 ...

  3. Vue Echarts 饼图设置默认选中一个

    Vue Echarts 饼图设置默认选中一个 myChart.setOption(data) // data伟echarts所需要传入的参数,就是配置参数最多的那个玩意 myChart.dispatc ...

  4. echarts 饼图-->如何修改legend模板?

    首先需要在初始化图表的方法中过滤一下数据 ,将你需要的 名称  所占百分比 所占数量  筛选出来 let dataFilter = [ { value: 20, name: "未知" ...

  5. echarts饼图不显示数据为0的数据

    首先阐述下为什么会有这个需求,这个和echarts自身的显示效果有关. 如果你选择的展示图形为饼图,然后你的数据里有一条数据为0,那么展示的数据就为一条直线,看上去效果并不好, 会很突兀. 当然如果你 ...

  6. echarts 饼图 + 全屏显示

    效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. echarts饼图

    1.添加点击事件并跳转到不同的页面 // 路径配置 require.config({ paths: { echarts: 'http://echarts.baidu.com/build/dist/' ...

  8. 百度ECHARTS 饼图使用心得 处理data属性

    做过CRM系统的童鞋应该都或多或少接触过hicharts或者echarts等数据统计插件.用过这两款,个人感觉echarts的画面更好看.至于功能,只有适合自己的才是最好的. 今天来说说我使用echa ...

  9. echarts饼图--数据交互

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. [心得]暑假Day 8

    em. 一波爆炸后回到了一个原始位置rank33 最近两场考试没啥状态 总感觉都读不懂题目了 T1 因为有的边要经过两次,不妨把边复制成双倍,那么再去掉2条,如果能一遍把剩下的边过完,也就是成为一笔画 ...

  2. Python是否存在方法方法重载及是否可以不显示声明初始化方法

    一.python中是否存在方法重载 对java有了解的程序员都知道,java中存在构造方法重载和普通方法重载,重载指的是方法名相同,参数列表不同的多个方法.python中是否也支持这两种方法重载,测试 ...

  3. eslint 检查单个文件的错误

    问题: 批量检查时,没有针对性,想针对单个文件进行检查 解决办法:./node_modules/.bin/eslint  your file

  4. EvenBus源码分析

    概述 一般使用EventBus的组件类,类似下面这种方式: public class SampleComponent extends Fragment { @Override public void ...

  5. linux常用命令(9)nl命令

    nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...

  6. NLP之中文自然语言处理工具库:SnowNLP(情感分析/分词/自动摘要)

    一 安装与介绍 1.1 概述 SnowNLP是一个python写的类库,可以方便的处理中文文本内容,是受到了TextBlob的启发而写的,由于现在大部分的自然语言处理库基本都是针对英文的,于是写了一个 ...

  7. 关于react native 路由传值及回调方法的理解

    提示:本路由需要通过 this.props.navigation.state.params 获取上一路由传过来的值

  8. PJzhang:从js文件中寻找子域名的SubDomainizer

    猫宁!!! 有些专门针对企业客户的网站,可能没有供公开注册的页面,但是在js文件中可能会隐藏他们的注册接口,当然这也是一种安全风险,就像有些后台是一定不能不小心放外网一个道理.   最近看到一篇文章提 ...

  9. pandas将非数值型特征转化为数值型(one-hot编码)

    import pandas as pd import numpy as np import matplotlib.pyplot as plt name = np.array([['jack', 'ro ...

  10. 学习前端D1

    第一次写博客,有些小激动,以前写学习的记录都是在有道云笔记上写的,在博客园上更多的是膜拜大佬.偷师学艺.前段时间,我和朋友闲聊时,知道用博客每天写知识会提高学习的热情,这感情好呀,于是乎,今天,我依旧 ...