Echarts图形label⽂字颜⾊的设置这⾥柱状图上的⽂字是使⽤label来显⽰的,当需要修改label的时候,对options及⽂字颜⾊的设置应当是:
//标签:顶部显⽰柱状图数值
label:{
normal:{
show:true,
position:'top',
textStyle:{
fontSize:16,
color:'#B0CEFC'
}
}
}
完整代码
// 基于准备好的dom,初始化echarts实例
var chart = echarts.ElementById(obj.dom));
var option = {
//默认⾊板
color: ['#dd3ee5', '#12e78c', '#fe8104'],
tooltip: {
trigger: 'axis',//触发类型;轴触发,item项⽬触发,
axisPointer: { //坐标轴指⽰器
type: 'cross',
crossStyle: {
color: '#fff'
}
}
},
legend: { //图例
data: obj.legend,
itemHeight: 9,//改变圆圈⼤⼩
icon: "circle",
textStyle: {
color: '#B0CEFC' // 图例⽂字颜⾊
}
},
grid: { //表格显⽰区域
x: 35,
y: 38,
x2: 35,
y2: 26,
},
xAxis: [
{
type: 'category', //轴类型,横轴为类⽬型'category',纵轴为数值型'value',
data: obj.xAxis,
axisPointer: {
type: 'shadow'
},
axisLabel: { //轴⽂字标签
show: true,
textStyle: {
color: '#B0CEFC',
}
},
},
yAxis: [
//第⼀个Y轴
{
position:'left',
type: 'value',
name: '(分值) ',
min: obj.yAxis1.min,
max: obj.yAxis1.max,
interval: obj.yAxis1.interval,
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
},
/
/分割线
splitLine: {
show: true,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'], width: 1,
type: 'solid'
}
}
},
//第⼆个Y轴
{
position:'right',
type: 'value',
textstylename: ' (分钟)',
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: true,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
},
//分割线
splitLine: {
show: false,
lineStyle: {
color: ['blue'],
width: 1,
type: 'solid'
}
},
//因相应时间、接单时间不定,坐标轴做浮动处理
min: obj.yAxis2.min,
max: obj.yAxis2.max,
interval: obj.yAxis2.interval,
//第三个Y轴在左边,距离第⼀个Y轴0像素
{
show:false,
position:'left',
offset:0,
type: 'value',
name: '(总数) ',
//不设置min、max、interval,坐标浮动处理
nameTextStyle: {
color: '#B0CEFC',
padding: 10
},
axisLabel: {
show: false,
textStyle: {
color: '#B0CEFC',
}
},
axisLine: {
show: false
},
//⽹格样式
splitLine: {
show: false,
lineStyle: {
color: ['#14364f', '#11233c', '#122b44', '#14314a', '#102c42'], width: 1,
type: 'solid'
}
},
}
],
series: [
{
name: '总数',
type: 'bar',
yAxisIndex: 2, //选择index为2的Y轴作为参考系
data: al,
barWidth: 12, //柱图宽度
//渐变⾊
color: aphic.LinearGradient(0, 1, 0, 0,
[{offset: 0,color: '#d223e7'},
{offset: 1,color: '#f376e0'}]
),
itemStyle: {
normal: {
//柱形图圆⾓,初始化效果
barBorderRadius: [10, 10, 10, 10]
}
},
//标签:顶部显⽰柱状图数值
label:{
normal:{
show:true,
position:'top',
textStyle:{
fontSize:16,
color:'#B0CEFC'
}
}
}
},
{
name: '响应时间',
type: 'line',
yAxisIndex: 1, //选择index为1的Y轴作为参考系 data: s,
lineStyle: {
normal: {
color: "#dd3ee5"
}
}
},
{
name: '接单时间',
type: 'line',
yAxisIndex: 1, //选择index为1的Y轴作为参考系 data: der,
lineStyle: {
normal: {
color: "#12e78c"
}
}
},
{
name: '评价得分',
type: 'line',
yAxisIndex: 0, //选择index为0的Y轴作为参考系 data: obj.score,
lineStyle: {
normal: {
color: "#fe8104"
}
}
}
]
};
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论