javascript - Echarts,如何使用数据系列来切换线条的颜色
问题描述
我想使用数据字段来更改某个图片的线条颜色。就像当它是 1 时,它应该是绿色的,当它是 2 时,它应该是黄色的。这个片段只是改变数据点的颜色,而不是线?有没有机会用 echarts 存档?
<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: 2,
pieces: [
{
lt: 2,
gt: 0,
color: 'green'
}, {
gte: 2,
color: 'red'
}
]
},
series: [{
data: [[1,37,1],[2,36,1],[3,36,2]],
type: 'line',
areaStyle: {}
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
解决方案
试试这个例子
1) 你应该使用正确的维度 (xAxis, yAxis),更多信息请阅读文档
2) 如果你想给整个区域着色,请从 areaStyle 中删除 color: "aquamarine",然后它会被部分配置着色
<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,
pieces: [
{
lt: 2,
gt: 0,
color: 'green'
}, {
gt: 2,
lt: 3,
color: 'red'
}, {
gte: 3,
color: 'yellow'
}
]
},
series: [{
data: [[1,37,1],[2,36,1],[3,36,2],[4,38,2]],
type: 'line',
areaStyle: {color: "aquamarine"}
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
</script>
</body>
</html>
推荐阅读
- python - 如何从头开始为 BIOES/BILOU 格式的自定义多类standfordNLP/Stanza NER 标记模型构建训练数据集?
- java - Spring Boot HATEOAS 集成问题
- typescript - 打字稿:从枚举值生成具有映射属性的对象
- spring - Spring LDAP 核心与 Spring 5 不兼容?
- python - Django为每个“用户”分配“分数”
- ignite - 如何禁用自动点燃基线?
- sql - SQL - 将类别添加到字符串值(映射表)
- java - XSLT 1.0 试图在内部实现 java 代码,但总是以错误结束
- excel - 从日期范围中获取 Excel 中列值的最小日期
- android - Flutter:更改背景颜色抽屉菜单而不更改颜色应用栏