zoukankan      html  css  js  c++  java
  • echarts环形图如何添加层圆圈/环形线

            Circlelinechart(){
                let myChart = echarts.init(document.getElementById("Circlechart"));       
                let option = {
                    color: ['#23649e', '#2e7bad', '#1dc499', '#4da7c1', '#65b5c2', "rgba(250,250,250,0.3)"],
                    grid: {
                        left: 0,
                        // right: 0,
                        bottom: 0,
                        top:0,
                        containLabel: true
                    },
                    // grid: {
                    //     bottom: 150,
                    //     left: 100,
                    //     right: '10%'
                    // },
                    legend: {
                        orient: 'vertical',
                        top: "middle",
                        right: "12%",
                        textStyle: {
                            color: '#788288',
                            fontSize: 13,
                        },
                        icon: 'roundRect',
                        data: [{"name": "1","value": 10}, 
                                {"name": "2","value": 10}, 
                                { "name": "3","value": 10}, 
                                {"name": "4","value": 10}, 
                                {"name": "5","value": 10},  ],
                    },
                    series: [
                        // 主要展示层的
                        {
                            radius: ['30%', '61%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            label: {
                                normal: {
                                show: true,
                                formatter: "{c}%",
                                textStyle: {
                                    fontSize: 13,
                                },
                                position: 'outside'
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: true,
                                    length: 20,
                                    length2: 35
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            name: "民警训练总量",
                            data: [{"name": "1","value": 10}, 
                                {"name": "2","value": 10}, 
                                { "name": "3","value": 10}, 
                                {"name": "4","value": 10}, 
                                {"name": "5","value": 10},  ],
                        },
                        // 边框的设置
                        {
                            radius: ['30%', '34%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            animation: false,
                            tooltip: {
                                show: false
                            },
                            data: [{
                                value: 1,
                                itemStyle: {
                                    color: "rgba(250,250,250,0.3)",
                                },
                            }],
                        }, {
                            name: '外边框',
                            type: 'pie',
                            clockWise: false, //顺时加载
                            hoverAnimation: false, //鼠标移入变大
                            center: ['50%', '50%'],
                            radius: ['65%', '65%'],
                            label: {
                                normal: {
                                    show: false
                                }
                            },
                            data: [{
                                value: 9,
                                name: '',
                                itemStyle: {
                                    normal: {
                                        borderWidth: 2,
                                        borderColor: '#61bad3'
                                    }
                                }
                            }]
                        },
                    ]
                };
                myChart.setOption(option);
            },

    转自于:https://blog.csdn.net/qq_42177730/article/details/100514169

  • 相关阅读:
    Android开机自启动应用
    扫码登录原理
    前端性能优化
    关于android推送的一些心得
    抓包工具Fiddler及iphone设置
    Node.js介绍、优势、用途
    Yapi本地化部署及接口调试(亲测)
    前后端分离,几个常用的API管理系统
    WebGL之Threejs概述
    Eclipse汉化
  • 原文地址:https://www.cnblogs.com/Ao-min/p/13444958.html
Copyright © 2011-2022 走看看