Echarts 数值(label)颜色设置
Echarts 数值(label)颜色设置柱状图上方的文字颜色设置数字文字颜色设置柱状图、折线图等图表上的数字需要展示不一样的颜色。比如:条形柱状的颜色可以在series-itemStyle中通过color进行设置,并且每一根都可以设置为不同。因为color可以定义为function,可以直接在function内判断设置return出所需要的颜色即可, 由于textStyle中的color 只能设
·
Echarts 数值(label)颜色设置
柱状图、折线图等图表上的数字需要展示不一样的颜色。比如:
条形柱状的颜色可以在series-itemStyle中通过color进行设置,并且每一根都可以设置为不同。因为color可以定义为function,可以直接在function内判断设置return出所需要的颜色即可, 由于textStyle中的color 只能设置为字符串,所以以上方法是没有作用的。但可以通过以下两种方式设置。
第一种:可以利用富文本样式来设置
效果图:
完整代码:
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['Evaporation', 'Precipitation', 'Temperature']
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'Precipitation',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: 'Temperature',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: 'Evaporation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: 'Precipitation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
label: {
normal: {
show: true,
formatter: function (data) {
if (data.value < 10) {
return '{a|' + data.value + ' °C' + '}';
} else {
return '{b|' + data.value + ' °C' + '}';
}
},
rich: {
a: {
color: 'red'
},
b: {
color: '#000'
}
}
}
},
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
}
]
};
option && myChart.setOption(option);
第二种:可以在series的data设置时添加配置颜色,之前设置数据时是直接数值数组的方式
效果图:
完整代码:
import * as echarts from 'echarts';
var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
toolbox: {
feature: {
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
legend: {
data: ['Evaporation', 'Precipitation', 'Temperature']
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisPointer: {
type: 'shadow'
}
}
],
yAxis: [
{
type: 'value',
name: 'Precipitation',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value} ml'
}
},
{
type: 'value',
name: 'Temperature',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} °C'
}
}
],
series: [
{
name: 'Evaporation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
]
},
{
name: 'Precipitation',
type: 'bar',
tooltip: {
valueFormatter: function (value) {
return value + ' ml';
}
},
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
]
},
{
name: 'Temperature',
type: 'line',
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + ' °C';
}
},
color: '#b2b5b7',
label: {
show: true, //开启显示
position: 'top', //在上方显示
formatter: '{c} °C'
},
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
data: [
{ value: 2.0, label: { textStyle: { color: 'red' } } },
{ value: 2.2, label: { textStyle: { color: 'red' } } },
{ value: 3.4, label: { textStyle: { color: 'red' } } },
{ value: 6.3, label: { textStyle: { color: 'red' } } },
{ value: 10.2, label: { textStyle: { color: '#000' } } },
{ value: 20.3, label: { textStyle: { color: '#000' } } }
]
}
]
};
option && myChart.setOption(option);
更多推荐
已为社区贡献2条内容
所有评论(0)