vue3 uni app端使用uCharts

uni-modules引入组件方法

在插件市场找到组件,直接引入项目

秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场

引入后在uni-modules的目录如下

在页面使用时

<div id="app"><!-- 必须要有父元素包裹 --><div class="charts-box"><qiun-data-chartstype="line":opts="opts":chartData="chartData"/></div></div>此处组件名称要和引入的组件名称保持一致<script setup lang="ts">import { onShow , onLoad } from "@dcloudio/uni-app"onShow(() => {getServerData();})const chartData = ref({});
const opts = ref({color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],padding: [15,15,0,5],legend: {},xAxis: {disableGrid: true},yAxis: {data: [{min: 0}]},extra: {column: {type: "group",width: 30,activeBgColor: "#000000",activeBgOpacity: 0.08}}});// onMounted(() => {
//     getServerData();
// })function getServerData() {//模拟从服务器获取数据时的延时setTimeout(() => {//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接let res = {categories: ["2016","2017","2018","2019","2020","2021"],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);
}</script> 
<style lang="scss" scoped>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;border:1px solid red;
}
.charts-box{width: 50%;min-width: 375px !important;height: 400rpx;margin-left: auto;margin-right: auto;border:1px solid blue;
}<style>