解决echarts饼图显示百分比，和显示内容字体及大小,如何给eCharts饼图区域指定颜色

最新推荐文章于 2024-08-06 16:03:00 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-08-06 16:03:00 发布

阅读量5.4w

点赞数 8

分类专栏： eCharts

本文链接：https://blog.csdn.net/Guoyu1_/article/details/87261793

版权

eCharts 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

解决echarts饼图显示百分比，和显示内容字体及大小

// 基于准备好的dom，初始化echarts实例
var pieEchart = echarts.init(document.getElementById('pieEchart'));

// 指定图表的配置项和数据
var pieoption = {
title : {
text: '公里总里程',
x:'left',
textStyle:{
color:'#FFFFFF',
fontSize:25
}
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} KM"
},
legend: {
orient : 'vertical',
x : 'left',
top:40,
itemWidth:70,
itemHeight:30,
formatter: '{name}',
textStyle:{
color: '#FFFFFF'
},
data:[{name:'高速50KM',icon:'rect'},{name:'一级150KM',icon:'rect'},{name:'二级150KM',icon:'rect'},{name:'三级100KM',icon:'rect'},{name:'四级50KM',icon:'rect'}] }
,
calculable : true,
series : [
{
name:'公里总里程',
type:'pie',
radius : '70%',//饼图的半径大小
center: ['60%', '60%'],//饼图的位置
label:{ //饼图图形上的文本标签
normal:{
show:true,
position:'inner', //标签的位置
textStyle : {
fontWeight : 300 ,
fontSize : 16 //文字的字体大小
},
formatter:'{d}%'


}
},
data:[
{value:50,name:'高速50KM',itemStyle:{normal:{color:'#FE0000'}}},
{value:150,name:'一级150KM',itemStyle:{normal:{color:'#F29700'}}},
{value:150,name:'二级150KM',itemStyle:{normal:{color:'#02B0ED'}}},
{value:100,name:'三级100KM',itemStyle:{normal:{color:'#55E87D'}}},
{value:50,name:'四级50KM',itemStyle:{normal:{color:'#FFE200'}}},
]
}
]
};

// 使用刚指定的配置项和数据显示图表。
pieEchart.setOption(pieoption);

<div id="pieEchart" style="width: 480px;height:300px;">

如何给eCharts饼图区域指定颜色

option = {
      title : {
      text: "全局指标状态分布图",
            x:"left",
            y:"top"
      },
      tooltip : {
            show: true,
            formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      color:["red", "green","yellow","blueviolet"]
}

刷新数据

 <div class="foot_ri" id="txt">
        <div class="foot_txt">
            <span style="color: #6e85bf;font-size: 20px">诉求百分比占比</span>
            <div id="container" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"_echarts_instance_="ec_1550106173775">
                <div style="position: relative; overflow: hidden; width: 1920px; height: 1037px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
                    <canvas data-zr-dom-id="zr_0" width="1920" height="1037"
                            style="position: absolute; left: 0px; top: 0px; width: 1920px; height: 1037px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
                </div> 
            </div>
        </div>
    </div>

    <img src="../static/images/refresh.png" id="ig" style="margin-top: -370px;margin-left: 935px;">
</div>

点击 id="ig" 图片，id="container" 饼图刷新

<#--2019/2/13饼图-->
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {
        // title: {
        //     text: '诉求百分比占比',
        //     subtext: '',
        //     x: 'center'
        // },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"/*鼠标经过显示*/
        },
        // color:['#0160ae', '#36a5fc','#0d86e7'],
        color: ['#6f87bf', '#7084a2', '#5e6787'],
        legend: {
            orient: 'vertical',
            // bottom: 500,
            left: 'right',
            data: ['咨询', '意见建议', '投诉举报'],
            textStyle: {
                fontWeight: 300,
                fontSize: 16,    //文字的字体大小
                color: '#345cc1'//文字的字体颜色
            },
        },
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '65%', /*饼图大小*/
                center: ['40%', '50%'], /*饼图位置*/
                data: [
                    {value: 335, name: '咨询'},
                    {value: 234, name: '意见建议'},
                    {value: 135, name: '投诉举报'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    ;
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<#--结束-->
<#--2019/2/15刷新数据-->
<script>
    $('#ig').click(function () {
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        myChart.setOption({ //加载数据图表
            series: {
                // 根据名字对应到相应的系列
                name: ['数量'],
                data: [
                    {value: 222, name: '咨询'},
                    {value: 555, name: '意见建议'},
                    {value: 56, name: '投诉举报'}
                ]
            }

        })
    })
</script>
<#--结束-->