<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#e1{
width: 700px;
height: 300px;
border:2px solid aqua;
}
</style>
<script src="https://cdn.bootcss.com/echarts/4.4.0-rc.1/echarts-en.common.min.js"></script>
</script>
<script type="text/javascript" src="../../js/jquery.js" />
</script>
</head>
<body>
<div id="e1"></div>
</body>
<script type="text/javascript">
xdata = ['baseline', 'Jan', 'Mar', 'May', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'WK48', 'Wk49', 'WK50', 'Dec', 'Final'];
ydata1 = []
ydata2 = []
ydata3 = []
for (var i = 1; i <= 14; i++) {
ydata1.push(Math.ceil(Math.random() * 4 + 1))
ydata2.push(Math.ceil(Math.random() * 4 + 1))
ydata3.push(Math.ceil(Math.random() * 2))
}
var colorList = [
'#D4262F', '#AADE6C', '#FFE211'
];
var myChart = echarts.init($("#e1")[0]);
// ajax get data
var option = {
tooltip: {
trigger: 'item',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
},
formatter: '时间:{b}<br>{a}:{c}%'
},
legend: {
// data: ['蒸发量', '降水量', '平均温度']
},
xAxis: [{
color: 'white',
type: 'category',
data: xdata,
axisLabel: {
interval: 0
},
axisPointer: {
type: 'shadow'
},
axisTick: {
lineStyle: {
// color:'white'
}
},
axisLine: {
onZero: true,
lineStyle: {
// color:'white'
}
},
// markPoint:{
// symbol:'pin',
// symbolSize:'500'
// }
}],
yAxis: [{
splitLine: {
show: false
},
// color:'white',
type: 'value',
axisLabel: {
formatter: '{value}%'
},
axisTick: {
lineStyle: {
// color:'white'
}
},
axisLine: {
onZero: true,
lineStyle: {
// color:'white'
}
}
}, ],
series: [{
name: '蒸发量',
type: 'bar',
data: ydata1,
// barWidth: '40', //---柱形宽度
barCategoryGap: '50%', //---柱形间距
label: {
normal: {
show: true,
position: 'top',
fontWeight: 'bold',
fontSize: 14,
// textStyle: {
// color: 'red'
// },
formatter: function(params) {
console.log(params)
if (ydata1[params.dataIndex] < ydata2[params.dataIndex]) {
return [`{red|${params.data} %}`]
} else if (ydata1[params.dataIndex] == ydata2[params.dataIndex]) {
return [`{yellow|${params.data} %}`]
} else {
return [`{green|${params.data} %}`]
}
// return `{value} %`
},
rich: {
red: {
color: colorList[0]
},
yellow: {
color: colorList[1]
},
green: {
color: colorList[2]
}
}
}
},
itemStyle: {
normal: {
// color: function(params) {
// // build a color map as your need.
// var colorList = [
// '#D4262F', '#AADE6C', '#FFE211'
// ];
// console.log(ydata1[params.dataIndex], ydata2[params.dataIndex]);
// if (ydata1[params.dataIndex] < ydata2[params.dataIndex]) {
// return colorList[0]
// } else if (ydata1[params.dataIndex] == ydata2[params.dataIndex]) {
// return colorList[1]
// } else {
// return colorList[2]
// }
// //dataIndex
// // return colorList[params.dataIndex]
// }
}
}
},
{
name: '平均温度',
type: 'line',
symbol: 'triangle',
symbolSize: 10,
label: {
normal: {
show: true,
position: 'top',
fontWeight: 'bold',
fontSize: 14,
// formatter: "series-lable-{a}-{b}-{c}-{value}-{name}%"
formatter: "{c}%"
}
},
lineStyle: {
normal: {
color: '#92D050'
}
},
itemStyle: {
normal: {
color: 'black'
}
},
data: ydata3,
}
]
};
myChart.setOption(option)
</script>
</html>
<!--
getLossofWorkEfficiencyHistoryOption-standard
-setSingleLineBarChartA-
-->
富文本动态切换label颜色
最新推荐文章于 2023-04-10 10:49:48 发布