解决echarts饼图显⽰百分⽐，和显⽰内容字体及⼤⼩，如何给
eCharts饼图区域指定颜⾊
解决echarts饼图显⽰百分⽐，和显⽰内容字体及⼤⼩
// 基于准备好的dom，初始化echarts实例
var pieEchart = echarts.ElementById('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" >
如何给eCharts饼图区域指定颜⾊
1. option = {
2.        title : {
3.        text: "全局指标状态分布图",
4.                x:"left",
5.                y:"top"
6.        },
7.        tooltip : {
8.                show: true,
9.                formatter: "{a} <br/>{b} : {c} ({d}%)"
10.        },
11.        color:["red", "green","yellow","blueviolet"]
12. }
刷新数据
<div class="foot_ri" id="txt">
<div class="foot_txt">
<span >诉求百分⽐占⽐</span>
<div id="container" _echarts_instance_="ec_1550106173775">
<div >
<canvas data-zr-dom-id="zr_0" width="1920" height="1037"
></canvas>
</div>
</div>
</div>
</div>
<img src="../static/images/refresh.png" id="ig" >
</div>
点击 id="ig" 图⽚，id="container" 饼图刷新
<#--2019/2/13饼图-->
<script type="text/javascript">
var dom = ElementById("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 = ElementById("container");        var myChart = echarts.init(dom);
myChart.setOption({ //加载数据图表
series: {
// 根据名字对应到相应的系列
name: ['数量'],
data: [
{value: 222, name: '咨询'},
{value: 555, name: '意见建议'},
{value: 56, name: '投诉举报'}
]
}
})
margin属性值可以为百分比})
</script>
<#--结束-->

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。