Echarts-触屏 tooltip 和 dataZoom 示例

最新推荐文章于 2024-06-28 10:31:28 发布

Dragonfly Fly

最新推荐文章于 2024-06-28 10:31:28 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/baidu_39188121/article/details/100545130

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 1600px;height:800px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var base = +new Date(2016, 9, 3);
    var oneDay = 24 * 3600 * 1000;
    var valueBase = Math.random() * 300;
    var valueBase2 = Math.random() * 50;
    var data = [];
    var data2 = [];

    for (var i = 1; i < 10; i++) {
        var now = new Date(base += oneDay);
        var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');

        valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
        valueBase <= 0 && (valueBase = Math.random() * 300);
        data.push([dayStr, valueBase]);

        valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
        valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
        data2.push([dayStr, valueBase2]);
    }

    option = {
        animation: false,
        title: {
            left: 'center',
            text: '触屏 tooltip 和 dataZoom 示例',
            subtext: '"tootip" and "dataZoom" on mobile device',
        },
        legend: {
            top: 'bottom',
            data:['意向']
        },
        tooltip: {
            triggerOn: 'none',
            position: function (pt) {
                return [pt[0], 130];
            }
        },
        toolbox: {
            left: 'center',
            itemSize: 25,
            top: 55,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {}
            }
        },
        // 设置轴上的 axisPointer.handle.show（例如 xAxis.axisPointer.handle.show 为 true
        // 则会显示出此 axisPointer 的拖拽按钮。（polar 极坐标系暂不支持此功能）。

        // 注意： 如果发现此时 tooltip 效果不良好，可设置 tooltip.triggerOn 为 'none'
        //（于是效果为：手指按住按钮则显示 tooltip，松开按钮则隐藏 tooltip），
        // 或者 tooltip.alwaysShowContent 为 true（效果为 tooltip 一直显示）。
        xAxis: {
            type: 'time',
            // boundaryGap: [0, 0],
            axisPointer: {
                value: '2016-10-7',
                snap: true,
                lineStyle: {
                    color: '#004E52',
                    opacity: 0.5,
                    width: 2
                },
                label: {
                    show: true,
                    formatter: function (params) {
                        return echarts.format.formatTime('yyyy-MM-dd', params.value);
                    },
                    backgroundColor: '#004E52'
                },
                //实现拖拽的两个条件
                //1. xAxis.axisPointer.handle.show 为 true
                // 注意是xAxis里面的（axisPointer）！！的handle
                //2. 如果发现此时 tooltip 效果不良好，可设置 tooltip.triggerOn 为 'none'
                handle: {
                    show: true,
                    color: '#004E52'
                }
            },
            splitLine: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            axisTick: {
                inside: true
            },
            splitLine: {
                show: false
            },
            axisLabel: {
                inside: true,
                formatter: '{value}\n'
            },
            z: 10
        },
        grid: {
            top: 110,
            left: 15,
            right: 15,
            height: 160
        },
        dataZoom: [{
            //不指定哪个轴 应该是默认控制第一个x轴
            //内置型数据区域缩放组件（dataZoomInside）
            type: 'inside',
            throttle: 50,
        }],
        series: [
            {
                name:'模拟数据',
                type:'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 5,
                sampling: 'average',
                itemStyle: {
                    normal: {
                        color: '#8ec6ad'
                    }
                },
                stack: 'a',
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#8ec6ad'
                        }, {
                            offset: 1,
                            color: '#ffe'
                        }])
                    }
                },
                data: data
            },
            {
                name:'模拟数据',
                type:'line',
                smooth:true,
                stack: 'a',
                symbol: 'circle',
                symbolSize: 5,
                sampling: 'average',
                itemStyle: {
                    normal: {
                        color: '#d68262'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#d68262'
                        }, {
                            offset: 1,
                            color: '#ffe'
                        }])
                    }
                },
                data: data2
            }

        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>
</body>
</html>

Dragonfly Fly

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Echarts-触屏 tooltip 和 dataZoom 示例

<!DOCTYPE html><html><head> <meta charset="utf-8">  <script src="echarts.js"></script></head><body><!-- ...
复制链接

扫一扫