Echarts图形label文字颜色的设置
这里柱状图上的文字是使用label来显示的，当需要修改label的时候，对options及文字颜色的设置应当是：
//标签：顶部显示柱状图数值
label:{
normal:{
show:true,
position:'top',
textStyle:{
fontSize:16,
color:'#B0CEFC'
}
}
}完整代码
// 基于准备好的dom，初始化echarts实例
var chart = echarts.init(document.getElementById(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',
name: ' (分钟)',
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: obj.total,
barWidth: 12, //柱图宽度
//渐变色
color: new echarts.graphic.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: obj.res,
lineStyle: {
normal: {
color: "#dd3ee5"
}
}
},
{
name: '接单时间',
type: 'line',
yAxisIndex: 1, //选择index为1的Y轴作为参考系
data: obj.order,
lineStyle: {
normal: {
color: "#12e78c"
}
}
},
{
name: '评价得分',
type: 'line',
yAxisIndex: 0, //选择index为0的Y轴作为参考系
data: obj.score,
lineStyle: {
normal: {
color: "#fe8104"
}
}
}
]
};