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

以下为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. 黄金含量版本——KTV

    呀,进来的都是盆友,首先先给大家拜年了,祝大家新年快乐,万事如意,家和万事兴~! 大家看了标题进来就不能让大家白进来,一定会让大家带着满满的果实. 下面我们就来讨论讨论KTV这个项目: (1)KTV的 ...

  2. 暑期训练 CF套题

    CodeForces 327A 题意:有n个数,都是0或1,然后必须执行一次操作,翻转一个区间,里面的数0变1,1变0,求最多1的数量 思路:最开始我写的最大字段和,后面好像写搓了,然后我又改成暴力, ...

  3. soj#532 set p3175

    传送门 分析 代码 #include<bits/stdc++.h> using namespace std; ; <<],Ans; int n,m,N; inline int ...

  4. Windwos 08R2_DNS+AD安装图文

    目录 目录 前言 软件环境 DNS域名服务器 配置DNS服务器 AD活动目录 配置AD域 前言 Windows 2008 R2平台下搭建AD(Active Directory)和DNS(Domain ...

  5. HTMLTestRunner优化:带截图、饼图、失败重跑

    github地址:https://github.com/yoyoketang/sele_project_th9

  6. HBase 中加盐之后的表如何读取:Spark 篇

    在 <HBase 中加盐之后的表如何读取:协处理器篇> 文章中介绍了使用协处理器来查询加盐之后的表,本文将介绍第二种方法来实现相同的功能. 我们知道,HBase 为我们提供了 hbase- ...

  7. [CF895E] Eyes Closed(线段树,期望)

    Desctiption 传送门:Portal 大致题意: 给你一个序列, 支持两种操作: 1 l1 r1 l2 y2 在\([l1, r1]\)随机选择一个数a, \([l2, r2]\) 内随机选择 ...

  8. python随机生成个人信息

    python随机生成个人信息 #!/usr/bin/env python3 # -*- coding:utf-8 -*- import sys import random class Personal ...

  9. mac bash上显示git分支与状态

    主要实现 显示当前路径 显示当前所在分支 显示当前修改状态 = 表示一个干净的分支 ~ 表示文件有改动 # 表示已commit 但未 push 通过网上搜索和自己根据实际需要修改的代码如下: .bas ...

  10. redis-3.0.0安装

    redis-3.0.0安装 前言 redis是常用的no-sql数据库,常用于缓存数据,同时,他也可以持久化数据.他是C语言开发的,所以安装的时候需要编译. 单机版redis yum install ...