最后的效果如图,需要在中间展示的部分换行然后字体大小不同。

以下为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绘制饼图时的一点特殊设置的更多相关文章

  1. echarts圆饼图设置默认选中项并在中间显示文字

    效果: 代码: var myChart = echarts.init(document.getElementById('quanshi-echarts-two')); option = { grid: ...

  2. 使用ECharts制作图形时,如何设置指定图形颜色?

    使用ECharts制作图形时,图形颜色是默认的颜色,有时需求需要指定图形颜色,这就需要自己去设置. 在option下的series属性中设置itemStyle,如下所示: itemStyle: { n ...

  3. echarts实现饼图及横向柱状图的绘制

    项目中需要绘制饼图,因此简单学习了下echarts的基本使用.head中引入js文件: <script src="/static/frame/echarts/echarts.min.j ...

  4. ECharts 环形饼图 动态获取json数据

    ECharts  环形饼图 动态获取json数据 效果图如下: 一.html部分 <div id="secondPieChart" style="width:100 ...

  5. 【带着canvas去流浪】 (3)绘制饼图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. hover高亮的实现思路 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:< ...

  6. Python使用Plotly绘图工具,绘制饼图

    今天我们来学习一下如何使用Python的Plotly绘图工具,绘制饼图 使用Plotly绘制饼图的方法,我们需要使用graph_objs中的Pie函数 函数中最常用的两个属性values,用于赋值给需 ...

  7. R绘图 第八篇:绘制饼图(ggplot2)

    geom_bar()函数不仅可以绘制条形图,还能绘制饼图,跟绘制条形图的区别是坐标系不同,绘制饼图使用的坐标系polar,并且设置theta="y": coord_polar(th ...

  8. 使用echarts绘制漂亮的渐变键盘仪表盘

    echarts官方示例和默认样式都比较难看,经过一顿捣鼓实现比较漂亮的渐变仪表盘. 第一步:设置轴线 将图表轴线.label.分割线.隐藏,只保留刻度,然后修改刻度样式达到最终效果.不过要注意的是ax ...

  9. 带着canvas去流浪系列之三 绘制饼图

    [摘要] 用canvas原生API绘制Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制 ...

随机推荐

  1. C#操作xml完整类文件

    C#操作xml完整类文件 xml_oper.cs using ...System; using System.Data; using System.Web; using System.Xml; /** ...

  2. [CSP-S模拟测试]:长寿花(DP+组合数)

    题目描述 庭院里有一棵古树.圣诞节到了,我想给古树做点装饰,给他一个惊喜.他会不会喜欢呢?这棵树可以分为$n$层,第$i$层有$a_i$个防治装饰品的位置,有$m$种颜色的装饰品可供选择.为了能让他喜 ...

  3. Mac上VMWare Fusion配置多台cent os

    一.创建虚拟机(准备工作) 1.使用VMWare Fusion 创建第一台虚拟机 2.选择操作系统(本次使用的是使用cent os 6.5 64bit 系统) 3.选择磁盘大小(楼主mac上的磁盘大小 ...

  4. 单例模式@Singleton在测试中的运用

    前言 单例模式是一种比较常用的设计模式,目的是:保证一个类仅有一个实例,并提供一个访问它的全局访问点. 测试种可能用到的场景 : 在很多时候,有些对象我们希望在整个程序只有一个实例,如线程池.数据库连 ...

  5. jmeter添加自定义扩展函数之String---base64加密

    1,打开eclipse,新建maven工程,在pom中引用jmeter核心jar包,具体请看---https://www.cnblogs.com/guanyf/p/10863033.html---,这 ...

  6. xshell设置选中复制,右击粘贴功能

    . 设置选中复制: 工具--->选项--->键盘和鼠标--->(然后根据下图设置保存即可) 2. 设置ctrl + v 粘贴功能: 工具--->选项--->键盘和鼠标-- ...

  7. Java + selenium 元素定位(3)之By TagName

    本篇介绍findElement接口中的By TagName方法.首先,要知道什么是tagname.之前我们使用F12开发者工具查看网页元素是,发现每行代码前都有<input>.<bo ...

  8. js记住密码

    $(function () { if (getCookie("rmbUser") == "true") {   $("#xuanzong") ...

  9. spring data jpa 多对多查询

    package com.ytkj.dao; import com.ytkj.entity.Customer; import com.ytkj.entity.Role; import org.sprin ...

  10. 第十二章 存储之 Secret

    1.Secret 存在意义 Secret 解决了密码.token.密钥等敏感数据的配置问题,而不需要把这些敏感数据暴露到镜像或者 Pod Spec中.Secret 可以以 Volume 或者环境变量的 ...