示例图:重点部分是副标题红色和黄色那边
代码:
显示文字通过'{a|有效浏览量:} {b|28%} {c|4%Increase}'写好,然后在api中找关于修改subtext样式的属性,这边是subtextStyle,在里面写上rich即可使用。
?
var option = {
title:{
text:'示例图表',
subtext:'{a|有效浏览量:} {b|28%} {c|4%Increase}',
itemGap : 0,
left:40,
textStyle:{
color:'#fff',
fontSize:15,
height:20,
lineHeight: 10,
},
subtextStyle:{
rich:{
a:{
color:'red',
lineHeight: 0,
},
b:{
lineHeight: 0,
color:'red',
padding:[0,10,0,0]
},
c:{
padding:[0,5],
lineHeight: 0,
color:'green',
height:20,
backgroundColor : '#f81',
borderColor : 'green',
borderRadius: [5, 5, 5, 5],
textVerticalAlign:'top'
}
}
}
},
xAxis: {
type: 'category',
data: ['文章阅读量', '文章阅读量', '文章阅读量', '文章阅读量'],
axisLabel:{
color:"#fff"
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
interval: 'auto',
},
show: true
}
,
series: [
{
data: this.data,
type: 'bar',
//label自定义样式
label: {
show: true, // 开启显示
rotate: 70, // 旋转70度
position: 'right', // 在上方显示
distance: 20, // 距离图形元素的距离。当 position 为字符描述值(如 'top'、'insideRight')时候有效。
verticalAlign: 'middle',
interval: 'auto',
formatter: function (i) {
console.log(i,'2')
},
textStyle: { // 数值样式
color: 'black',
fontSize: 12
}
}
}
]
};
?
发现一个案例很多网址:本年商场顾客男女人数统计 - category-work,dataZoom区域缩放,grid直角坐标,legend,series-bar柱状图,series-line折线图,title标题,tooltip提示框 - makeapie echarts图表可视化案例
|