vue3使用uCharts

# vue3使用uCharts

### 初始化项目

创建vue项目

![image-20240715112056209](http://banmag.cn:8089/i/2024/07/15/669495974ddd1.png)

```bash
npm init vue@latest
```

选择以下进行安装

![image](http://banmag.cn:8089/i/2024/07/15/669478a563571.png)

安装依赖并启动项目

![image](http://banmag.cn:8089/i/2024/07/15/669478a800904.png)

### 安装

官方提供过了两种使用方式：原生方式和组件方式，组件方式适用于`uniapp`和`原生小程序`，其他的就需要使用原生方式了

```bash
npm i @qiun/ucharts
```

官方文档提到如下

![image](http://banmag.cn:8089/i/2024/07/15/6694c51e1ed4a.png)

我们看下安装的包里面有哪些内容

![image](http://banmag.cn:8089/i/2024/07/15/6694c51f600c0.png)

![image](http://banmag.cn:8089/i/2024/07/15/6694c52058f0b.png)

的确如同官方说明，只需要引入两个js文件就行了，那么我们也可以直接放到本地代码中使用，可以方式版本更新问题

### 使用

接下来尝试一个柱状图

![image](http://banmag.cn:8089/i/2024/07/15/6694c521ae30f.png)

点开`查看代码`之后可以看到多个框架的代码，我们尝试一下`vue`的

在`vue`代码中提到需要安装`npm i @qiun/vue-ucharts`才可以，因此删除之前安装的`@qiun/ucharts`

![image](http://banmag.cn:8089/i/2024/07/15/6694c522b90be.png)

```vue
<script setup>
// 需要在您的项目内执行 npm i @qiun/vue-ucharts
import qiunVueUcharts from '@qiun/vue-ucharts'
  import { ref } from "vue";
  // 配置数据  图表数据，类似 ECharts 的数据格式
  let chartData = ref({});

// 参数配置 uCharts图表配置参数(option)
  let opts = ref({
    // 图例的颜色
    color: [
      "#f00",
      "#0ff",
    ],
    // 间距
    padding: [15, 15, 0, 5],
    // 是否允许滚动
    enableScroll: false,
    legend: {},
    xAxis: {
      // 是否显示网格线  true不显示  false显示  默认是false
      disableGrid: true
    },
    yAxis: {
      data: [
        {
          min: 0
        }
      ]
    },
    extra: {
      column: {
        type: "group",
        width: 30,
        activeBgColor: "#000000",
        activeBgOpacity: 0.08,
        linearType: "custom",
        seriesGap: 5,
        linearOpacity: 0.5,
        barBorderCircle: true,
        customColor: ["#ff0", "#f0f"]
      }
    }
  });

// 模拟获取数据
  const 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]
          }
        ]
      };
      chartData.value = JSON.parse(JSON.stringify(res));
    }, 500);
  };
  getServerData();
</script>

<template>
  <div class="charts-box">
    <qiun-vue-ucharts type="column" :opts="opts" :chartData="chartData" :loadingType="3" />
  </div>
</template>
<style>
  /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
  .charts-box {
    width: 500px;
    height: 300px;
  }
</style>

```

配置参数 https://www.ucharts.cn/v2/#/guide/index

组件配置应该是需要在`组件工具`中查看，但是需要花钱才能看

![image](http://banmag.cn:8089/i/2024/07/15/6694c523bf59e.png)

‍

### 总结

总体而言还算是可以吧，如果需要再项目中使用需要开通说明文档才可以，有点是能够`自适应`，不需要再监听窗口变化了

‍