uCharts如何设置x轴可滚动并解决白边

uCharts如何设置x轴可滚动并解决白边

1.基础配置

先摆一段基础代码出来（这是官网演示里面的基础柱状图）：

<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="column"
      :opts="opts"
      :chartData="chartData"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      chartData: {},
      //您可以通过修改 config-ucharts.js 文件中下标为 ['column'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
      opts: {
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [15,15,0,5],
        enableScroll: false,
        legend: {},
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        }
      }
    };
  },
  onReady() {
    this.getServerData();
  },
  methods: {
    getServerData() {
      //模拟从服务器获取数据时的延时
      setTimeout(() => {
        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
        let res = {
            categories: ["2018","2019","2020","2021","2022","2023"],
            series: [
              {
                name: "目标值",
                data: [35,36,31,33,13,34]
              },
              {
                name: "完成量",
                data: [18,27,21,24,6,28]
              }
            ]
          };
        this.chartData = JSON.parse(JSON.stringify(res));
      }, 500);
    },
  }
};
</script>

<style scoped>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>

效果如下：

可以看到在常规分辨率下这个charts图基本算是变形了，挤在一起，这显然不是我们想要的。

2.设置滚动

2.1.开启滚动

开始设置滚动，首先要开启滚动。配置参考官网。

我们需要设置enableScroll和xAxis里面的itemCount，这时我们的配置如下：

opts: {
        color: [
          "#1890FF",
          "#91CB74",
          "#FAC858",
          "#EE6666",
          "#73C0DE",
          "#3CA272",
          "#FC8452",
          "#9A60B4",
          "#ea7ccc"
        ],
        padding: [15, 15, 0, 5],
        enableScroll: true,
        legend: {},
        xAxis: {
          disableGrid: true,
          itemCount: 3
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 30,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08
          }
        }
      }

效果如下：

2.2.开启触摸事件

当我们开启了滚动之后，可能有的人会发现我们好像滚不动，滑动不了，如果出现这种情况，那我们需要开启触摸事件。配置参考官网。

我们需要设置ontouch，这时我们的配置如下：

  <view class="charts-box">
    <qiun-data-charts
      type="column"
      :opts="opts"
      :chartData="chartData"
      ontouch
    />
  </view>

要注意这个ontouch是组件的参数（props），不是opts里面的参数，opts本身就是一个组件参数。

2.3.滚动条设置

到了上一步之后，其实已经是完全开启滚动了，但是可能有时候需要设置滚动条样式甚至需要隐藏滚动条。参考官网配置。

滚动条的设置都是在x轴里面设置的，以下是一个例子，为了方便看到滚动条样式，我修改了界面（不是charts而是外面那个view）背景颜色。这时我们的配置如下：

 xAxis: {
   disableGrid: true,
   itemCount: 3,
   scrollShow: true,
   scrollBackgroundColor: "red",
   scrollColor: "yellow"
 }

效果如下：

2.4.解决白边

可以看到我们的charts图上左侧存在白边，具体原因不做推敲，因为官网里面已经给出解决方法，那就是使charts背景颜色和外面的view颜色保持一致。

要注意这个background是组件参数，不是opts里面的参数，所以这时我们的配置如下（我设置的背景颜色是#174498）：

  <view class="charts-box">
    <qiun-data-charts
      type="column"
      :opts="opts"
      :chartData="chartData"
      ontouch
      background="#174498"
    />
  </view>

效果如下：

至此完结。