How can I use the visualMap correctly to higlight a Line or AreaChart depending on a certain Y Axis VAlue. How can I set up ranges?
Another question, how can I use the visualMap to change the behaviour (color) of certain data depending on the catergory. How could I give my dataseries a parameter like "red" or "green" and use that with the visualMap?
With the follwoing code I can change the color of the data points via a certain category:
<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: 'value'
},
yAxis: {
type: 'value'
},
visualMap: {
show: true,
dimension: 2,
categories: ['Test'],
inRange: {
color: 'red'
},
outOfRange: {
color: 'green'
}
},
series: [{
data: [[1,37,'Test'],[2,36,'Hallo'],[3,36,'Hallo']],
type: 'line',
areaStyle: {}
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>How can I use this to change the color of the connecting lines?
5条答案
按热度按时间6jjcrrmo1#
(1) Depending on Y axis value: https://ecomfe.github.io/echarts-examples/public/editor.html?c=line-aqi probably helps.
(2) Depending on categories: firstly, put category info into each iitem of
series.data, and then use visualMap like https://ecomfe.github.io/echarts-examples/public/editor.html?c=parallel-nutrients .pdsfdshx2#
None of the links work @100pah
n1bvdmb63#
Was looking for the links as well, they don't work
kgqe7b3p4#
https://echarts.apache.org/examples/en/editor.html?c=line-aqi
gorkyyrv5#
currently visualMap over Y-axis seems buggy to me, see https://codesandbox.io/s/dreamy-neumann-b8iz9?file=/src/App.js
I wish there exists a lower level API to draw different line segment based on individual data item, instead of the current linear gradient solution.