Echarts --- 可视化练习（pie04 --- 饼图标签的对齐方式）-CFANZ编程社区

Echarts — 可视化练习（pie04 — 饼图标签的对齐方式）

Echarts --- 可视化练习（pie04 --- 饼图标签的对齐方式）_可视化

人生路漫漫，其实人生路上所经历的挫折磨难，换个角度想，也并非全是坏事，
　　纵然结果不尽人意，但至少还是能让我们从中领悟到什么，能成长些许，让我们阅历更加丰富。
　　面对失败，切勿消极秃废，遇到低谷，切勿怨天尤人，无论生活给予我们什么，无论每天的日子是快乐还是苦闷，都应微笑来迎接每一天，只要心态好，总能遇见美好，只要不消沉，总能找到出口。
　　生活中，所遭遇的磨难，其实也并非一无是处，它们教会我们坚强，教会我们更勇敢面对生活。教会我们面对生活中给予的种种，不逃避，不放弃，不退缩。
　　人活着不易，无论生活是苦是乐，都不应失去面对生活的热情，都应坦然从容地面对一切，人这一生，唯有心态好，做起事来才会顺心，唯有心态好，生活才会舒心。

Flask：

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

app = Flask(__name__)
@app.route('/')
def index():
    return render_template("pie04.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 id="container" style="height:"></div>
<script type="text/javascript" src="../static/echarts_5.0.min.js"></script>
<script type="text/javascript">var data = [
        {name: 'Apples', value: 70},
        {name: 'Strawberries', value: 68},
        {name: 'Bananas', value: 48},
        {name: 'Oranges', value: 40},
        {name: 'Pears', value: 32},
        {name: 'Pineapples', value: 27},
        {name: 'Grapes', value: 18}
    ];

    var dom = document.getElementById("container");
    var myecharts = echarts.init(dom);
    var option = null;
    option = {
        title: [
            {
                text: '饼图标签的对齐方式'
            }, {
                subtext: 'alignTo:none',
                left: '16.67%',
                top: '75%',
                textAlign: 'center'
            }, {
                subtext: 'alignTo:labelLine',
                left: '50%',
                top: '75%',
                textAlign: 'center'
            }, {
                subtext: 'alignTo:edge',
                left: '83.33%',
                top: '75%',
                textAlign: 'center'
            }
        ],
        series: [
            {
                type: 'pie',
                radius: '25%',
                center: ['50%', '50%'],
                data: data,
                animation: true,      // 是否开启动画,鼠标悬停饼图时动画
                label: {
                    position: 'outer',
                    alignTo: 'none',  // 'none'（默认值）：label line 的长度为固定值，分别为 labelLine.length 及 labelLine.length2
                    bleedMargin: 5
                },
                left: 0,
                right: '66.6667%',
                top: 0,
                bottom: 0
            }, {
                type: 'pie',
                radius: '25%',
                center: ['50%', '50%'],
                data: data,
                animation: true,
                label: {
                    position: 'outer',
                    alignTo: 'labelLine',  // 'labelLine'：label line 的末端对齐，其中最短的长度由 labelLine.length2 决定
                    bleedMargin: 5         // 文字的出血线大小，超过出血线的文字将被裁剪为 '...'。
                            // 仅当 label.position 为 'outer' 并且 label.alignTo 为 'none' 或 'labelLine' 的情况有效
                },
                left: '33.3333%',
                right: '33.3333%',
                top: 0,
                bottom: 0
            }, {
                type: 'pie',
                radius: '25%',
                center: ['50%', '50%'],
                data: data,
                animation: false,
                label: {
                    position: 'outer',
                    alignTo: 'edge',    // 'edge'：文字对齐，文字的边距由 label.margin 决定。
                    Margin:20
                },
                left: '66.6667%',
                right: 0,
                top: 0,
                bottom: 0
            }
        ]

    };
    if (option && typeof option == 'object') {
        myecharts.setOption(option);
    }</script>
</body>
</html>

效果展示：

Echarts --- 可视化练习（pie04 --- 饼图标签的对齐方式）_flask_02

知识点小归纳：

animation: true,      // 是否开启动画,鼠标悬停饼图时动画

animation动画效果

: {
    position: 'outer',
    alignTo: 'labelLine',  // 'labelLine'：label line 的末端对齐，其中最短的长度由 labelLine.length2 决定
    bleedMargin: 5         // 文字的出血线大小，超过出血线的文字将被裁剪为 '...'。
            // 仅当 label.position 为 'outer' 并且 label.alignTo 为 'none' 或 'labelLine' 的情况有效
}

label: {
    position: 'outer',
    alignTo: 'none',  // 'none'（默认值）：label line 的长度为固定值，分别为 labelLine.length 及 labelLine.length2
    bleedMargin: 5
}

label: {
    position: 'outer',
    alignTo: 'edge',    // 'edge'：文字对齐，文字的边距由 label.margin 决定。
    Margin:20
}