echarts绘制饼图时的一点特殊设置

最后的效果如图,需要在中间展示的部分换行然后字体大小不同。
以下为option的设置,使用rich里面的参数来设置更多的文本样式,使用‘\n’来控制换行
let option = {
color: color,
backgroundColor: '#082763',
tooltip: {},
legend: {
orient: 'vertical',
left: 10,
top: 10,
textStyle: {
color: '#fff'
},
data: lengendData
},
series: [{
name: '',
type: 'pie',
radius: ['45%', '75%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
position: 'center',
textStyle: {
fontSize: 20,
fontWeight: 'bold',
color: '#ffffff'
},
formatter: [`{x|{b}}`, `{y|{d}%}`].join('\n'),
rich: {
x: {
fontSize: 16, fontWeight: 'bold'
},
y: {
fontSize: 24, fontWeight: 'bold'
}
}
}
}, labelLine: {
normal: {
show: false
}
},
data: pieData
}]
};
echarts绘制饼图时的一点特殊设置的更多相关文章
- echarts圆饼图设置默认选中项并在中间显示文字
效果: 代码: var myChart = echarts.init(document.getElementById('quanshi-echarts-two')); option = { grid: ...
- 使用ECharts制作图形时,如何设置指定图形颜色?
使用ECharts制作图形时,图形颜色是默认的颜色,有时需求需要指定图形颜色,这就需要自己去设置. 在option下的series属性中设置itemStyle,如下所示: itemStyle: { n ...
- echarts实现饼图及横向柱状图的绘制
项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...
- ECharts 环形饼图 动态获取json数据
ECharts 环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...
- 【带着canvas去流浪】 (3)绘制饼图
目录 一. 任务说明 二. 重点提示 三. 示例代码 四. hover高亮的实现思路 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:< ...
- Python使用Plotly绘图工具,绘制饼图
今天我们来学习一下如何使用Python的Plotly绘图工具,绘制饼图 使用Plotly绘制饼图的方法,我们需要使用graph_objs中的Pie函数 函数中最常用的两个属性values,用于赋值给需 ...
- R绘图 第八篇:绘制饼图(ggplot2)
geom_bar()函数不仅可以绘制条形图,还能绘制饼图,跟绘制条形图的区别是坐标系不同,绘制饼图使用的坐标系polar,并且设置theta="y": coord_polar(th ...
- 使用echarts绘制漂亮的渐变键盘仪表盘
echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...
- 带着canvas去流浪系列之三 绘制饼图
[摘要] 用canvas原生API绘制Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...
随机推荐
- POJ 2114 (点分治)
题目:https://vjudge.net/contest/307753#problem/B 题意:求树中路径和=k的点对是否存在 思路:点分治,这个题其实和上一题洛谷一样,只是这个数据强,我们不能直 ...
- 查找android so文件中绕过c/c++ api直接调用SYSCALL的方法位置
很多应用会通过arm汇编,自行调用syscall,直接操作系统内核,来绕过c层的hook,保证程序安全 所以想hook的话只能找到这些方法的c入口分别hook 可以通过查找bxls指令找到这些位置
- 使用Bochs学习硬件原理
什么是Bochs? 简单地说,Bochs是一款仿真软件,可以用软件的方式模拟硬件的工作.同类软件有Qemu,仿真软件与虚拟机(hypervisor)还不完全相同,仿真软件是完全软件模拟硬件,而虚拟机软 ...
- trizip haskell implementation
1 trizip :: [a] -> [b] -> [c] -> [(a,b,c)] 2 trizip a b c 3 | null a = [] 4 | null b = [] 5 ...
- centos7 安装 gitlab 服务器
https://www.cnblogs.com/wenwei-blog/p/5861450.html 标签: centos7 git安装 git gitlab 我这里使用的是centos 7 64bi ...
- leetcode.双指针.88合并两个有序数组-Java
1. 具体题目 给定两个有序整数数组 nums1 和 nums2,将 nums2 合并到 nums1 中,使得 num1 成为一个有序数组. 说明: 初始化 nums1 和 nums2 的元素数量分别 ...
- vue证明题五,组件传值与绑定
上文中写了一个input组件,该组件需要复用,但是并不是每个组件都相同的 比如我定义了一个组件,是个矿泉水瓶子,这个瓶子分为大中小三个号,定义了三种瓶子的容积,定义了必须有瓶盖,瓶口,瓶子质地 但是瓶 ...
- config maven in intellij IDEA
Config maven in IDEA File ->Settings->Build,Execution.Deployment->build Too ...
- 【转载】POST/GET请求中RequestBody和RequestParam的应用场景
原文链接:https://blog.csdn.net/justry_deng/article/details/80972817 原文链接:https://www.jianshu.com/p/49819 ...
- 迄今为止把同步/异步/阻塞/非阻塞/BIO/NIO/AIO讲的这么清楚的好文章(快快珍藏)
常规的误区 假设有一个展示用户详情的需求,分两步,先调用一个HTTP接口拿到详情数据,然后使用适合的视图展示详情数据. 如果网速很慢,代码发起一个HTTP请求后,就卡住不动了,直到十几秒后才拿到HTT ...