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" 要加这个属性否则 左右滚动时会出现白边

父组件

  
      
        
          {{item}}
        
      
    

  
  
      
        
        
      
      
        
      
    


 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"

 
         
 

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

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