• 四分之三为百分百数据效果


     www(){
                var myChar = this.$echarts.init(this.$refs.wwwww);
                var data = [{
                    name: "景区",
                    value: 29.1
                },
                {
                    name: "酒店",
                    value: 13.7
                },
                {
                    name: "乡村",
                    value: 8.2
                },
                {
                    name: "餐饮",
                    value: 6.8
                }
                ];
                var arrName = getArrayValue(data, "name");
                var arrValue = getArrayValue(data, "value");
                var sumValue = eval(arrValue.join('+'));
                var objData = array2obj(data, "name");
                var optionData = getData(data);
                function getArrayValue(array, key) {
                    var key = key || "value";
                    var res = [];
                    if (array) {
                        array.forEach(function (t) {
                            res.push(t[key]);
                        });
                    }
                    return res;
                }
    
                function array2obj(array, key) {
                    var resObj = {};
                    for (var i = 0; i < array.length; i++) {
                        resObj[array[i][key]] = array[i];
                    }
                    return resObj;
                }
    
                function getData(data) {
                    var res = {
                        series: [],
                        yAxis: []
                    };
                    for (let i = 0; i < data.length; i++) {
                        res.series.push({
                            name: '景点',
                            type: 'pie',
                            clockWise: false, //顺时加载
                            hoverAnimation: false, //鼠标移入变大
                            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
                            center: ["40%", "55%"],
                            label: {
                                show: false
                            },
                            itemStyle: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false
                                },
                                borderWidth: 5,
                            },
                            data: [{
                                value: data[i].value,
                                name: data[i].name
                            }, {
                                value: sumValue - data[i].value,
                                name: '',
                                itemStyle: {
                                    color: "rgba(0,0,0,0)",
                                    borderWidth: 0
                                },
                                tooltip: {
                                    show: false
                                },
                                hoverAnimation: false
                            }]
                        });
                        res.series.push({
                            name: '',
                            type: 'pie',
                            silent: true,
                            z: 1,
                            clockWise: false, //顺时加载
                            hoverAnimation: false, //鼠标移入变大
                            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
                            center: ["40%", "55%"],
                            label: {
                                show: false
                            },
                            itemStyle: {
                                label: {
                                    show: false,
                                },
                                labelLine: {
                                    show: false
                                },
                                borderWidth: 5,
                            },
                            data: [{
                                value: 7.5,
                                itemStyle: {
                                    color: "rgba(42,58,111,0.5)",   //默认圆的颜色
                                    borderWidth: 0
                                },
                                tooltip: {
                                    show: false
                                },
                                hoverAnimation: false
                            }, {
                                value: 2.5,
                                name: '',
                                itemStyle: {
                                    color: "rgba(0,0,0,0)",
                                    borderWidth: 0
                                },
                                tooltip: {
                                    show: false
                                },
                                hoverAnimation: false
                            }]
                        });
                        res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
                    }
                    return res;
                }
    
                var option = {
                    legend: {
                        show: true,
                        top: "10%",
                        left: '45%',
                        // icon: "circle",
                        data: arrName,
                        itemWidth: 14, 
                        itemHeight: 6,
                         50,
                        padding: [0, 1],
                        itemGap: 8,
                        formatter: function (name) {
                            return "{title|" + name + "}{value|" + (objData[name].value) + "万元}"
                        },
                        textStyle: {
                            rich: {
                                title: {
                                    fontSize: 14,
                                    lineHeight: 14,
                                    color: "rgba(255,255,255,.85)"
                                },
                                value: {
                                    fontSize: 14,
                                    lineHeight: 18,
                                    color: "rgba(255,255,255,.85)"
                                }
                            }
                        },
                    },
                    tooltip: {
                        show: true,
                        trigger: "item",
                        formatter: "{a}<br>{b}:{c}万元({d}%)"
                    },
                    color: ['#F40204', '#FF7E00', '#E5CE10', '#00A1E4'],
                    grid: {
                        top: '20%',
                        bottom: '48%',
                        left: "50%",
                        right: '0%',
                        containLabel: false
                    },
                    yAxis: [{
                        type: 'category',
                        inverse: true,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            interval: 0,
                            inside: true,
                            textStyle: {
                                color: "#fff",
                                fontSize: 10,
                            },
                            show: false
                        },
                        data: optionData.yAxis
                    }],
                    xAxis: [{
                        show: false
                    }],
                    series: optionData.series
                };
                myChar.setOption(option);
            }
    

      

  • 相关阅读:
    20180604_Myeclipse下配置SVN报错问题 svn
    20180603_升级Win10后,远程连接桌面连接,出现身份验证错误!
    20180603_navicat 连接sqlserver提示要安装 sql server native client
    VB.net程序实现分页
    多线程Demo
    多线程Demo VB.net
    SQLServer数据库子结构
    SQLServer数据库常用命令
    传播路径图调查2013年初
    拾遗
  • 原文地址:https://www.cnblogs.com/xhrr/p/11958355.html
Copyright © 2020-2023  润新知