echarts缩放

最新推荐文章于 2024-06-01 16:37:49 发布

滴滴咚咚咚

最新推荐文章于 2024-06-01 16:37:49 发布

阅读量9k

点赞数 1

分类专栏： echarts

本文链接：https://blog.csdn.net/darkCloudss/article/details/109046513

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

echarts图表加上dataZoom可实现缩放

 dataZoom: [//加上dataZoom可实现缩放
                {
                    type: 'slider',//x轴
                    xAxisIndex: 0,
                   
                },
                {
                    type: 'inside',//x轴
                    xAxisIndex: 0,
                    zoomOnMouseWheel:'alt',//如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
                },
                // {
                //     type: 'slider',//y轴
                //     yAxisIndex: 0,
                // },
                // {
                //     type: 'inside',//y轴
                //     yAxisIndex: 0,
                // }
            ],

完整代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>echart</title>
</head>
<body>
	<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
</body>
</html>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script>


        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

       option = {//折线图
            title: {
                text: "title",
            },
            tooltip: {
                trigger: 'axis',
                // formatter: formatter //百分比
            },
            toolbox: {
                feature: {
                    saveAsImage: {}//保存图片
                },
                x: 'center',
                y: 'center'
            },
            xAxis: {
                type: 'value',
                // boundaryGap: false,
                // data: dateDataArr,
                // name: '时间'
            },
            yAxis: {
                type: 'value',
                max: 'dataMax',//根据缩放改变最大值
                min: 'dataMin', // 最小值	
                // axisLabel
            },
            dataZoom: [//加上dataZoom可实现缩放
                {
                    type: 'slider',//x轴
                    xAxisIndex: 0,
                   
                },
                {
                    type: 'inside',//x轴
                    xAxisIndex: 0,
                    zoomOnMouseWheel:'alt',//如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
                },
                // {
                //     type: 'slider',//y轴
                //     yAxisIndex: 0,
                // },
                // {
                //     type: 'inside',//y轴
                //     yAxisIndex: 0,
                // }
            ],
            series: [
                {
                    type: 'line', // 折线图
                    data: [["4.345","1.345","0.55"],["19.34","3.998","0.44"],
                        ["9.33","1.54","9.234"],["0.342","5.634","2.45"],
                        ["11.234","54.345","5.645"],["0.924","4.92","7.32"],
                        ["2.33","5.55","6.349"],["1.234","5.345","2.754"],
                        ["2.09","0.76","4.66"],["7.456","5.042","0.368"]]
                }
            ]
        };
        myChart.setOption(option);
 </script>

滴滴咚咚咚

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
echarts缩放

echarts图表加上dataZoom可实现缩放 dataZoom: [//加上dataZoom可实现缩放 { type: 'slider',//x轴 xAxisIndex: 0, }, { type: 'inside',//x轴 .
复制链接

扫一扫

专栏目录