首页利用eacharts生成一个折线图，可以输入一个数据并在相对应的折线图中显示出一条横线，并把横线上方的折线全部设置为红色

利用eacharts生成一个折线图，可以输入一个数据并在相对应的折线图中显示出一条横线，并把横线上方的折线全部设置为红色

时间: 2023-11-27 20:49:47 浏览: 197

以下是基于 `ECharts 5` 实现的代码，可以达到您所需的效果： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ECharts Line Chart</title> <script src="https://cdn.jsdelivr.net/npm/echarts@5.1.2/dist/echarts.min.js"></script> </head> <body> <div id="chart" style="width: 600px; height:400px;"></div> <script> // 初始化 ECharts 实例 var myChart = echarts.init(document.getElementById('chart')); // 配置项数据 var option = { // 图表标题 title: { text: 'Line Chart with MarkLine' }, // 图表悬浮提示框 tooltip: { trigger: 'axis' }, // 图例 legend: { data:['Sample Data','MarkLine'] }, // X 轴 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, // Y 轴 yAxis: { type: 'value' }, // 系列数据 series: [{ name: 'Sample Data', type: 'line', data: [820, 932, 901, 934, 1290, 1330, 1320], // 设置折线颜色 lineStyle: { color: '#009688' } }, { name: 'MarkLine', type: 'line', symbol: 'none', // 标记线数据 markLine: { silent: true, data: [{ yAxis: 1000, lineStyle: { color: '#FF5722' } }] } }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> </body> </html> ``` 上述代码中，我们使用了 `markLine` 属性来添加标记线，并将 `series` 中的其他折线设置为红色。您可以根据自己的需求修改数据和样式。

阅读全文