在uni-app + vue3 App端使用图表库--uCharts最近做app端需要用到图表库，之前的项目都是用ec

最近做app端需要用到图表库，之前的项目都是用echart，由于app端中使用图表还是第一次。倒腾了很久很久之后我终究还是没有在uni-app + vue3中实现使用echart，由于项目太赶先使用uChart, 后续继续研究echarts怎么在uni-app + vue3中使用（有知道的大神，欢迎留言🙇‍🙇‍🙇‍🙇‍🙇‍🙇‍）

目前echarts for uniapp还不支持Vue3 和App端，所以使用uCharts

在插件市场导入uCharts插件

全局配置默认参数

通过修改 config-ucharts.js 文件来配置全局默认参数，统一项目样式，如柱状图、折线图的x、y轴线、图例位置等基本样式

自定义format配置

//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
  "formatter":{
    ...
    "xAxisInter1":function(val, index, opts){
        // x轴隔一个显示
        if((index + 1) % 2 == 0){
            return val
        }else{
            return ' '
        }
    },
  },

配置图例、坐标轴、网格线等基本样式

图例顶部显示（uchart中默认显示在底部）：

"legend": {"position":"top"},

注： "top"在这里是字符串，但是使用单引号时，没有设置成功，得使用双引号

数据上方的数据文案是否显示（如柱状图中柱子上方的文字默认是显示的，开发中常设置成不显示）："dataLabel": false
x轴设置：
- 轴线颜色："axisLineColor": "#add9de",
- 轴线文字自定义："format": "xAxisInter1"，这里的xAxisInter1就是上面自定义format配置中自己配置的函数，在这里直接用就行

完整配置如下：

   "xAxis": {
          "disableGrid": true, // 不绘制纵向网格
          "axisLine": true,
          "axisLineColor": "#add9de",
          "format": "xAxisInter1"
    },

y轴设置：在echart中x和y轴的设置一样，但是在uChart中不太一样，比如设置y轴轴线颜色在uChart中需要通过yAxis.data[i]的形式来设置，如下：
```
"data":[{
    "axisLineColor": "#add9de",
}]
```
- 横向网格线："gridType": "dash"这里是虚线，也可以使用实线"solid"
- 横向网格线颜色"gridColor": "#add9de",

完整配置：

  "yAxis": {
          "gridType": "dash",
          "dashLength": 5,
          "gridColor": "#add9de",
          "data":[{
              "axisLineColor": "#add9de",
           }]
  },

完整的全局option如下（这里配置的默认图表是柱状图 colum）：

// config-ucharts.js 
...
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
    "demotype":{
        //我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
        "type": "column",
        "color": color,
        "legend": {
            "position":"top"
        },
        "padding": [15,10,0,15],
        "dataLabel": false, //  是否显示数据上方的数据文案
        "xAxis": {
          "disableGrid": true, // 不绘制纵向网格
          "axisLine": true,
          "axisLineColor": "#add9de",
          "format": "xAxisInter1"
        },
        "yAxis": {
          "gridType": "dash",
          "dashLength": 5,
          "gridColor": "#add9de",
          "data":[{
              "axisLineColor": "#add9de",
           }]
        },
        "extra": {
            "column": {
                type: "group",
                width: 5,
                activeBgColor: "#000000",
                activeBgOpacity: 0.08,
                linearType: "opacity",
                seriesGap: 2,
                linearOpacity: 0.5,
                barBorderCircle: true,
                customColor: [
                  "#188df0"
                ]
            },
        }
    },

另外可以配置额外的一些参数，更多配置点击查看

first uchart(uni-app + vue3)

首先需要一个chart的容器

<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="demotype"
      :chartData="state.chartData"
    />
  </view>
</template>

type="demotype"：使用全局配置里的demotype，这个名字可以随意配置

:opts：这里默认使用全局配置的样式，不增加新样式。如果需要修改某些样式，可以绑定:opts 属性。

<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="demotype"
      :opts="state.opts"
      :chartData="state.chartData"
    />
  </view>
</template>
<script setup>
    import { reactive, onMounted,toRefs } from 'vue'

    let state = reactive( {
        chartData: {},
        opts: {}
    })
    state.opts = {
        color: ["#188df0","#73C0DE"],
        padding: [15,15,0,5],
        legend: {
            positon:'top'
        },
        xAxis: {
          disableGrid: true
        },
        yAxis: {
          data: [
            {
              min: 0
            }
          ]
        },
        extra: {
          column: {
            type: "group",
            width: 10,
            activeBgColor: "#000000",
            activeBgOpacity: 0.08,
            linearType: "opacity",
            seriesGap: 5,
            linearOpacity: 0.5,
            barBorderCircle: true,
            customColor: [
              "#188df0"
            ]
          }
        }
    }
    ...
    </script>

:chartData="state.chartData" ：主要绑定chart用到的数据，如series的值和横坐标值等。

chartData是响应式的对象，通过reactive定义

    import { reactive, onMounted,toRefs } from 'vue'

    let state = reactive( {
        chartData: {}
    })

定义获取数据的函数，一般从服务器获取，这里用静态数据代替

function getServerData(xData,yData,name) {
        let res = {
            categories: xData,
            series: [
              {
                name: name,
                data: yData
              }
            ]
        }
        state.chartData = JSON.parse(JSON.stringify(res));
    }

最后，初始化渲染整个图表应该放在mounted中，setup相当于create

onMounted(() => {
        let xData = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
        let yData = [410,425,400,580,460,458,498,488,417,506,520,538,469,,,,,,,,,,,];
        getServerData(xData,yData,"总功率");
    })

最后的最后：最最最重要的一点，不要忘记给容器高度！！！！！！！！！

<style scoped>
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>

如上完整vue3文件如下：

<template>
  <view class="charts-box">
    <qiun-data-charts 
      type="demotype"
      :chartData="state.chartData"
    />
  </view>
</template>

<script setup>
    import { reactive, onMounted,toRefs } from 'vue'

    let state = reactive( {
        chartData: {}
    })
    
    function getServerData(xData,yData,name) {
        let res = {
            categories: xData,
            series: [
              {
                name: name,
                data: yData
              }
            ]
        }
        state.chartData = JSON.parse(JSON.stringify(res));
    }
  
    onMounted(() => {
        let xData = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
        let yData = [410,425,400,580,460,458,498,488,417,506,520,538,469,,,,,,,,,,,];
        getServerData(xData,yData,"总功率");
    })

</script>

<style scoped>
  .charts-box {
    width: 100%;
    height: 300px;
  }
</style>

效果图：