zoukankan      html  css  js  c++  java
  • highcharts中的环形图

    环形图如下效果:

     代码:

    that.options = {
                chart: {
                    type: 'pie',
                    backgroundColor: 'transparent',
                    color: '#fff',
                    // height: that.torem(500)
                },
                title: {
                    text: null
                },
                subtitle: {
                    text: null
                },
    
                plotOptions: {
                    pie: {
                        colors: ['#dba630', '#46ebce', '#b43cfc', '#3b7af8', '#29b00f'],
                        borderColor: 'transparent',
                        dataLabels: {
                            // 环形图内部展示
                            enabled: false
                        },
                        cursor: 'pointer',
                        showInLegend: true
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    padding: that.torem(80),
                    itemStyle: {
                        color: '#fff',
                        fontSize: that.torem(28)
                    },
                    itemDistance: that.torem(100),
                    lineHeight: that.torem(140),
                    labelFormatter: function() {
                        return `${this.name}xa0xa0xa0${this.y}%`;
                    }
                },
                tooltip: {
                    headerFormat: '',
                    pointFormat: '<span style="color:{point.color}">u25CF</span> <b> {point.name}:</b>' + '<b>{point.y}%</b>'
                },
                series: [
                    {
                        innerSize: '70%',
                        zMin: 0,
                        data: dataArr
                    }
                ]
            };
  • 相关阅读:
    Java静态代理学习
    Java反射学习三
    Java反射学习二
    Java反射学习一
    Java反射学习四
    linux下vim命令详解
    linux安装jdk
    转 知道这20个正则表达式,能让你少写1,000行代码
    excel函数2
    excel函数
  • 原文地址:https://www.cnblogs.com/florazeng/p/13784669.html
Copyright © 2011-2022 走看看