echarts 增加可移动竖线

echarts |

实现逻辑：
在一个 echarts 折线图上，实现两条竖线可随意左右移动的功能，移动停止后，获得竖线此时在 x 轴上的位置。

引入依赖文件

1
2
<script src="js/echarts.min.js"></script> // 我的版本是 5.0.2
<script src="js/vue.min.js"></script> // 因为我的是一个 vue 项目，所以加了 vue，没有 vue 的话，普通的也是用同样的方法加载下图表就可以

1
let data = [[3, 100], [4, 100]] // [x, y] x 是在 x 轴上的位置，y 是竖线的高度，需要比图表 y 轴最大值大
1
2
3
4
5
6
7
8
shape: {
	x1: 0,
	y1: 0,
	x2: 0,
	y2: 4000 // 竖线的高度
},
- x1、y1:线段起点  
- x2、y2:线段终点

draggable
// 设置为 true/false 以启用/禁用拖拽，也可以设置为 ‘horizontal’/‘vertical’ 限制只允许水平或垂直方向拖拽。
设置成 true 时，它可以上下左右拖拽，不适合我们的情况，这里我们只要在 x 轴上左右水平拖动，所以设置成 horizontal

1
2
3
4
ondragend: (params) => {
    // 这个是 x 轴的位置，如果想要变更成不可拖拽的 markline，可以利用这个
	console.log(this.chart.convertFromPixel('grid', params.target.position))
}

完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>markline</title>
	<script src="js/echarts.min.js"></script>
    <script src="js/vue.min.js"></script>
	<style>
		
	</style>
</head>

<body>
<div id="app" class="chart">
    <div id="main2" style="height: 430px;"></div>
</div>
            
<script language="javascript">
var vm = new Vue({
    el: '#app',
    data: {
        chart: null,
        option1: null
    },
    mounted() {
        this.chart = echarts.init(document.getElementById('main2'));
        this.option1 = {
            color: ['#F8CB00'],
            grid: {
                left: 40,
                top: 30,
                bottom: 30,
                right: 30,
                containLabel: false
            },
            xAxis: [{
                id: '2',
                type: 'value',
                min: 0,
                max: 10,
                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: {
                type: 'value',
                id: '2',
                min: 0,
                max: 15,
                interval: 3,
                axisLabel: {
                    formatter: '{value}'
                }
            },
            series: [{
                id: 'aaa',
                name: '',
                type: 'line',
                barWidth: '65%',
                data: [[1, 8.1], [2, 13.3], [3, 1.5], [4, 14.6], [5, 10.8], [6, 9.0], [7, 9.2], [8, 9.3]],
            }],
        };
        this.chart.setOption(this.option1);
        setTimeout(() => {
            this.setChart()
        }, 0)
    },
    methods: {
        setChart() {
            let data = [[3, 100], [4, 100]] // [x, y] x 是在 x 轴上的位置，y 是竖线的高度，需要比图表 y 轴最大值大
            let graphicChart = {
                graphic: data.map((item, dataIndex) => {
                    return {
                        type: 'line',
                        z: 100,
                        shape: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 4000 // 竖线的高度
                        },
                        style: {
                            stroke: 'rgba(0,0,0,1)',
                            lineWidth: 1,
                            lineDash: [5, 3]
                        },
                        bounding: 'raw',
                        position: this.chart.convertToPixel('grid', item),
                        cursor: 'e-resize', // 鼠标修改成可以移动的状态
                        draggable: 'horizontal', // 竖线修改成可以移动的状态
                        ondragend: (params) => {
                            console.log(this.chart.convertFromPixel('grid', params.target.position))
                        }
                    }
                })
            }
            this.chart.setOption(graphicChart)
        }
    }
})
</script>

</body>

</html>