uniapp通过ucharts实现图表的显示

在做项目时避免不了要完成数据的分析及数据的可视化，uniapp可以使用ucharts和echarts来实现数据的可视化，今天，我们就来学习一下用ucharts来实现图表。

具体代码可参考秋云官网：uCharts官网 - 秋云uCharts跨平台图表库

我们现在先用本地数据实现图表（以饼图为例）

<template>
	<view class="charts-box">
		<qiun-data-charts type="pie" :opts="opts" :chartData="Bing" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Bing: {}
				}
			};
		},
		onReady() {
			this.getBing();
		},
		methods: {
			getBing() {
				setTimeout(() => {
					let res = {
						series: [{
							"data": [{
									"name": "月薪:0-15k",
									"value": 50
								},
								{
									"name": "月薪:15-20k",
									"value": 30
								},
								{
									"name": "月薪:20-30k",
									"value": 20
								},
								{
									"name": "月薪30k+",
									"value": 18
								}
							]
						}]
					};
					this.Bing = JSON.parse(JSON.stringify(res));
				}, 500);
			},
		}
	};
</script>

<style scoped>
</style>

opts: {
                    color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
                        "#ea7ccc"
                    ],
                    padding: [5, 5, 5, 5],
                    enableScroll: false,
                    extra: {
                        pie: {
                            activeOpacity: 0.5,
                            activeRadius: 10,
                            offsetAngle: 0,
                            labelWidth: 15,
                            border: true,
                            borderWidth: 3,
                            borderColor: "#FFFFFF",
                            linearType: "custom"
                        }
                    } 

同理，柱状图以及折线图可以根据此来完成

现在，可以通过服务器获取数据，如果获取的数据如下：

{
  "series": [
    {
      "data": [
        {
          "name": "月薪:0-15k",
          "value": 50
        },
        {
          "name": "月薪:15-20k",
          "value": 30
        },
        {
          "name": "月薪:20-30k",
          "value": 20
        },
        {
          "name": "月薪30k+",
          "value": 18
        }
      ]
    }
  ]
}

这样可以通过request请求获取数据

<template>
	<view class="charts-box">
		<qiun-data-charts type="pie" :opts="opts" :chartData="Bing" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Bing: {}
				}
			};
		},
		onReady() {
			this.getBing();
		},
		methods: {
			getBing() {
				uni.request({
					url: '你的服务器数据地址',
					method: 'GET',
					data: {},
					success: res => {
						console.log(res.data);
						this.Bing = res.data
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	};
</script>

<style scoped>
</style>

 折线图以及柱状图也是相同用法。

作者声明：由于本人才疏学浅，本文可能会出现错误，望诸位海涵

如有侵权，请联系作者删除