大家好,又见面了,我是你们的朋友全栈君。
解决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>
<#–结束–>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/124677.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...