使用 HBuilder X开发工具
● 通过 uni-app 插件市场 uCharts 发布页面点击使用 HBuilderX 导入插件
按钮导入到您的项目中 点击进入
● uCharts官网 点击进入
不需要引入直接使用
HTML部分
<template>
<view class="charts-box">
<qiun-data-charts type="column" :chartData="chartData" />
</view>
</template>
JS部分
<script>
export default {
data() {
return {
chartData: {},
};
},
onReady() {
this.getServerData();
},
methods: {
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]
}
]
};
this.chartData = JSON.parse(JSON.stringify(res));
}, 500);
},
}
};
</script>
CSS部分
<style scoped>
.charts-box {
width: 100%;
height: 300px;
}
</style>