在uni-app中使用charts图表

在uni-app官网，查找秋云 ucharts echarts 高性能跨全端图表组件

点击下载插件并导入HBuilderX

打开uni-app的charts官网   https://www.ucharts.cn/v2/#/

点击指南

找到组件方式

点击右上角演示抗议出现多种图表

根据代码进行复制即可

<template><view class="content"><view class="charts-box"><qiun-data-charts type="column":opts="opts":chartData="chartData"/></view></view>
</template><script setup lang="ts">
import { ref, onMounted } from 'vue';const chartData = ref({});
const opts = ref({color: ["#FAC858","#EE6666","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],padding: [15,15,0,5],enableScroll: false,legend: {},xAxis: {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: ["#FA7D8D","#EB88E2"]}}
});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);
};onMounted(() => {getServerData();
});
</script><style scoped>
.charts-box {width: 100%;height: 300px;
}
</style>