zoukankan      html  css  js  c++  java
  • echarts实现环形图

     
    //来自一个大佬的恩赐
    var pass_rate = 70,average = 60,total = 100;
    option = {
            tooltip: {
                show:false,
                trigger: 'item',
                formatter: "{a} : {c} ({d}%)"
            },
            //  color: ['#85b6b2', '#6d4f8d'],
             color: ['rgb(255,159,127)', 'rgb(50,197,233)'],
             legend: {
                orient: 'vertical',
                x: '35%',
                top:'27%',
                itemHeight: 10,//图例的高度
                itemGap:8,//图例之间的间距 
                data:['通过率'+pass_rate+'%','平均值'+average+'%']
                //图例的名字需要和饼图的name一致,才会显示图例
            },
            series: [
                {
                    name:'通过率'+pass_rate+'%',
                    type:'pie',
                    radius: ['40%', '45%'],
                    //环的位置
                    label: {
                       show: false,
                       position: 'center',
                        // normal: { // 显示的位置
                        //     position: 'inner'
                        // }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    data:[
                        {
                          value:pass_rate, //需要显示的数据
                          name: '通过率'+pass_rate+'%',
                          itemStyle: {
                            normal: {
                             color: 'rgb(255,159,127)'
                            }
                          }
                        },
                        {
                          value:total-pass_rate, 
                          //不需要显示的数据,颜色设置成和背景一样
                          itemStyle: {
                            normal: {
                             color: 'transparent'
                            }
                          }
                       }
                    ]
                },
                {
                    name:'平均值'+average+'%',
                    type:'pie',
                    radius: ['30%', '35%'],
                    label: {
                       show: false,
                       position: 'center',
                        // normal: {
                        //     position: 'inner'
                        // }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    data:[
                        {   name:'平均值'+average+'%',
                            value:average, 
                            itemStyle: {
                                normal: {
                                 color: 'rgb(50,197,233)'
                                }
                            } 
                        },
                       {
                            value:total-average, 
                            itemStyle: {
                                normal: {
                                    color: 'transparent'
                                }
                             }
                       }
                    ]
                }
            ]
        };
    

      

    样式图例:
                     

  • 相关阅读:
    Android ANR原因以及开发时如何预防
    Nmon工具的使用以及通过nmon_analyse生成分析报表
    LInux在线安装JDK
    linux使用JMETER进行分布式压力测试
    Jmeter-调整占用内存解决内存溢出
    参数化之利用CSV Data Set Config从文件读取参数并关联变量
    JMETER 定时器 之 常数吞吐量定时器
    【Jmeter】Jmeter聚合报告分析
    Nmon的安装及使用
    MySQL CURDATE() 函数
  • 原文地址:https://www.cnblogs.com/wasbg/p/13050415.html
Copyright © 2011-2022 走看看