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绘制 ...
随机推荐
- 记录从现在开始,我的第一篇blog
最近在读刘未鹏的<暗时间>,深受作者的启发,决定开始书写blog. 书写是为了更好的思考,希望自己能持之以恒的坚持做这件事情. 这本书很推荐给所有同学,不仅关于时间管理,执行力,心理学, ...
- POJ - 1655 (点分治-树的重心)
题目:https://vjudge.net/contest/307753#problem/D 题意:给你一棵树,让你求出一个点,让他的最大子树的节点数尽量小 思路:最大子树节点数尽量小,一看就是树的重 ...
- [CSP-S模拟测试]:y(DP+bitset)
题目背景 $\frac{1}{4}$遇到了一道水题,叕完全不会做,于是去请教小$D$.小$D$懒得理$\frac{1}{4}$,直接就离开了.于是,$\frac{1}{4}$只好来问你,这道题是这样的 ...
- ValueError: invalid literal for int() with base 10问题处理
问题描述: 在用pthon写脚本得过程中,发生错误,ValueError: invalid literal for int() with base 10,这种错误是值得类型转换错误,int()函数是可 ...
- JavaScript-Tool-截取头像:ShearPhoto
ylbtech-JavaScript-Tool-截取头像:ShearPhoto ShearPhoto 2.0 发布,支持HTML5本地截取头像,支持美图秀秀特效,支持几十M数码相片压缩截取 1.返回顶 ...
- Problem accessing /jenkins/. Reason:
这是一个Jenkins的Bug.临时解决方法是:在浏览器中手工输入:http://<ip>:<port>.不要访问"/jenkins"这个路径.
- RSTP生成树
一.实验目的 二.实验拓扑图 三.实验编址 四.实验步骤 1.基本步骤 配置PC机IP 配置完成,开启所有设备,测试主机之间连通性 2.配置RSTP基本功能 在四台交换机上修改生成树模式:配置完成后, ...
- 私有IP地址
私有IP地址: 在ABC三类网络中,如下三段网络地址为私有IP地址,如何人都可以自行在自己的局域网中使用这些IP地址. A类私有:10.0.0.1----10.255.255.254 B类私有:172 ...
- BZOJ 4657 (网络流)
题面 Nick最近在玩一款很好玩的游戏,游戏规则是这样的: 有一个n*m的地图,地图上的每一个位置要么是空地,要么是炮塔,要么是一些BETA狗,Nick需要操纵炮塔攻击BETA狗们. 攻击方法是:对于 ...
- JavaScript — event介绍以及兼容处理
JavaScript - event介绍以及兼容处理 1.事件流 浏览器发展到第四代时(IE4及 Netscape Communicator 4),浏览器开发团队遇到一个问题:页面的哪个部分会拥有某个 ...