本文档介绍了如何在ECharts图表中添加横线标线，并详细展示了如何设置标线颜色，以及根据数据动态调整颜色的方法。通过示例代码，展示了在条形图上针对不同数据段设置不同颜色的效果。
//
var myChart1 = echarts.init(document.getElementById('main1'));
var data1=['10.2','8.6','9.3','7.5']; //预警值 数组
var seriesData = [12, 7.8, 14.2, 6.2]; //总能耗数值数组
option1 = {
title: {
text: '分车型能耗预警'
},
color: ['#e7505a'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['伊兰特汽油', '伊兰特CNG', 'B50汽油', '凯美瑞混合动力'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value',
name: '百公里能耗L/100KM',
min: 0,
max: 15,
interval: 3,
axisLabel: {
formatter: '{value}'
}
}],
series: [{
name: '',
type: 'bar',
barWidth: '45%',
data:seriesData,
markLine: {
itemStyle: {
normal: {
borderWidth: 1,
lineStyle: {
type: 'dash',
color: '#333 ',
width: 2,
},
label: {
formatter: '',
textStyle: {
fontSize: 16,
fontWeight: "bolder",
},
}
},
},
data: [
[{
coord: ['伊兰特汽油', 0]
}, {
coord: ['伊兰特汽油', 10.2]
}],
[{
coord: ['伊兰特CNG', 0]
}, {
coord: ['伊兰特CNG', 8.6]
}],
[{
coord: ['B50汽油', 0]
}, {
coord: ['B50汽油', 9.3]</
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
