zoukankan      html  css  js  c++  java
  • echarts自制多层环形图

    效果如下:

     

    代码如下:

    var data = [{
            name: "博士及以上",
            value: 0.2
        },
        {
            name: "硕士及以上",
            value: 0.3
        },
        {
            name: "本科及以上",
            value: 1
        },
        {
            name: "高中",
            value: 0.1
        },
        {
            name: "初中及以下",
            value: 0.1
        },
        {
            name: "其他",
            value: 0.8
        }
    ];
    var dataStyle = { 
        normal: {
            label: {show:false},
            labelLine: {show:false},
            shadowBlur: 40,
            shadowColor: 'rgba(40, 40, 40, 0.5)',
        }
    };
    var placeHolderStyle = {
        normal : {
            color: 'rgba(0,0,0,0)',
            label: {show:false},
            labelLine: {show:false}
        },
        emphasis : {
            color: 'rgba(0,0,0,0)'
        }
    };
    var legendData=[];
    function getData(data) {
        var sortData=data.sort((a,b)=>{
            return b.value-a.value
        });
        var res = [];
        for (let i = 0; i < sortData.length; i++) {
            legendData.push(sortData[i].name);
            res.push({
                type: 'pie',
                clockWise: false, //顺时加载
                hoverAnimation: false, //鼠标移入变大
                radius: [200 - i * 20, 220 - i * 20],
           //radius: [65 - i * 15 + '%', 57 - i * 15 + '%'], itemStyle: dataStyle, data: [{ value: sortData[i].value, name: sortData[i].name }, { value:
    1 - sortData[i].value, name:'invisible', itemStyle: placeHolderStyle, }] }); } return res; } option = { backgroundColor: '#f4f2e3', color: ['#85b6b2', '#6d4f8d','#cd5e7e', '#e38980','#f7db88'], tooltip : { show: true, formatter: "{b} : {c} ({d}%)" }, legend: { itemGap:12, top: '87%', data:legendData }, toolbox: { show : true, feature : { saveAsImage : {show: true} } }, series : getData(data) };
  • 相关阅读:
    面向对象之三个基本特征(javaScript)
    webpack初探
    浅谈Promise
    Vue Mixin 与微信小程序 Mixins 应用
    C#入门基础语法知识点总结(变量、运算符、类型转换)
    C#入门基础语法知识点总结(.NET开发环境及代码编写规范)
    触发器练习三
    触发器练习二
    触发器练习一
    存储过程练习二
  • 原文地址:https://www.cnblogs.com/qtx-/p/11677562.html
Copyright © 2011-2022 走看看