在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>