项目场景:
在H5页面中插入ucharts图表
使用步骤
准备工作:
uCharts官网地址:https://www.ucharts.cn/
uni-app插件市场uCharts高性能跨全端图表 https://ext.dcloud.net.cn/plugin?id=271
1.导入/下载插件(我是直接导入的)
使用的话有两种方式,原生方式和组件方式(具体请看官方文档)
2.代码部分
HTML部分
<template>
<view class="charts-box">
<qiun-data-charts type="line" :chartData="chartData" />
</view>
</template>
js部分
<script>
export default {
data() {
return {
chartData: {
},
};
},
onReady() {
this.getServerData();
},
methods: {
getServerData() {
//模拟从服务器获取数据时的延时
setTimeout(() => {
let res = {
"categories": ["4.3","4.4","4.5","4.6","4.7","4.8"],
"series": [{
"name": "最低值",
"data": [92.5,91.8,92.3,93,90.7,93