uniapp微信小程序+echarts简单图表以及与后端交互-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序+echarts简单图表以及与后端交互。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果图：

uniapp微信小程序+echarts简单图表以及与后端交互

文章来源地址https://www.toymoban.com/news/detail-491483.html

需要的两个主要文件就是 echarts.min.js 和 echarts.vue

1、echarts.min.js 可以去官网定制链接 ECharts 在线构建或者直接去GitHub - Tawesome666/echarts: echarts 下载

（注意：我这个只有柱状图和折线图）

2、echarts.vue 可以使用 Visual Studio Code 打开你的文件夹使用命令 npm install echarts mpvue-echarts 执行完了后在node-module 把mpvue-echarts 中 src 文件夹复制到 components 文件夹下

3、上代码这个是没与后端交互的第四点是与后端交互的代码 （不与后端交互的可以直接扣下面代码就有效果了）

<template>
	<view>
		<view class="box1">
			<my-echarts id="main" ref="mapChart" :echarts="echarts" :onInit="init" />
		</view>
	</view>
</template>

<script>
	import * as echarts from '../../common/echarts.min.js'; 
	import myEcharts from '@/components/mpvue-echarts/src/echarts.vue';
	export default {
		data() {
			return {
				
			}
		},
		components:{
			myEcharts
		},
		methods: {
			init(canvas, width, height) {
				let chart = null
				chart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				let option = {
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [150, 230, 224, 218, 135, 147, 260],
						type: 'line'
					}]
				};
				chart.setOption(option);
				return chart; // 返回 chart 后可以自动绑定触摸操作
			},
        }
	}
</script>


<style lang="scss">
	.box1 {
		width: 94%;
		height: 500rpx;
		background-color: #fff;
		margin: 10px auto;
	}
</style>

4、与后端交互的代码主要实现就是在这个 init函数内执行请求

<template>
	<view>
		<view class="box1">
			<my-echarts id="main" ref="mapChart" :echarts="echarts" :onInit="init" />
		</view>
	</view>
</template>


<script>
    import * as echarts from '../../common/echarts.min.js';
	import myEcharts from '@/components/mpvue-echarts/src/echarts.vue';
    export default {
		data() {
			return {
				Xdata:[],
				Ydata:[]
			}
		},
		components:{
			myEcharts
		},
		methods: {
			init(canvas, width, height) {
				const echarr = []
				const waringnum = []   
				this.$myHttp({ 					//与后端请求
					url: WarnLineGraph,
					method: "GET",
				}).then(res => {
					let arr = res.data.data
					arr.forEach(item => {
						echarr.push(item.warningTime)
						waringnum.push(item.warningNum)
					})
					this.Xdata = echarr
					this.Ydata = waringnum

					let chart = null
					chart = echarts.init(canvas, null, {
						width: width,
						height: height
					});
					let option = {
						xAxis: {
							type: 'category',
							data: this.Xdata,    //后端的数据
							axisTick: {
								//y轴刻度线
								show: false,
							},
							// "axisLabel": {
							// 	"interval": 0,
							// 	"rotate": 30
							// },
						},
						yAxis: [{
							type: 'value',
							axisTick: {
								show: false, //去除y轴刻度线
							},
						}, ],
						series: [{
							data:this.Ydata,   //后端的数据
							type: 'line',
							symbolSize: 6, // 圆点大小
							itemStyle: {
								// 线条样式
								normal: {
									color: "#0080ff",
									lineStyle: {
										color: "#0080ff",
									},
								},
							},
						}],

					};
					chart.setOption(option);
					return chart; // 返回 chart 后可以自动绑定触摸操作
				})
			},
		}
	}
    
</script>


<style lang="scss">
	.box1 {
		width: 94%;
		height: 500rpx;
		background-color: #fff;
		margin: 10px auto;
	}
</style>

5、报错处理