利用eacharts生成一个折线图,可以输入一个数据并在相对应的折线图中显示出一条横线,并把横线上方的折线颜色设置为红色,横线下方折线的颜色不变
时间: 2023-11-27 10:50:41 浏览: 44
好的,以下是利用Echarts生成折线图的代码示例:
html部分:
```html
<div id="chart" style="width: 600px;height:400px;"></div>
```
js部分:
```javascript
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('chart'));
// 定义数据
var data = [5, 20, 36, 10, 10, 20];
// 指定图表的配置项和数据
var option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六']
},
yAxis: {
type: 'value'
},
series: [{
data: data,
type: 'line',
markLine: {
data: [{
yAxis: 15 // 设置横线的位置
}],
lineStyle: {
color: 'red' // 设置横线的颜色
}
},
itemStyle: {
normal: {
color: function(params) {
// 判断当前点的值与横线的位置关系,设置颜色
if (params.value > 15) {
return 'red'; // 点的值大于横线,颜色为红色
} else {
return '#3398DB'; // 点的值小于等于横线,颜色为蓝色
}
}
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
```
这段代码会在页面中生成一个600*400的Echarts折线图,其中数据为[5, 20, 36, 10, 10, 20],会在15的位置上生成一条横线,并将横线上方的折线颜色设置为红色,横线下方的折线颜色不变。
阅读全文