echarts饼图中心显示百分比（只显示一个）

最新推荐文章于 2023-12-09 14:41:17 发布

weixin_30552811

最新推荐文章于 2023-12-09 14:41:17 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/webqiand/articles/11250797.html

本文介绍了如何在Echarts中配置饼图，使其只显示一个中心的百分比值，同时涵盖了饼图和柱状图的颜色设定方法，帮助读者理解Echarts的图表样式定制。

var option = {
        tooltip: {
            trigger: "item",
            formatter: "{b}:<br/> {c} ({d}%)"
        },
        legend: {
            orient: "horizontal",
            left: "left",
            data: ['达标率', '未达标率'],
            selectedMode: false,
            formatter: "{name}"
        },
        series: [{
            name: "数据来源",
            type: 'pie',
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    show: false,
                    textStyle: {
                        fontSize: '20',
                        fontWeight: 'bold'
                    }
                }
            },
            labelLine: {
                normal: {
                    show: true
                }
            },
            data: [{ name: '达标率', value: weighted_price_, itemStyle: {
                    normal: {
                        color: '#37a76f',
                        label: {
                            show: true,
                            position: 'center',
                            formatter: '{b}:{d}%',
                            textStyle: {
                                baseline: 'bottom',
                                fontSize: '16'
                            }
                        },
                        labelLine: {
                            show: true
                        }
                    }
                } }, { name: '未达标率', value: not_proce, itemStyle: {
                    normal: {
                        color: '#d9d9d9'
                    }
                } }]
        }]
    };

echart如何设置饼图的颜色以及柱状图颜色

1.设置饼图颜色

var  option = {

                            tooltip: {

                                trigger: 'item',

                                formatter: "{a} <br/>{b}: {c} ({d}%)"

                            },

                            //设置饼图的颜色

                            color:['#f6da22','#bbe2e8','#6cacde'],

                            legend: {

                                orient: 'vertical',

                                x: 'left',

                                data:['柴油','汽油','附属油'],

                                show:false

                            },

                            series: [

                                {

                                    name:'交易量',

                                    type:'pie',

                                    radius: ['22%', '40%'],

                                    data:[

                                        {value:35, name:'柴油35%'},

                                        {value:20, name:'汽油20%'},

                                        {value:45, name:'附属油45%'}

                                    ],

                                    label: {

                                        normal: {

                                            textStyle: {

                                                color: '#333'

                                            }

                                        }

                                    },

                                    

                                }

                                ]

                            };

2.设置柱状图颜色

data:[5, 6, 4, 2, 7, 8, 6, 5, 7, 5, 6, 8, 4, 6, 5, 6],

itemStyle:{
       normal:{
         color:'#32CD32',
         }
  }

转载于:https://www.cnblogs.com/webqiand/articles/11250797.html