首页 > 其他分享 >echarts -- x轴数据显示不全,添加滑动条

echarts -- x轴数据显示不全,添加滑动条

时间:2023-02-11 09:55:19浏览次数:54  
标签:15 14 -- 滚动条 378 滑动 type echarts 377

 

 添加dataZoom属性即可显示滚动条

option = {
      tooltip: {
            trigger: 'axis'
        },
        grid: {
            top:"20%",
            left: '8%',
            right: '8%',
            bottom: '0',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:["13:39:30", "13:49:30", "13:59:30", "14:09:31", "14:19:32", "14:29:32", "14:39:33", "14:49:33", "14:59:34", "15:09:35", "15:19:35", "15:29:36", "15:39:36", "15:49:37"],
            axisLabel:{ 
                rotate : 50,
            },
            textStyle: {
              color: "#a9a9a9", //更改坐标轴文字颜色
              fontSize: 12 //更改坐标轴文字大小
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter:'{value} w',
            },  
        },
         dataZoom: [{  //添加dataZoom属性即可显示滑动条
                type: 'slider',
                show: true, //flase直接隐藏图形
                xAxisIndex: [0],
                left: '9%', //滚动条靠左侧的百分比
                bottom: -5,
                start: 0,//滚动条的起始位置
                end: 50 //滚动条的截止位置(按比例分割你的柱状图x轴长度)
          }],
        series: [
            {
                name: '功率',
                type: 'line',
                stack: 'Total',
                data:[378, 377, 376, 371, 377, 376, 375, 377, 375, 377, 378, 377, 378, 378, 376]
            }
        ]
    };

 

标签:15,14,--,滚动条,378,滑动,type,echarts,377
From: https://www.cnblogs.com/yunyin/p/17110912.html

相关文章

  • 华普物联双串口服务器 HP-ERS-T222
    HP-RES-T222双串口服务器用于实现串口到以太网口的数据的双向透明传输。用户无需关心具体细节,服务器内部完成协议转换。串口一侧实现串口数据的透明传输,以太网口一侧则是TC......
  • Anaconda
    在终端中输入命令 condalist ,显示已经安装的包名和版本号。在终端中输入 anaconda-navigator ,AnacondaNavigator将会被启动。 创建新环境condacreate--name......
  • 07-verilog & sytem verilog
    数据类型二值逻辑变量bit不赋值的时候,变量初始默认为0x或z的值会转变为0bitvector--bit矢量bit[msb,lsb]variable_name=[initial_value]位宽:最高位为MSB......
  • 旅游线路详情-前台代码
    前台代码Route_detail.html页面加载后1、获取rid2、发送ajax请求,获取route对象3、解析对象的数据Route_detail.html页面:$(function(){//1......
  • 机器学习-Kmeans
    前言K-means是一种经典的无监督学习算法,用于对数据进行聚类。K-means算法将数据集视为具有n个特征的n维空间,并尝试通过最小化簇内平方误差的总和来将数据点划分为簇。本文......
  • 华普物联四串口服务器HP-ERS-T244
    HP-RES-T244四串口服务器用于实现串口到以太网口的数据的双向透明传输。用户无需关心具体细节,服务器内部完成协议转换。串口一侧实现串口数据的透明传输,以太网口一侧则是TC......
  • generator & async await
    Generator和Async简介在讲Generator之前,咱们要来先了解另外一个概念,迭代器.迭代器Iterator迭代器Iterator是ES6引入的一种新的遍历机制,同时也是一种特殊对象......
  • B3612 【深进1.例1】求区间和
    题目链接方法一:纯模拟50分#include<bits/stdc++.h>usingnamespacestd;intn,m;inta[100010];intl,r;intans;intmain(){ cin>>n; for(inti=1;i<=n;i+......
  • redis 单线程? 多线程?
    redis单线程?多线程?没有锁的竞争,没有线程的上下文切换。主要的性能瓶颈是内存或者网络带宽而非CPU1.redis3.x版本,也就是大家口口相传的redis是单线程2.redis4.x版本,严......
  • 程序员接外包注意事项
    写这篇文章的起由今日周六,人在苏州。尾款未给,百感交集。恰逢周末,提笔与君叙一二。 都是打工人,都想多赚点钱,笔者也如此,去年年底拿了房,有车贷,有房贷,然后拿房后又要装修......