console
window.onload = () => {
var data = [1120, 932, 901, 934, 1290, 1330, 1320];
var maxVal = Math.max(...data)
var minVal = Math.min(...data)
var threshold = 1200
var thresholdOffset = (maxVal - threshold) / (maxVal - minVal)
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: data.map(v => ({
value: v,
itemStyle: {
color: v > threshold ? 'red' : 'green'
}
})),
type: 'line',
itemStyle: {
normal: {
lineStyle: {
width: 3,
type: 'solid',
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
[
{ offset: 0, color: 'red' },
{ offset: thresholdOffset, color: 'red' },
{ offset: thresholdOffset, color: 'green' },
{ offset: 1, color: 'green' }
]
)
}
}
}
}]
};
var ele = document.querySelector('#chart')
console.log(ele)
echarts.init(document.querySelector('#chart')).setOption(option)
}
<div id="chart" style="width=100vw; height: 100vh">sd</div>
* {
margin: 0
}