这篇博客展示了如何利用Echarts库创建一个多条折线图，其中每个节点都可以被拖动。通过在JavaScript中设置Echarts实例，定义数据和配置，实现了拖动节点的功能。拖动时，点的位置会实时更新，从而改变折线图的形状。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/echarts/echarts.js"></script>
<title>在指定位置画多个点</title>
<style>
canvas{
border: 1px dashed gray;
}
</style>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script>
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var symbolSize = 20;
var data1 = [[-90, -10], [-30, -10], [10, -20], [30, -10], [60, -10]]; // 第一条线
var data2 = [[-90, 70], [-30, 80], [10, 100], [30, 140], [60, 150]]; // 第二条线，多条线类推
var option = { // 基本配置，画曲线
title: {
text: 'Try Dragging these Points'
},
/* tooltip: {
triggerOn: 'none',
formatter: function (params) {
return 'X: ' + params.data[0].toFixed(2) + '<br>Y: ' + params.data[
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
