echarts饼图：图例自定义、数值直观显示、标题位置

最新推荐文章于 2025-04-18 08:54:47 发布

猪儿猫儿狗儿

最新推荐文章于 2025-04-18 08:54:47 发布

阅读量1w

点赞数 2

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

本文链接：https://blog.youkuaiyun.com/wyl164778/article/details/118999300

版权

echarts 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何通过ECharts实现自定义图例、数值显示、标题位置，并提供了一段详细的代码示例。适合数据可视化初学者和开发者优化图表呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单暴力，亲测有效！！！
一、图例自定义
核心步骤是在option中添加legend对象
代码如下：

legend: {
    orient: "vertical",//图例的布局，水平布局、垂直布局
    type:'scroll',//是否添加滚动页码
    data:count,
    right:15,
    top:'middle',
    icon:'circle',
    itemWidth: 8,//图例宽度
    itemHeight: 8,//图例高度
    textStyle: {//图例字体样式
        color: "#000",
        fontSize: 14,
        fontFamily: "微软雅黑"
    }
}

二、数值直观显示
核心步骤是在option下series中添加itemStyle对象
代码如下：

//直观显示饼图数值
itemStyle:{
    normal:{
        label:{
            show: true,
            formatter: '{b} : {c}家 ({d}%)'//显示格式
        },
        labelLine :{show:true}
    }
}

三、标题位置
核心步骤是在option下title中定义x,y属性
代码如下：

x:'center',
y:'bottom'

四、全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/echarts.min.js"></script>
    <script src="../js/jquery.js"></script>
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
<script>
    $(function () {
        var year=2021;
        var count=[
            {value: 160, name: '山林类'},
            {value: 140, name: '河湖湿地类'},
            {value: 36, name: '滨海类'},
            {value: 55, name: '温泉类'},
            {value: 6, name: '冰雪类'},
            {value: 9, name: '沙漠草原类'},
            {value: 20, name: '古城古镇类'},
            {value: 44, name: '主题文化类'},
            {value: 26, name: '主题乐园类'},
            {value: 24, name: '乡村田园类'}
        ]
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: year+'年全国旅游度假区分类型数量状况',
                //控制标题位置
                x:'center',
                y:'bottom'
            },
            //鼠标移入提示
            tooltip: {
                trigger: 'item',
                //控制提示格式
                formatter:'{b}:{c}家({d}%)'
            },
            toolbox: {
                show: true,
                feature: {
                    //数据视图按钮
                    dataView: {readOnly: false},
                    //另存为图片按钮
                    saveAsImage: {}
                }
            },
            legend: {
                orient: "vertical",//图例的布局，水平布局、垂直布局
                type:'scroll',
                data:count,
                right:15,
                top:'middle',
                icon:'circle',
                itemWidth: 8,//图例宽度
                itemHeight: 8,//图例高度
                textStyle: {//图例字体样式
                    color: "#000",
                    fontSize: 14,
                    fontFamily: "微软雅黑"
                }
            },
            series: [
                {
                    type: 'pie',
                    data: count,
                    radius:'50%',
                    //直观显示饼图数值
                    itemStyle:{
                        normal:{
                            label:{
                                show: true,
                                formatter: '{b} : {c}家 ({d}%)'
                            },
                            labelLine :{show:true}
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    })
</script>
</body>
<div id="main" class="chart"></div>
</html>