echarts使用不显示图例legend

直接说结论:图例legend中data元素的数据类型要与series中的data 数据里name的数据类型保持一致

如下:series中的data 数据里name数据的数据类型为 number,  legend data的数据类型为string 数据类型不一致

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="user/jquery.js"></script>
<script type="text/javascript" src="user/echarts.min.js"></script>
<body>
<div id="chartmain" style="width:600px; height: 400px;"></div>
<script>
    //模拟后台传入数据 name的数据类型为 number
    var arr = [{value:500,name:1},{value:100,name:2},{value:1500,name:3},{value:500,name:4},{value:2000,name:5}];

    //var arr = [{value:500,name:"1"},{value:100,name:"2"},{value:1500,name:"3"},{value:500,name:"4"},{value:2000,name:"5"}];
    var option = {
        title : {
            text: '薪水支出信息统计',
            subtext: '报销统计',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['1','2','3','4','5']//此时 data中元素的数据类型为 string
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:arr,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    //初始化echarts实例
    var myChart = echarts.init($('#chartmain')[0]);

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);



</script>
</body>
</html>
 

 

 

数据保持一致后:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="user/jquery.js"></script>
<script type="text/javascript" src="user/echarts.min.js"></script>
<body>
<div id="chartmain" style="width:600px; height: 400px;"></div>
<script>
    
   // var arr = [{value:500,name:1},{value:100,name:2},{value:1500,name:3},{value:500,name:4},{value:2000,name:5}];
   //模拟后台传入数据 name的数据类型为 string
    var arr = [{value:500,name:"1"},{value:100,name:"2"},{value:1500,name:"3"},{value:500,name:"4"},{value:2000,name:"5"}];
    var option = {
        title : {
            text: '薪水支出信息统计',
            subtext: '报销统计',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['1','2','3','4','5']//此时 data中元素的数据类型为 string
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:arr,
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    //初始化echarts实例
    var myChart = echarts.init($('#chartmain')[0]);

    //使用制定的配置项和数据显示图表
    myChart.setOption(option);



</script>
</body>
</html>

图例正常显示:

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页