Echarts --- 可视化练习（pie03 --- 环形图）-CFANZ编程社区

Echarts — 可视化练习（pie03 — 环形图）

Echarts --- 可视化练习（pie03 --- 环形图）_html

在匆匆流逝的时光里，在悠悠老去的岁月中，无论每天迎接我们的是风和日丽，还是阴雨连绵，我们依然要有一颗感恩的心。感恩岁月，感恩生命路上所有的相遇，也要感恩亲爱的自己！
　　感恩岁月，赐予我们一份美丽的缘分，使我们遇见了一些温暖的人。即使是寒风凛冽的冬日，依然能感受到春风拂面的温暖；即使在伤心迷茫之时，他们如花灿烂的笑容和友好的关爱，足以温润我们冰冷的心房，使我们笑逐颜开。
　　感谢自己，即使遇见一些冷漠无情，自私自利的人，终于学会了沉默不语，学会了淡然置之。物以类聚，人以群分。人各有志，不可强求。志不同道不合者，不足为谋。大路朝天各走一边，自己的人生自己做主，自己的生活靠自己去描画。
　　感恩岁月，让我们遇见一些善良的人。当我们彷徨无助之时，他们不会视而不见，而会给予一份善意的微笑和鼓励，给予一份真心的支持和帮助，给予一份拨开云雾见青天的力量，尤其会给予一双有力的大手，及时地拉一把。
　　感谢自己，面对那些不懂得善待和感恩的人，不会放在心上了。看破不说破，一笑而过，风轻云淡。善良，不仅是付出自己的一份爱心，而且是给自己留下的后路。心存感恩的人，从来不会吃亏，终会有一束爱的光芒，照亮我们的前程。

Flask:

# -*- coding: utf-8
#  @Time    : 2020/12/10 14:33
#  @Author  : ZYX
#  @File    : pie03_doughnut.py
# @software: PyCharm
from flask import Flask,render_template

app = Flask(__name__)
@app.route('/')
def index():
    return render_template("pie03.html")
if __name__ == '__main__':
    app.run(debug=True)

HTML:

<!DOCTYPE html>
<html lang="en" style="height:">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body style="height:">
<div style="height:" id="container"></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 = {
        tooltip: {
            trigger: 'item',
            formatter: '{a}<br/> {b}:{c} ({d}%) '
        },
        grid: {
            top: '5%',
            bottom: '3%',
            left: '4%',
            right: '4%',
            containLabel: true
        },
        legend: {
            show: true,
            orient: 'vertical',
            left: 10

        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,    // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠
                itemStyle: {                 // 设置每一部分为圆角   Echarts 5 新特性
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 5
                 },
                label: {
                    show: false,             // 设置标签不显示
                    position: 'center'
                },
                emphasis: {                  // 高亮的扇区和标签样式
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ]
            }
        ]
    };
    if (option && typeof option == 'object') {
        myecharts.setOption(option);
    }</script>
</body>
</html>

效果展示：

Echarts --- 可视化练习（pie03 --- 环形图）_可视化_02

知识点小归纳：

series属性

avoidLabelOverlap: false,    // 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠

itemStyle: {                 
      borderRadius: 10,      // 设置每一部分为圆角   Echarts 5 新特性
      borderColor: '#fff',
      borderWidth: 5
}

emphasis: {                  // 高亮的扇区和标签样式
   label: {
          show: true,
          fontSize: '30',
          fontWeight: 'bold'
      }
}