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绘制 ...
随机推荐
- (转)运行jar应用程序引用其他jar包的四种方法 -- ClassLoader应用
转:http://longdick.iteye.com/blog/332580 大家都知道一个java应用项目可以打包成一个jar,当然你必须指定一个拥有main函数的main class作为你这个j ...
- 二次封装dojo slider
上次的二次封装timeslider,挺有意思,又来封装一个dojo的,样式还是用arcgis的.实现更多功能,包括HorizontalSlider和VerticalSlider, 刻度的显示隐藏,标签 ...
- django manager
django manager 在语句Book.objects.all()中,objects是一个特殊的属性,需要通过它查询数据库. 总之,模块manager是一个对象,Django模块通过它进行数据库 ...
- 笔记:JFB 部署新环境,要更改的参数清单列表
ylbtech-笔记:JFB 部署新环境,要更改的参数清单列表 1. Web.config返回顶部 2. JS返回顶部 1./m/js/utils.js var utils = {} 序号 参数 ...
- lr 计算字符串长度
sizeof求后面的内容or表达式所占用的字节数 strlen求字符串的有效长度,只要遇到'\0'就认为字符串结束 字符串转化为int型变量 Action2() { int j = 0; j = at ...
- Java必备主流技术流程图,写得非常好!
作者:Jay_huaxiao https://juejin.im/post/5d214639e51d4550bf1ae8df 1.spring的生命周期 Spring作为当前Java最流行.最强大的轻 ...
- MVC通过重写OnActionExecuting获取控制器,方法和域
一,如下代码 protected override void OnActionExecuting(ActionExecutingContext filterContext) {string _cont ...
- C#socket客户端自己输入消息发送到服务端通信实现通信
一,服务端代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using ...
- Python之执行精确的浮点数运算
有时候:代码上数字计算可能会有如同下面的误差 原因: 这些错误是由底层CPU和IEEE 754标准通过自己的浮点单位去执行算术时的特征. 由于Python的浮点数据类型使用底层表示存储数据,因此你没办 ...
- android ListView列表显示数据
item.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:and ...