首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Echarts统计图x轴实现拉伸滑动

Echarts统计图x轴实现拉伸滑动

作者头像
王小婷
发布2022-09-28 09:19:56
1.6K0
发布2022-09-28 09:19:56
举报
文章被收录于专栏:编程微刊编程微刊
dataZoom: [
                            {
                              type: "slider",
                              show: true,  // x轴是否启用 
                              start: 94,  // 从哪里开始显示 
                              end: 100,   // 到哪里结束显示
                              handleSize: 8,
                            },
                            {
                              type: "inside",
                              start: 94,
                              end: 100,
                            },
                            {
                              type: "slider",
                              show: false,   // y轴是否启用
                              yAxisIndex: 0,
                              filterMode: "empty"
                              ,
                              width: 12,
                              height: "70%",
                              handleSize: 8,
                              showDataShadow: false,
                              left: "93%",
                            },
                          ], 

demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
    </head>
    <body>
        <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
        <div id="mainE" class="col-md-12  col-sm-12 col-xs-12" style="height: 400px;width: 400px;"></div>
        <script>
          
          // ==============柱状图==============
          var names = []; //类别数组(实际用来盛放X轴坐标值)
          var staffs = [];
          $.ajax({
                url: "test.json",
              data: {
                  bTime:'',
                  eTime:''
              },
              type: 'GET',
              success: function (data) {
                  //请求成功时执行该函数内容,data即为服务器返回的json对象
                  $.each(data, function (index, item) {
                      names.push(item.x); //挨个取出类别并填入类别数组
                      staffs.push(item.y);
                  });
                  eFun(names, staffs);
              },
          });
          
          // 基于准备好的dom,初始化echarts实例
          var eChart = echarts.init(document.getElementById('mainE'));
          // 指定图表的配置项和数据
          function eFun(x_data, y_data) {
              eChart.setOption({
                  color: [
                      '#2EC7C9',
                  ],
                  legend: {
                      left: 120,
                      top: 20,
                      data: ['周平均时长'],
                      icon:'roundRect',
                      textStyle: { // 图例文字的样式
                          color: 'red',
                      },
                  },
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                          type: 'shadow'
                      }
                  },
                  grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      containLabel: true
                  },
                   dataZoom: [
                            {
                              type: "slider",
                              show: true,  // x轴是否启用 
                              start: 94,  // 从哪里开始显示 
                              end: 100,   // 到哪里结束显示
                              handleSize: 8,
                            },
                            {
                              type: "inside",
                              start: 94,
                              end: 100,
                            },
                            {
                              type: "slider",
                              show: false,   // y轴是否启用
                              yAxisIndex: 0,
                              filterMode: "empty"
                              ,
                              width: 12,
                              height: "70%",
                              handleSize: 8,
                              showDataShadow: false,
                              left: "93%",
                            },
                          ],
                 
                  xAxis: [
                      {
                          type: 'category',
                          data: x_data,
                          axisTick: {
                              alignWithLabel: true
                          },
                          axisLine: {
                              lineStyle: {
                                  color: 'red',
                                  width: 1, // 这里是为了突出显示加上的
                              }
                          },
       //                    axisLabel:{
       //                        interval:0,
       //                        textStyle:{
       //                            fontSize: 10,
       //                        },
                            //   //竖排统计
                            
                            //          formatter: function (value) {
                            //              //x轴的文字改为竖版显示
                            //              var str = value.split("");
                            //              return str.join("\n");
                            //          }
       //                    }
                      }
                  ],
                  yAxis: [
                      {
                          type: 'value',
                          axisLine: {
                              lineStyle: {
                                  color: 'red',
                                  width: 1, // 这里是为了突出显示加上的
                              }
                          },
                          splitLine:{
                              show:false
                          }
                      }
                  ],
                  series: [
                      {
                          name: '周平均时长',
                          type: 'bar',
                          barWidth: '60%',
                          data: y_data
                      }
                  ]
              })
          }
        </script>
    </body>
</html>

json

[
    {
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": "2022/1/22",
        "y": "35.3"
    },{
        "x": 2,
        "y": "35.3"
    }
]
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-09-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档