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

以下为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. 关于exe文件传递参数方法

    段代码手工折叠 {$REGION 'Designer Managed Code'} ............ {$ENDREGION} 昨天同事问到,delphi里exe文件如何传递参数? 因为手头装 ...

  2. BUUCTF | [CISCN2019 华北赛区 Day2 Web1]Hack World

    id=0 id=1 id=2 id=3 发现结果不一样,尝试 : ">4","=4","<4" : 在自己的环境下验证一下: 爆 ...

  3. 面试题:实现strcpy,strlen,strcmp,strcat,memcpy 之c-style字符串

    哪里可以看到c库函数的源码? gnu的c运行库glibc,但是源码的实现却是复杂的,需要考虑效率,stlen源码分析. c-style字符串有个约定,以空字符结尾,即 '\0' . ' }; &quo ...

  4. USACO 6.4 章节

    The Primes 题目大意 5*5矩阵,给定左上角 要所有行,列,从左向右看对角线为质数,没有前导零,且这些质数数位和相等(题目给和) 按字典序输出所有方案... 题解 看上去就是个 无脑暴搜 题 ...

  5. c#拆分字符串英文和数字(包括国外所以文字)

    先创建一个类: /// <summary> /// 字符串分析 /// </summary> interface IStringAna { /// <summary> ...

  6. js判断一件商品加还是减

    <div class="right"> <div onclick="javascript: ClickJian(this);" data-i= ...

  7. Daily Life——团队冲刺博客——(领航篇)

    目录 领航目标 各个成员在 Alpha 阶段认领的任务 各个成员的具体任务安排 整个项目预期的任务量 团队成员贡献值的计算规则 燃尽图 Daily Life团队冲刺博客 领航目标 各个成员在 Alph ...

  8. Apache Shiro 集成Spring(二)

    1.依赖: <dependency> <groupId>org.apache.shiro</groupId> <artifactId>shiro-cor ...

  9. easyUI学习笔记二

    1.  拖拉大小 <!DOCTYPE html> <html> <head> <title>easyui学习</title> <scr ...

  10. 添加阿里巴巴图标,让你页面小图标都是CSS3写成

    第一步把你想要的小图标添加到购物车里,然后如图下载 第二步下载完了,如下图有这些文件 第三步,把你需要的必要文件放到文件夹中,然后把需要的代码放到一个CSS中,然后引用 备注,这几个文件就是字体,必须 ...