[英]Echarts: How to do a continuous visualmap range by row in a cartesian2d heatmap?
[英]Echarts, how to use visualMap
如何使用visualMap根据线在X轴上的值对线进行着色。 我要为所有大于23的值涂成红色,为所有大于23的值涂成绿色。
我的脚本如下所示:
<html>
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts.min.js"></script>
</head>
<body>
<div id="main_chart" style="width: 1200px;height:600px;"></div>
<script type="text/javascript">
// based on prepared DOM, initialize echarts instance
var myChart = echarts.init(document.getElementById('main_chart'));
var app = {};
option = null;
option = {
xAxis: {
type: 'category',
data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11']
},
yAxis: {
type: 'value'
},
visualmap: {
show: false,
dimension: 0,
min: 0,
max: 10,
range: [0, 23],
inRange: {
color: 'red'
},
outOfRange: {
color: 'green'
}
},
series: [{
data: [20, 22, 25, 27, 30, 25],
type: 'line',
areaStyle: {}
}]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html
不幸的是,这不是这样。
总的来说,在echarts的官方纪录片中,我对它的视觉记录功能有很好的描述,但我对此并不了解。
我假设您要为所有小于23的值涂成红色,为所有大于23的值涂成绿色。
你可以像这样使用visualMap
"visualMap": [{
"pieces": [{
"gte": 23,
"label": ">= 23",
"color": "green"
}, {
"lt": 23,
"gt": 0,
"label": "< 23",
"color": "red"
}],
}],
let echartsObj = echarts.init(document.querySelector('#canvas')); let seriesData = [1, 1, 2, 3, 4, 6, 8]; option = { xAxis: { type: 'category', data: ['2012-03-01 05:06', '2012-03-01 05:07', '2012-03-01 05:08', '2012-03-01 05:09', '2012-03-01 05:10', '2012-03-01 05:11'] }, yAxis: { type: 'value' }, series: [{ data: [20, 22, 25, 27, 30, 25], type: 'line', areaStyle: {} }], "visualMap": [{ "pieces": [{ "gte": 23, "label": ">= 23", "color": "green" }, { "lt": 23, "gt": 0, "label": "< 23", "color": "red" }], }], }; echartsObj.setOption(option)
<html> <header> <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.min.js"></script> </header> <body> <div id="canvas" style="width: 100%; height: 400px"> </div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.