zoukankan      html  css  js  c++  java
  • python测试开发django-148.ECharts 生成环状图(饼图)

    前言

    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=" 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} 
     {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} 
     {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} 
     {b}率({d}%)'
                    },
                    color: ['#00ff00', '#ff0000'],
                    data: [          // 数据数组,name 为数据项名称,value 为数据项值
                        {name: '通过', value: 20},
                        {name: '失败', value: 4}
                    ]
    
                }]
            })
        </script>
    

    legend 显示水平方向一行居中

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

    显示效果

  • 相关阅读:
    js 获取浏览器版本号
    怎样写具体设计文档
    android PreferenceScreen使用笔记
    支持向量机通俗导论(理解SVM的三层境地)
    算法导论 第6章 堆排序(简单选择排序、堆排序)
    人脸识别算法初次了解
    循环队列
    ubuntu 下操作文件夹,出现Permission denied的解决的方法
    JFreeChart的使用
    隐藏Activity标题栏
  • 原文地址:https://www.cnblogs.com/yoyoketang/p/15387378.html
Copyright © 2011-2022 走看看