實現曲線不同線段的不同樣色。如下圖
採用的visualMap實現的。具體代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="./dist/echarts.min.js"></script>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
html,body{
height:100%;
}
</style>
</head>
<body style="height: 100%;">
<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 80%;height:80%;top: 10%;left: 10%; "></div>
</body>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var myColor = ['#eb2100', '#eb3600', '#d0570e', '#d0a00e', '#34da62', '#00e9db', '#00c0e9', '#0096f3', '#33CCFF', '#33FFCC'];
var option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
visualMap: {
top: 10,
right: 10,
pieces: [{
gt: 600,
lte: 900,
color: '#096'
}, {
gt: 900,
lte: 1200,
color: '#ffde33'
},
{
gt: 1200,
lte: 1500,
color: '#ff0000'
}]
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</html>
官方文檔 https://www.echartsjs.com/zh/option.html#visualMap-piecewise
相關說明：
Array
自定義『分段式視覺映射組件（visualMapPiecewise）』的每一段的範圍，以及每一段的文字，以及每一段的特別的樣式。例如：
pieces: [
{min: 1500}, // 不指定 max，表示 max 爲無限大（Infinity）。
{min: 900, max: 1500},
{min: 310, max: 1000},
{min: 200, max: 300},
{min: 10, max: 200, label: '10 到 200（自定義label）'},
{value: 123, label: '123（自定義特殊顏色）', color: 'grey'}, // 表示 value 等於 123 的情況。
{max: 5} // 不指定 min，表示 min 爲無限大（-Infinity）。
]
或者，更精確得，可以使用 lt（小於，little than），gt（大於，greater than），lte（小於等於 lettle than or equals），gte（大於等於，greater than or equals）來表達邊界：
pieces: [
{gt: 1500}, // (1500, Infinity]
{gt: 900, lte: 1500}, // (900, 1500]
{gt: 310, lte: 1000}, // (310, 1000]
{gt: 200, lte: 300}, // (200, 300]
{gt: 10, lte: 200, label: '10 到 200（自定義label）'}, // (10, 200]
{value: 123, label: '123（自定義特殊顏色）', color: 'grey'}, // [123, 123]
{lt: 5} // (-Infinity, 5)
]