web数据可视化 echarts版3-9标记点,标记线实例代码
时间: 2024-11-05 21:29:00 浏览: 18
echarts结合echarts-gl实现3D飞线地球可视化
ECharts是一个强大的JavaScript图表库,用于创建各种交互式数据可视化。在版本3.x到9.x之间,ECharts提供了丰富的标记点和标记线功能,可以方便地在图上展示关键数据点或趋势线。
下面是一个简单的例子,展示了如何在折线图上添加标记点和标记线:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>ECharts - Markers and Lines</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var option = {
title: {
text: 'ECharts 示例'
},
tooltip: {},
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [
{
name: '销量',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
markPoint: { // 标记点
symbol: ['circle', 'diamond'], // 可以为数组,表示有多种类型的标记点
data: [{name: '周一', value: 120}, {name: '周六', value: 230}] // 对应x轴的数据
},
markLine: { // 标记线
symbol: 'none', // 设置标记线的样式
data: [[100, '最高值'], [200, '最低值']] // 数据是两个数组,第一个数组对应x轴的位置,第二个数组对应标签
}
}
]
};
var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
</script>
</body>
</html>
```
在这个例子中,`markPoint`部分添加了两个标记点,分别代表周一和周六的销量。`markLine`部分则添加了一条从最低值到最高值的标记线,并设置了对应的标签。
阅读全文