echarts 圆点、百分比

最新推荐文章于 2023-07-15 11:09:54 发布

晚星@

最新推荐文章于 2023-07-15 11:09:54 发布

阅读量276

点赞数

分类专栏： echarts图表文章标签： echarts

本文链接：https://blog.csdn.net/asd577007722/article/details/118155529

版权

echarts图表专栏收录该内容

6 篇文章 0 订阅

订阅专栏

显示百分比 formatter

option = {
    tooltip: {
        trigger: 'item',
        formatter:  '{a} <br/>{b} : {c} <br/>百分比 : {d}%' 
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};

在这里插入图片描述
显示鼠标放上后的圆点 function(params)

option = {
    tooltip: {
        trigger: 'item',
        formatter:   function(params){
             var res = "<div><p>"  + params.name + "</p></div>";
             res +="<p>" + params.marker  + params.name + ":" + params.value + "</p>";
             return res;
        }
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
};