给echart.js折线图设置滚动条

滚动条的参数

// 滚动条配置
dataZoom: [
    {
        type: 'slider',
        show: true,
        xAxisIndex: [0],
        start: 0,    //初始化时，滑动条宽度开始标度
        end: 100,
        bottom: '3%',
        height: 10, // 重要参数：组件高度
        fillerColor: '#337AB7',  // 颜色
        borderColor: "transparent",
        backgroundColor: 'white',//两边未选中的滑动条区域的颜色
        showDataShadow: false,//是否显示数据阴影 默认auto
        showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
    },
    //下面这个属性是里面拖动配置
    {
        type: 'inside',
        xAxisIndex: 0,
        start: 0,//默认为1
        end: 100,//默认为100
    }
],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

实现效果
在这里插入图片描述

完成例子代码

DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8" />
    <title>Echarts Exampletitle>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.3/echarts.min.js">script>
head>
<body>
    <div id="main" style="width: 600px;height: 400px">div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        var option = {
            title: {
                text: 'Stacked Line',
                zlevel: 0,  //默认值
                z: 6,  //默认值
            },
            // 滚动条配置
            dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,    //初始化时，滑动条宽度开始标度
                    end: 100,
                    bottom: '3%',
                    height: 10, //组件高度
                    fillerColor: '#337AB7',
                    borderColor: "transparent",
                    backgroundColor: 'white',//两边未选中的滑动条区域的颜色
                    showDataShadow: false,//是否显示数据阴影 默认auto
                    showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                },
                //下面这个属性是里面拖动配置
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    start: 0,//默认为1
                    end: 100,//默认为100
                }
            ],
            // 显示鼠标接触位置曲线数据
            tooltip: {
                trigger: 'axis'
            },
            // 曲线图例
            legend: {
                data: ['猜想1', '猜想2']   //1
            },
            // 曲线框距离图表框的距离
            grid: {
                top: '15%',
                left: '5%',
                right: '5%',
                bottom: '8%',
                containLabel: true,
            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                    dataView: {}, // 是否显示出原始数据
                }
            },
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            yAxis: [{ type: 'value' }, { type: 'value' }],
            series: [
                {
                    name: '猜想1',
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    // label: { show: true, position: 'bottom' }, //显示数据点数据
                },
                {
                    name: '猜想2',
                    data: [14080, 13800, 12380, 15860, 13380, 14900, 15108],
                    type: 'line',
                },
            ],
        myChart.setOption(option);
    script>
body>
html>
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

参考：https://echarts.apache.org/zh/index.html

相关阅读:
ES6 解构赋值--一般用法
六种最常见的软件供应链攻击
Vue3表单输入绑定&生命周期
思腾云计算
IDEA代码重构技巧--抽取类和接口
旋转的正方体-第15届蓝桥杯第一次STEMA测评Scratch真题精选
【云原生-k8s】Linux服务器搭建单机版kubernetes服务
【Airtest】实现UI自动化测试（一）
Verilog HDL经典电路设计
leetcode-1678-设计 Goal 解析器(简单，基本逻辑)

原文地址：https://blog.csdn.net/qq_38463737/article/details/126170646