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绘制 ...
随机推荐
- 用DELPHI中实现RAR文件解压到指定一目录
一个RAR压缩文件,用DELPHI编的程序打开它并解压到某一目录,怎么实现的?自己搞定了例子:winrar.exe e -y C:\WINDOWS\Desktop\ghost.rar d:\ 但新的问 ...
- 设置element表格透明样式
1.element table 表格 修改背景为透明并去除边框 .el-table{ /* 表格字体颜色 */ color:white; /* 表格边框颜色 */ /* border: 0.5px s ...
- CF 1172E Nauuo and ODT ——LCT
题目:http://codeforces.com/contest/1172/problem/E LCT好题. 考虑对每个颜色求出 “不是该颜色的点组成的连通块的 siz2 之和” .每个颜色用 LCT ...
- AcWing 313. 花店橱窗 (线性DP)打卡
题目:https://www.acwing.com/problem/content/315/ 题意:有一个矩阵,你需要在每一行选择一个数,必须保证前一行的数的下标选择在下一行的左边,即下标有单调性,然 ...
- Borůvka (Sollin) 算法求 MST 最小生成树
基本思路: 用定点数组记录每个子树的最近邻居. 对于每一条边进行处理: 如果这条边连成的两个顶点同属于一个集合,则不处理,否则检测这条边连接的两个子树,如果是连接这两个子树的最小边,则更新 (合并). ...
- dubbo 漫谈一
转:腾信视频 阿甘 https://ke.qq.com/course/216518 https://blog.csdn.net/xlgen157387/article/details/51865289 ...
- Chrome-逆向分析JS-1分析google网站翻译器原文存放位置
剧透:就是使用了一下 Chrome DevTools 的 Memory 功能,通过已知的 JS 变量的值查找 JS 内存中变量的引用 # 一:不分析一下现有的网页翻译方法么? 总所周知,(As is ...
- shell zip和unzip压缩和解压,压缩效率
1.把/home目录下面的mydata目录压缩为mydata.zip zip -r mydata.zip mydata #压缩mydata目录zip -r mydata.zip ./*txt #压缩当 ...
- Selenium:多窗口切换(获取窗口句柄handle)
我们在操作网页的时候,点击有些页面的链接,会重新打开一个窗口,我们要在新页面上操作,就得切换窗口 比如在百度首页的登录框点击注册,会重新打开一个注册的新页面,要在新页面注册,就得先切进新页面 那我们怎 ...
- centos6.8安装redis
1.下载Redis3.2.5安装包 cd /optwget http://download.redis.io/releases/redis-3.2.5.tar.gz 2.解压.编译.安装redis-3 ...