echarts带滚动条的一个案例

已于 2023-03-09 14:59:05 修改
阅读量6.3k 收藏 5
点赞数 5
分类专栏： echarts 文章标签： echarts javascript 前端
于 2019-07-04 19:54:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fengxiaopeng74/article/details/94648551
版权

项目需求会有很多数据，所以要有滚动条来查看更多数据，看图片：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="./css/rest.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/jquery.min.js"></script>
</head>
<body style="background: #00182e">
    <div class="box">
            <div id="f_domZom" style="width:440px;height: 800px;"></div>
    </div>
<script src="./js/echarts.min.js"></script>
<script src="./js/index.js"></script>
<script>
            var colorList = ['#0081fa', '#d77a94']
            var data = [
                ["汇聚数据", "实际汇聚类型", "剩余汇聚类型"],
                ["公*局", 2, 1],
                ["交**队", 3, 2],
                ["各*******单位", 1, 1],
                ["运*局", 3, 2],
                ["客*办", 2, 1],
                ["公*团", 2, 1],
                ["农*局", 1, 1],
                ["教*育", 1, 1],
                ["城***委", 2, 1],
                ["商*务", 5, 3],
                ["市*管***理局", 2, 1],
                ["卫**委", 2, 1],
                ["生**局", 1, 1],
                ["民***局", 1, 1],
                ["机***理局", 1, 1],
                ["一**通", 1, 1],
                ["互****业", 1, 1],
                ["机***车", 1, 1]
            ]
            var parking_charts = echarts.init(document.getElementById('f_domZom'));

            function autoEchart() {
                var parking_charts_option = {
                    color: colorList,
                    "dataset": {
                        "source": data,
                    },
                    "grid": {
                        "width": '90%',
                        "left": '8%',
                        "right": 40,
                        "bottom": 50,
                        "top": "10%",
                        // "containLabel": true
                    },

                    "xAxis": [{
                        "show": false,
                        position: 'top',
                    }],
                    "yAxis": [{
                        "type": "category",
                        //是否反向坐标轴    
                        "inverse": true,
                        "axisLabel": {
                            "color": "#fff",
                            "fontSize": 14,
                            "fontWeight": "normal",
                            align: 'left',
                            padding: [-80, 0, 0, 10]
                        },
                        max: 20,
                        "show": true,
                        "splitLine": {
                            "show": false,
                        },
                        "axisTick": {
                            "show": false
                        },
                        "axisLine": {
                            "show": false
                        }
                    }],
                    "tooltip": {
                        "show": false,
                        // "trigger": "axis",
                        // "axisPointer": {
                        //     "type": "shadow"
                        // },
                    },
                    "legend": {
                        "show": true,
                        "type": "scroll",
                        "top": 15,
                        "left": "center",
                        "textStyle": {
                            "color": 'white',
                            fontSize: 14
                        },
                    },
                    "series": [{
                        "type": "bar",
                        "name": "汇聚数据",
                        "itemStyle": {
                            "barBorderRadius": 10
                        },
                        "barGap": "50%",
                        barCateGoryGap: 20,
                        // "stack": "total",
                        "label": {
                            "color": "#fff",
                            "fontSize": 14,
                            // position: [0, '-20'],
                            "fontWeight": "normal",
                            "show": true,
                            // formatter: function(data) {
                            //     return chartName[data.dataIndex];
                            // }
                        },
                        "barMaxWidth": 22.22222222222222,
                        "barWidth": 22.22222222222222,
                        "animation": true
                    }, {
                        "type": "bar",
                        "name": "共享数据",
                        "itemStyle": {
                            "barBorderRadius": 10
                        },
                        "barGap": "50%",
                        barCateGoryGap: 20,
                        // "stack": "total",
                        "label": {
                            "color": "#fff",
                            "fontSize": 14,
                            // position: [0, '-20'],
                            "fontWeight": "normal",
                            "show": true,
                            // formatter: function(data) {
                            //     return chartName[data.dataIndex];
                            // }
                        },
                        "barMaxWidth": 22.22222222222222,
                        "barWidth": 22.22222222222222,
                        "animation": true
                    }],
                    "title": {
                        "show": false
                    },
                    // 滚动条
                    "dataZoom": [{
                        type: 'slider',
                        show: true,
                        "filterMode": "empty",
                        "disabled": false,
                        yAxisIndex: 0,
                        // top: '25%',
                        right: '5%',
                        // bottom: '15%',
                        width: 10,
                        start: 0,
                        end: 30,
                        handleSize: '0', // 滑动条的 左右2个滑动小块的大小
                        handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
                        textStyle: {
                            color: "#fff"
                        },
                        fillerColor: '#3C62C0', // 拖动条的颜色
                        borderColor: "none",
                        backgroundColor: 'rgba(60, 98, 192, 0.302)',
                        showDetail: false // 即拖拽时候是否显示详细数值信息 默认true
                    }, ],
                }
                parking_charts.setOption(parking_charts_option);
            }
            autoEchart()
</script>
</body>
</html>

小皮皮不皮
关注
  • 5
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
易语言画板带滚动条加载图片
08-21
易语言画板带滚动条加载图片源码系统结构:易语言画板带滚动条加载图片源码,画板带滚动条加载图片 ======窗口程序集_启动窗口 || ||------__启动窗口_创建完毕 || ||------_纵向滚动条1_位置
jQuery实现带滚动线条导航效果的方法
10-24
主要介绍了jQuery实现带滚动线条导航效果的方法,分析了带滚动条导航效果的实现原理与相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Vue Echarts柱形图(带滚动效果)
z772330927的博客
06-28 2627
Vue Echarts柱形图 代码 <template> <div class="timeLineview"> <div v-bind:style="{ height: heightData + 'px' }" ref="categoryChart"></div> <div v-bind:style="{ height: noHeight + 'px' }" class="nomore"> {{ noData }}
React+Echarts实现数据排名+自动滚动+Y轴自定义toolTip文字提示
最新发布
陌上花开然不归矣
02-06 1052
React+echarts实现排名+自动滚动+X轴自定义titleTop
echart柱状图自动滚动
sunddy_x的博客
10-25 4530
效果图 代码 <template> <div ref="myChart" style="width: 600px; height: 400px;"></div> </template> <script> import * as echarts from 'echarts' export default { mounted() { this.initChart() }, methods: {
如何让echarts在vue里自适应外部div的大小
swiftlinlei的博客
09-06 4215
https://www.jianshu.com/p/174b6f6fc455
echarts结合react开发基础知识学习
tunchi9770的博客
08-23 1200
echarts基础知识学习 1.echarts简介 ECharts，一个使用 JavaScript 实现的开源可视化库，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等） 2.在react中安装echarts 在项目中安装： npm install --save echarts-for-react npm install echarts --save /...
echarts实现横向和纵向滚动条、dataZoom及其滚动条设置
热门推荐
細水、長流√的专栏
09-10 1万+
echart没有滚动条概念，有配置选项类似滚动条，通过手段模拟滚动条效果....省略很多字（难）
echarts柱状图数据太多设置滚动条
赵花花的博客
06-20 6610
记录主张图数据太多设置滚动条，数据排名，以及处理滚动条范围禁用使用小技巧
echarts 图表设置 滚动条
zhang_zan
08-10 4156
echarts图表设置滚动条
vue之echart表中datazoom配置用于左右滚动
牛先森家的博客
01-25 2047
dataZoom: [ { // start: 0, //默认为0 // end: 100 - 1500 / 31, //默认为100 endValue: 7, // 一次性展示7个。 type: "slider", show: true, xAxisIndex: [0], handleSize: 0, //滑动条的 左右
echarts实现横向和纵向滚动条、dataZoom
“代码农”微信公众号
04-11 7007
echarts实现横向和纵向滚动条、dataZoom
QmlTextEdit带滚动条QmlTextEditScrollBar.7z
07-20
QmlTextEdit带滚动条QmlTextEditScrollBar.7z
[分享]一个非常漂亮的进度滚动条
10-31
[分享]一个非常漂亮的进度滚动条
一个好看的滚动条插件
01-04
自动添加滚动条样式,当长-宽超出长度,自动增加滚动条...
echarts 关于折线图线型是要折线还是曲线
fengxiaopeng74的博客
01-03 2963
帮朋友看的时候有要求是线型要折线不要曲线,具体看图 而要求是: 关键的一句,就是  series: [{   //在series里面         name: '进港航班统计',         type: 'line',         symbolRotate:0,         // smooth: true, //如果你找的案例有这一句,请注释就可以了,具体作用可以去官网...
echarts安全等级三角
fengxiaopeng74的博客
07-24 1741
工作当中遇到了需要的图形 但是echarts重视倒三角的，而且他需要外面显示什么警告，里面显示数据，所以做起来有点难度，因为你放的数据不一样他可能就不是三角形了，所以下面这个案例其实是两个三角形叠一块儿了，其中一个用于显示样式，另一个用作显示真正的数据。好了代码如下，自己研究吧。 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&...
工作当中使用echarts提示框的一些心得
fengxiaopeng74的博客
07-24 1348
比较常见的问题就是我们显示的提示框的样式或者是提示框的内容要多加一些东西，这个时候很多人都很头疼， 那么我来给大家一种比较好理解的法子。 先来说说需要改成需要的内容 第一种： tooltip: { trigger: 'item', formatter: '{a} &lt;br/&gt;{b} : {c} %' //通过formatter 这些来设置自己要添加的单位如：...
echarts 滚动条
07-28
ECharts（Enterprise Charts）是百度开源的一个数据可视化库，它提供了丰富的图表类型和交互功能，滚动条也是其中的一项功能。 在 ECharts 中，可以通过设置图表的属性来启用滚动条。具体的步骤如下： 1. 在 HTML ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值