echarts修改图例文字及样式

最新推荐文章于 2024-09-12 11:56:14 发布

Misnice

最新推荐文章于 2024-09-12 11:56:14 发布

阅读量8.3k

点赞数 1

分类专栏： ECharts 文章标签： echarts 数据可视化 echarts图例文字修改 echarts图例样式修改 echarts图例

本文链接：https://blog.csdn.net/Misnice/article/details/108450628

版权

ECharts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

legend属性就是用来修改图例样式的

 
var data = [
            {value:40, name:'在线'},
            {value:20, name:'离线'},
            {value:40, name:'异常'}
        ]
 
option = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    //修改图例样式
    legend: {
                orient: 'vertical',  //图例列表的布局朝向（垂直排列）
                right:100,
                y: 'center',
                itemGap:30,
                itemWidth:8,
                padding:10,
                textStyle:{
                    fontSize: 12
                },
                align:'left',
                data: [
                    {
                        name:'在线',
                        icon:'circle'
                    },
                    {
                        name:'离线',
                        icon:'circle'
                    },{
                        name:'异常',
                        icon:'circle'
                    }
                ],
                formatter:  function(name){
                    var total = 0;
                    var target;
                    for (var i = 0, l = data.length; i < l; i++) {
                    total += data[i].value;
                    if (data[i].name == name) {
                        target = data[i].value;
                        }
                    }
                    var arr = [
                        '{a|'+name+' :}{b|'+((target/total)*100).toFixed(2)+'%}'
                        
                    ]
                    return arr.join('\n')
                },
                textStyle:{
                    rich:{
                        a:{
                            fontSize:20,
                            align:'left',
                            padding:[0,0,0,10]
                        },
                        b:{
                            fontSize:20,
                        
                            align:'right',
                            padding:[0,0,0,10],
                            lineHeight:25
                        }
                    }
                },
               backgroundColor: "#fff"
    },
    series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    radius: [50, 80],
                    center: ['50%', '50%'],
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [
                        {
                            value: 40,
                            name: '在线',
                            itemStyle: { normal: { color: "gray" } }
                        },
                        { 
                            value: 20, 
                            name: '离线', 
                            itemStyle: { normal: { color: "blue" } } },
                        { 
                            value: 40, 
                            name: '异常',
                            itemStyle: { normal: { color: "green" } } }
                    ]
                }
            ]
 
};

效果图

官网legend属性详细介绍

https://echarts.apache.org/zh/option.html#legend

legend属性参数简单介绍

 legend: {
        orient: 'vertical',
        x:'right',      //可设定图例在左（left）、右（right）、居中（center）、填写数字（填写100代表的是100px）
        y:'center',     //可设定图例在上（top）、下（bottom）、居中（center）、填写数字（填写100代表的是100px）
        padding:[0,50,0,0],   //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
        data: ['在线','离线','异常']
    },