echarts day01
程序员文章站
2022-06-08 13:23:04
...
解决环形图文字不自适应问题
图例:
html:
<div style="height: 350px;" id="div_consistencyCheck"></div>
js:
var charts = echarts.init(document.getElementById('div_consistencyCheck'));
//动态数据 总条数 : 100 通过批次数 :95
var objData = {total: "100", qualifiedCount: "95"};
var option = {
tooltip: {
trigger: 'item',
formatter: "{b}: {c} ({d}%)"
},
color: ['#408ca8', 'red'],
title: { // 标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题
text: '提交总批次数:' + objData.total +
' 通过批次数:' + objData.qualifiedCount + '',
x: 'center', //标题位置 左右居中
y: 'bottom', //上下左右居中
textStyle: { //字体样式
fontSize: $(window).width() * 0.01, //字体大小为 浏览器的宽度的0.01
fontWeight: 'bold', //主标题文字字体的粗细可选:'normal''bold''bolder''lighter'
color: 'black' //字体颜色
}
},
//另一种在环中间加标题
/*graphic: [{ // 环形图中间添加文字
show: false,
type: 'text', // 通过不同top值可以设置上下显示
left: 'center',
top: '47%',
style: {
text: "通过率", //(自己设置显示内容),
textAlign: 'center',
fill: '#212529', // 文字的颜色
fontFamily: 'Microsoft YaHei',
fontSize: $(window).width() * 0.01,
fontStyle: 'bold'
}
}, {
show: false,
type: 'text',
left: 'center',
top: '52%',
style: {
text: ((parseInt(objData.qualifiedCount) / parseInt(objData.total)) * 100) + '%',
textAlign: 'center',
fill: "c51200",
fontFamily: 'Microsoft YaHei',
fontSize: $(window).width() * 0.01,
fontStyle: 'bold'
}
}],*/
series: [
{
//name: '访问来源',
type: 'pie', // 形状:bar|柱形;pie|圆形
radius: ['56%', '70%'], // 环的大小
avoidLabelOverlap: false, // 是否启用防止标签重叠策略,默认默认开启)
hoverAnimation: true, //是否开启 hover 在扇区上的放大动画效果。
silent: false, //坐标轴是否是静态无法交互
label: { // 图形上的文本标签,可用于说明图形的一些数据信息,比如值,名称等
normal: { //
show: true, // 是否显示标签值
position: 'center', // 标签的位置。
formatter: function () {
return '通过率\n' + ((parseInt(objData.qualifiedCount) / parseInt(objData.total)) * 100) + '%'
},
textStyle: {
fontSize: $(window).width() * 0.01,
color: 'black'
}
}
},
data: [
{value: parseInt(objData.qualifiedCount), name: '通过批次数'},
{value: (parseInt(objData.total) - parseInt(objData.qualifiedCount)), name: '未通过批次数'}
]
}
]
};
charts.setOption(option, true); //初始化渲染
charts.resize(); //加载
$(window).resize(function () { // 浏览器窗口发生改变刷新Echarts图
//动态设置主题文字大小 //字体设置为响应式的
option.title.textStyle.fontSize = $(window).width() * 0.01; //环中间的字体
option.series[0].label.normal.textStyle.fontSize = $(window).width() * 0.01; //下面主题的字体
//动态设置环中间文字大小
//echartOption.graphic[0].style.fontSize = $(window).width() * 0.01;
//echartOption.graphic[1].style.fontSize = $(window).width() * 0.01;
charts.setOption(option, true);
charts.resize();
});
上一篇: 怎么策划一场效果好的线上推广方案?
下一篇: 网站优化之如何写出满足用户需求的文章?