Echarts --- 可视化练习（pie06 --- 环形嵌套饼图）

Echarts — 可视化练习（pie06 — 环形嵌套饼图）

别人想什么，我们控制不了；别人做什么，我们也强求不了。唯一可以做的，就是尽心尽力做好自己的事，走自己的路，按自己的原则，好好生活。即使有人亏待了你，时间也不会亏待你，人生更加不会亏待你！善待别人，就是善待自己。 ----- 摘自知乎

Flask:

# -*- coding: utf-8
#  @Author  : ZYX
#  @File    : pie06_嵌套环形饼图.py
# @software: PyCharm
from flask import Flask,render_templateapp = Flask(__name__)@app.route('/')
def index():return render_template("pie06.html")if __name__ == '__main__':app.run(debug=True)

返回顶部

HTML:

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body style="height: 100%">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="../static/echarts_5.0.min.js"></script>
<script type="text/javascript">var dom = document.getElementById("container");var myecharts = echarts.init(dom);var option = null;option = {title: {text: '嵌套环形饼图',left: '45%'},tooltip: {trigger: 'item',axisPointer: {type: 'shadow'},formatter: '{a}</br>{b}:{c}</br>({d}%)}'},legend: {show: true,orient: 'vertical',left: 10},series: [{name: '访问来源',type: 'pie',radius: [0, '30%'],label: {position: 'inner'},labelLine: {show: false},selectedMode: 'single',data: [{name: '直达', value: 335, selected: true},{name: '营销广告', value: 679},{name: '搜索引擎', value: 1548}]}, {name: '访问来源',type: 'pie',radius: ['40%', '55%'],// 定制图形样式itemStyle: {// 圆角borderRadius: 10,borderColor: '#fff',borderWidth: 2,// 阴影shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'},label: {// 定制标签样式formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%}',backgroundColor: '#eee',borderColor: '#aaa',borderWidth: 1,borderRadius: 4,// 添加阴影效果shadowBlur: 3,shadowOffsetX: 2,shadowOffsetY: 2,shadowColor: '#999',padding: [0, 7],rich: {a: {color: '#999',lineHeight: 22,align: 'center'},abg: {backgroundColor: '#333',width: '100%',align: 'right',height: 22,borderRadius: [4, 4, 0, 0]},hr: {borderColor: '#aaa',width: '100%',borderWidth: 0.5,height: 0},b: {fontSize: 16,lineHeight: 33},per: {color: '#eee',backgroundColor: '#334455',padding: [2, 4],borderRadius: 2}}},data: [{value: 335, name: '直达'},{value: 310, name: '邮件营销'},{value: 234, name: '联盟广告'},{value: 135, name: '视频广告'},{value: 1048, name: '百度'},{value: 251, name: '谷歌'},{value: 147, name: '必应'},{value: 102, name: '其他'}]}]};if (option && typeof option == 'object') {myecharts.setOption(option);}
</script>
</body>
</html>

返回顶部

效果展示：

返回顶部

知识点小归纳：

定义图形组件样式

// 定制图形样式itemStyle: {// 圆角borderRadius: 10,    // 圆角定义，echarts5.0新版本可以borderColor: '#fff', // 组件边框颜色borderWidth: 2,      // 边框大小// 阴影shadowBlur: 10,      // 阴影模糊度shadowOffsetX: 0,    // 阴影水平偏移量shadowColor: 'rgba(0, 0, 0, 0.5)' // 阴影颜色},

定制标签样式 — 这部分初学可以不看，为了业务显示效果好看，也可以背下来作为模板

   label: {// 定制标签样式formatter: '{a|{a}}{abg|}\n{hr|}\n {b|{b}:}{c} {per|{d}%}',backgroundColor: '#eee',borderColor: '#aaa',borderWidth: 1,borderRadius: 4,// 添加阴影效果shadowBlur: 3,shadowOffsetX: 2,shadowOffsetY: 2,shadowColor: '#999',padding: [0, 7],rich: {a: {color: '#999',lineHeight: 22,align: 'center'},abg: {backgroundColor: '#333',width: '100%',align: 'right',height: 22,borderRadius: [4, 4, 0, 0]},hr: {borderColor: '#aaa',width: '100%',borderWidth: 0.5,height: 0},b: {fontSize: 16,lineHeight: 33},per: {color: '#eee',backgroundColor: '#334455',padding: [2, 4],borderRadius: 2}}},

去除定制标签

其实，嵌套环形饼图本质就是两个饼图，设置的内外圆半径不同，通过这种方法还可以实现3个、4个…嵌套图。

返回顶部

Echarts --- 可视化练习（pie06 --- 环形嵌套饼图）相关推荐

echarts嵌套饼图自动动画_使用百度echarts制作可视化大屏——制作一个双层饼图...
使用百度echarts制作可视化大屏--制作一个双层饼图发布时间:2018-06-12 16:24, 浏览次数:745 , 标签: echarts 实现一个两层嵌套的环形图,展示三个分类下各个品牌车 ...
使用Echarts制作动态嵌套饼图
笔者最近因为使用Echarts制作报表,参考了官方文档及某些博客,使用过程中有些想法,想将其中的一些记录下来,也希望能帮助到需要的人. 本例以嵌套的饼图为例.嵌套的饼图即为双层饼图,相比普通的饼图多了 ...
echarts笔记-2，嵌套饼图
嵌套饼图和单个饼图差别不大,需要之一的是,如果使用嵌套饼图,只能有一个标题和一个图例,因为虽然是两个饼图,但是是一个echarts实例需要注意的地方: 1. 注意外外部饼图和内部饼图的关系,如果外部 ...
Echarts --- 可视化练习（pie04 --- 饼图标签的对齐方式）
Echarts - 可视化练习(pie04 - 饼图标签的对齐方式) 人生路漫漫,其实人生路上所经历的挫折磨难,换个角度想,也并非全是坏事, 纵然结果不尽人意,但至少还是能让我们从中领悟到什么,能成长 ...
嵌套饼图_旭日图的效率，高到饼图都羡慕
在展示占比情况时,饼图是我们最常用的选择.但是,饼图只能展示单层数据的占比情况,在面对多层级数据时,我们真的要用10个饼图进行可视化吗?不用挠头苦思,今天我们就来看看多个饼图的组合升级版--旭日图是怎 ...
[Echarts可视化] 一.入门篇之简单绘制中国地图和贵州地区
最近发生了很多事情,去到了一个新环境学习.但是不论在哪里,我都需要不忘初心,坚持做自己喜欢的事情,在CSDN写博客.教学.爱娜.生活等等. 这篇文章主要是通过Echarts可视化介绍入 ...
Echarts可视化基础知识
Echarts 可视化基础知识 1.ECharts 简介 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表. 是一个JS插件性能好可流畅运行PC与移动设备兼容主 ...
利用Ajax实现数据的同步传输，从mysql中提取数据，通过echarts可视化
如何将mysql数据库中的方式通过echarts可视化呢,以下面这个简单的例子向大家进行演示: 步骤一:mysql的创表和插入数据,当然这些数据也可以是你通过爬虫抓取的. 步骤二: 创 ...
16、17、18_使用gridspec定义多子图,条形图（Bar plots）,分组条形图,堆叠条形图(Stacked bar chart),饼图（Pie plots）,甜甜圈图,嵌套饼图
16.使用gridspec定义多子图 16.1.图标题 17.条形图(Bar plots) 17.1.分组条形图 17.2.堆叠条形图(Stacked bar chart) 18.饼图(Pie plo ...

Echarts --- 可视化练习（pie06 --- 环形嵌套饼图）

Echarts — 可视化练习（pie06 — 环形嵌套饼图）

效果展示：

知识点小归纳：

Echarts --- 可视化练习（pie06 --- 环形嵌套饼图）相关推荐

最新文章

热门文章