uni-app使用uCharts和一些基础配置

官方文档：https://www.ucharts.cn/v2/#/guide/index

1. 这里我使用的是组件方式， https://ext.dcloud.net.cn/plugin?id=271 在这里HBuilderX 导入插件
2. 使用(折线图)

• 配置：是否显示数据点的图形标识

let opts = {
    dataPointShape: false, //是否显示数据点的图形标识
}

• 配置：是否显示是否显示图例标识

let opts = {
    legend: {show:false},
}

• 配置：x轴显示的数量

let opts = {
     xAxis: {
        labelCount:6, //x轴显示的数量
  },
}

• 配置：y轴保留几位小数

let opts = {
     yAxis: {
       gridType: "dash",
       dashLength: 2,
       tofix:3,//刻度保留小数位数
  },
}

• 完整代码

<template>
      <view class="vibration-chart">
            <view class="vibration-chart-title">趋势图</view>
            <view class="vibration-chart-box">
                <view class="vibration-chart__">
                    <qiun-data-charts
                      type="area"
                      :opts="opts"
                      :chartData="chartData"
                    />
                </view>
            </view>
        </view>
</template>
<script>
     export default {
        data() {
            return {
                timeData:[],
                data:[],
                vibrationForm:'',
                chartData: {},
                opts: {
                  update: true,
                  duration:0,
                  animation:false,
                  padding: [15,25,10,15],
                  dataLabel: false, //是否显示图表区域内数据点上方的数据文案
                  dataPointShape: false, //是否显示数据点的图形标识
                  enableScroll: false, //开启滚动条，X轴配置里需要配置itemCount单屏幕数据点数量
                  legend: {
                    show:false
                  },
                  xAxis: {
                    labelCount:6, //x轴显示的数量
                    format: "formatterTime", //需要修改源码
                    disableGrid: true,
                    rotateLabel:true,
                    rotateAngle:-50,
                  },
                  yAxis: {
                    gridType: "dash",
                    dashLength: 2,
                    tofix:3,//刻度保留小数位数
                  },
                  extra: {
                    area: {
                        type: "curve",
                        opacity: 0.8,
                        addLine: true,
                        width: 2,
                        gradient: true,
                        activeType: "hollow"
                      }
                  }
                }
            }
        },
onReady() {
this.chartData = JSON.parse(JSON.stringify({
                        categories: ["2023-01-12 16:12:12","2023-01-12 17:12:12","2023-01-12 18:12:12"],
                        series: [{
                           name: "数据",
                           data: [1,2,5]
                        }]
                        })
                    );
}
</script>

• 结果

  
  image.png