uniapp之 对ucharts图表的使用

 前言

因项目的需求，需要在小程序uniapp 的项目中渲染一个折线图，因此在搜索图表的时候发现了ucharts这个插件，最开始以为很简单，谁知道，这个组件却困扰我好几天

使用

1.查看官网

查看官网后，你会发现，很简单，就直接照着官网的提示、步骤来做就行了。

当我真正的把代码C完后，去运行的时候发现，图表不出来，这个问题，困扰了我一段时间，但最终在官网的常见问题中发现解决方法，

问题一 

 父组件  current === 1

 

子组件  current === 0 

 这里会有个疑问 为啥 在父组件中 current === 1 ，而在子组件里面设置为0，放心，这个我试过，0跟1 都可以使用

问题 二

虽说使用 reshow的方法，切换的时候图表按理说，是能显示出来的，但 最开始显示的是一个 图片，只有当你点击那个图片之后，图表才能显示出来，那这样岂不是给用户带来很不好的体验感吗，毕竟只想直接查看，不想点击查看

那这个方法，就需要在父组件的 data 里定义 current ：1，一来就展示图表，就不用考虑还需要点击才出来的问题了

补充点

组件中的

onReady() {
    this.getServerData();
  },


要改为 

在 mounted 里 发送这个请求

补充（1）

总代码

子组件 charging

注意 background="#1e2538" 要加这个属性否则 左右滚动时会出现白边

<template>
  <view class="">
    <view class="charts-box" v-if="chargeStatusList.chargingDataList !== null ">
      <qiun-data-charts type="line" :opts="opts" background="#1e2538" :chartData="chartData" :ontouch="true"
        :reshow="current === 1" />
    </view>
   
  </view>
</template>
<script>
  export default {
    name: "charging",
    props: ['chargeStatusList', 'current'],
    data() {
      return {
        pageNum: 1,
        pageSize: 5,
        opts: {
          color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
          padding: [15, 10, 0, 15],
          dataLabel: false,
          dataPointShape: false,
          enableScroll: true,
          legend: {},
          xAxis: {
            disableGrid: true,
            scrollShow: true,
            itemCount: 4,
            rotateLabel: true
          },
          yAxis: {
            gridType: "dash",
            dashLength: 2
          },
          extra: {
            line: {
              type: "curve",
              width: 2,
              activeType: "hollow",
              linearType: "custom",
              onShadow: true,
              animation: "horizontal"
            }
          }
        },
        chartData: {},
      };
    },
    mounted() {
      this.getServerData()
    },
    methods: {
      getServerData() {
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
            //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
            let res = {
              categories: this.chargeStatusList.chargingDataList.map((item) => {
                return item.dateTime.replace(' ', '\n')
              }),
              series: [{
                  name: "电压",
                  data: this.chargeStatusList.chargingDataList.map((item) => {
                    return item.outputVoltage
                  }),
                },
                {
                  name: "电流",
                  data: this.chargeStatusList.chargingDataList.map((item) => {
                    return item.outputCurrent
                  }),
                },
                {
                  name: "功率",
                  data: this.chargeStatusList.chargingDataList.map((item) => {
                    return item.power
                  }),
                },
                {
                  name: 'soc',
                  data: this.chargeStatusList.chargingDataList.map((item) => {
                    return item.soc
                  }),
                }
              ]
            };
            this.chartData = JSON.parse(JSON.stringify(res));
          },
          500);
      },
    }
  }
</script>

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

</style>

父组件

  <view class="flex justify-between align-center" style="margin-left: 16rpx;">
      <view class="scroll-view-item_H" v-for="(item,index) in items" :key="index">
        <view :class="{'active':current === index}" @click="checked(index)">
          {{item}}
        </view>
      </view>
    </view>

  
  <view class="content">
      <view v-show="current === 0">
        <chargeStatus :chargeStatusList="chargeStatusList">
        </chargeStatus>
      </view>
      <view v-show="current === 1">
        <charging :chargeStatusList="chargeStatusList" :current="current"></charging>
      </view>
    </view>


 data() {
      return {
        items: ['状态', '参数'],
        current: 0,
        chargeStatusList: {}
      };
    },

// 样式
 .scroll-view-item_H {
    width: 346rpx;
    height: 90rpx;
    margin-top: 32rpx;
    margin-right: 20rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 16px;
    border-radius: 20rpx;
    // margin-right: 38px;
    font-family: DengXian-Bold;
    background-color: #fff;
  }

  .active {
    border-radius: 20rpx;
    color: #fff;
    background-color: #427cb2;
  }

样式   rotateLabel: true (x轴文字倾斜)

总结（2）

x轴滚动的方法

（1）  加  :ontouch="true" background="#040f25"

 <view class="charts-box">
          <qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" background="#040f25" />
 </view>

（2）opts 中的   enableScroll: true,  scrollShow: true

  xAxis: {
            disableGrid: true,
            scrollShow: true, 
            itemCount: 4,
          },