echarts 南丁格尔玫瑰图

最新推荐文章于 2024-08-28 17:32:59 发布

一条java闲鱼

最新推荐文章于 2024-08-28 17:32:59 发布

阅读量2.9k

点赞数 1

分类专栏： echarts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/m0_46522108/article/details/121309963

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

echarts 南丁格尔玫瑰图

roseType: ‘radius’
tooltip -> formatter: “{b}:{c}({d}%)” ,

折线图，柱状图只有 "{b}:{c}”

option = {
        title : {
            text: '所有城市招聘数据的平均工资 vs “大数据”相关职位所有城市招聘数据的平均工资',
            subtext: '南丁格尔玫瑰图',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{b}:{c}({d}%)"      //当鼠标移动到图形 显示数据(格式): 佛山（1111） 10%
        },
        legend: {
            x : 'center',
            y : 'bottom'
        },
                color:[
            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                             '#668ffe','#00ca54','#00dbfa','#f3006a','#60C0DD',
                             '#d714b7','#84433c','#f490f3','#000000','#26C0C0'],
        series : [
            {
                type:'pie',
                radius : [20, 110],     //图像的大小
                center : ['25%', '50%'],    //图形的位置
                roseType : 'radius',        //南丁格尔玫瑰图的参数
                data:[
                  { value: 1048, name: 'Search Engine' },
                  { value: 735, name: 'Direct' },
                  { value: 580, name: 'Email' },
                  { value: 484, name: 'Union Ads' },
                  { value: 300, name: 'Video Ads' }
                ],
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
            },
            {
                type:'pie',
                radius : [30, 110],
                center : ['75%', '50%'],
                roseType : 'area',
                 data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                  ],
                  emphasis: {
                    itemStyle: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                  }
            }
        ]
    };