python测试开发django-148.ECharts 生成环状图(饼图)

上海-悠悠

发布于 2021-10-20 11:36:06

1.4K0

发布于 2021-10-20 11:36:06

文章被收录于专栏：从零开始学自动化测试从零开始学自动化测试

前言

ECharts 是一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求。

ECharts下载与使用

可以在直接下载 echarts.min.js 并用 <script>标签引入。下载地址https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js 开发环境下可以使用源代码版本 echarts.js 并用 <script> 标签引入，源码版本包含了常见的错误提示和警告。下载地址https://cdn.staticfile.org/echarts/4.7.0/echarts.js

使用在线 CDN 方法: Staticfile CDN（国内） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js

生成环形饼图

首先定义options作为环状图的参数,options.series:系列数据列表列表。每个系列通过 type 决定自己的图表类型

series: 为数组形式，可以存放多组数据，当前只用到单环形式，series[0]对应的数据
name：图像名称
type：图像类型
radius：饼图的半径，基础饼状图只需写一个半径，环状图写2个半径
data：饼图数据数组

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>环状图</title>
    <!-- 引入 echarts.js -->
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
        // 初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
            series : [{
                    name: '测试报告',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: ['45%', '65%'],  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    data:[          // 数据数组，name 为数据项名称，value 为数据项值
                        {name:'通过', value:20},
                        {name:'失败', value:4},
                    ]}
            ]
        })
    </script>
</body>
</html>

显示效果

标签优化

label 设置外标签显示内容百分比 color 设置自定义颜色

  <script type="text/javascript">
        // 初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
            series : [{
                    name: '测试报告',
                    type: 'pie',    // 设置图表类型为饼图
                    radius: ['45%', '65%'],  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                    label: {
                        position: 'outside',
                        formatter: '{b}:{c} ({d}%)'
                    },
                    color: ['#00ff00', '#ff0000'],
                    data:[          // 数据数组，name 为数据项名称，value 为数据项值
                        {name:'通过', value:20},
                        {name:'失败', value:4},
                    ]}
            ]
        })
    </script>

显示效果

换行显示

           label: {
                        position: 'outside',
                        formatter: '用例数：{c} \n {b}率({d}%)'
                    }

显示效果

环内设置总数

在环形内，设置title属性，可以设置总数量

text 标题
subtext 副标题
x 水平居中
y 垂直居中
textStyle 标题字体样式
subtextStyle 副标题字体样式

<script type="text/javascript">
        // 初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
            title: {
                    text: '用例总数',
                    subtext: '24',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                            fontWeight: 'normal',
                            fontSize: 25,
                            color: '#00eeff'
                        }, // 标题
                    subtextStyle: {
                            fontWeight: 'normal',
                            fontSize: 28,
                            color: '#00eeff'
                        } // 副标题
                  },
            series : [{
                name: '测试报告',
                type: 'pie',    // 设置图表类型为饼图
                radius: ['45%', '65%'],  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                label: {
                    position: 'outside',
                    formatter: '用例数：{c} \n {b}率({d}%)'
                },
                color: ['#00ff00', '#ff0000'],
                data: [          // 数据数组，name 为数据项名称，value 为数据项值
                    {name: '通过', value: 20},
                    {name: '失败', value: 4}
                ]

            }]
        })
    </script>

显示效果

tooltip 和 legend

设置tooltip 和 legend

<script type="text/javascript">
        // 初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('main'));

        myChart.setOption({
            tooltip: {
                    trigger: 'item'
                  },
            legend: {
                    orient: 'vertical',
                    left: 'left'
                  },
            title: {
                    text: '用例总数',
                    subtext: '24',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                            fontWeight: 'normal',
                            fontSize: 25,
                            color: '#00eeff'
                        }, // 标题
                        subtextStyle: {
                            fontWeight: 'normal',
                            fontSize: 28,
                            color: '#00eeff'
                        } // 副标题
                  },
            series : [{
                name: '测试报告',
                type: 'pie',    // 设置图表类型为饼图
                radius: ['45%', '65%'],  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                label: {
                    position: 'outside',
                    formatter: '用例数：{c} \n {b}率({d}%)'
                },
                color: ['#00ff00', '#ff0000'],
                data: [          // 数据数组，name 为数据项名称，value 为数据项值
                    {name: '通过', value: 20},
                    {name: '失败', value: 4}
                ]

            }]
        })
    </script>

legend 显示水平方向一行居中

legend: {
    top: '5%',
    left: 'center'
  }

显示效果

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2021-10-11，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自从零开始学自动化测试微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度