uni-app里画echarts图和小程序使用echarts区别

敲键盘的嘀嘀嘀

已于 2023-08-25 11:15:15 修改

阅读量271

点赞数

文章标签： uni-app echarts 小程序

于 2023-08-18 17:45:39 首次发布

本文链接：https://blog.csdn.net/weixin_46433620/article/details/132363392

版权

uni-app里画echarts图和小程序使用echarts区别

uni-app的H5使用echarts
- 小程序使用echarts

小程序因为版本问题不能像h5一样直接导入echarts，所以小程序需要下载包。

uni-app的H5使用echarts

先安装echarts插件，npm install echarts。
然后在main.js中导入

import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts;

接着将echarts代码封装起来，文件echarts里新建一个子组件minsutongji.vue，组件中封装echarts代码：

<template>
	<view>
		<div class="chart1" ref="chart"></div>
	</view>
</template>
 
<script>
	import echarts from "echarts";
	export default {
		props: {
		//父组件传过来的值
			xianmin:{
				type: Array,
				// 定义是否必须传
				required: false,
				// 定义默认值
				default: []
			},
			hotelnum:{
				type: Array,
				// 定义是否必须传
				required: false,
				// 定义默认值
				default: []
			},
		},
		mounted() {
			this.getEchartData()
		},
		watch:{//监听父组件中数据变化
		   hotelnum: {
				immediate: true,
				handler(value) {
				  this.hotelnum = value
				  this.getEchartData()
				}
			},
		},
		data() {
			return {
			}
		},
 
		methods: {
			// 折线图
			getEchartData() {
			  const chart = this.$refs.chart;
			  var option = null;
			  const myChart = this.$echarts.init(chart);
			  option = {
				  legend: {},
				  color:'rgba(9, 101, 98, 1)',
				  grid: {
				      left: '3%',
				      right: '4%',
				      bottom: '34%',
				      containLabel: true
				    },
				    xAxis: {
				      type: 'value'
				    },
				    yAxis: {
				      type: 'category',
				      data: this.xianmin
				    },
				    series: [
				      {
				        name: '数量',
				        type: 'bar',
				        stack: 'total',
				        label: {
				          show: true
				        },
				        emphasis: {
				          focus: 'series'
				        },
				        data: this.hotelnum
				      },
				    ]
			  };
			  myChart.setOption(option);
			  window.addEventListener("resize", function () {
				myChart.resize();
			  });
			  this.$on("hook:destroyed", () => {
				window.removeEventListener("resize", function () {
				  chart.resize();
				});
			  });
			  return option;
			},
			  
		},
 
	}
</script>
<style>
	.chart1 {
		width: 100%;
		height: 115%;
		display: block;
	}
</style>

父组件中调用子组件并传值，新建父组件index.vue，代码：

<template>
	<view>
		<minsutongji class="echarts2" :xianmin="xianmin" :hotelnum="hotelnum">
		</minsutongji>
	</view>
</template>
<script>
	import minsutongji from '@/components/echarts/minsutongji.vue'
	export default {
		components:{
			minsutongji
		},
		data() {
			return {
				// 民宿统计
				xianmin:[],//县名
				hotelnum:[],//民宿数量
			}
		},
		onLoad() {
			this.getMinsuliang()
			this.t1 = setInterval(function() {
			  this.getMinsuliang()
			}, 86400000);//一天刷新
		},
		beforeDestroy() {
		    // 页面关闭清除定时器
		    clearInterval(this.t1)
		  },
		methods: {
			//各县民宿数量
			getMinsuliang(){
				this.xianmin=[]
				this.hotelnum=[]
				this.$axios.get("/hotelReservation/mhotel/idcgetHotelData.action",
				{
				}).then(res => {
					if (res.data.code==200) {
						res.data.data.forEach(data => {
							// 县名字
							this.xianmin.push(data.hposition.slice(-7))
							// 民宿数量
							this.hotelnum.push(data.hotelNum)
						})
					} else {
					  console.log('获取民宿失败')
					}
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	//民宿统计图
	.echarts2{
		width:100%;
		height:280px;
	}
</style>

小程序使用echarts

首先下载echarts插件
官网中介绍到：echarts-for-weixin 项目提供了一个小程序组件，用这种方式可以方便地使用 ECharts。
echarts-for-weixin 下载地址：https://github.com/ecomfe/echarts-for-weixin

下载下来后解压后目录文件，将 “ec-canvas”文件夹放置小程序的项目目录下（我是放在pages目录下，这个无要求）：
github 网页下载时，可以看到 ec-canvas 的版本号为 5.3.3 版本；
在这里插入图片描述
接下来就是找到官网，去定制自己需要的图表;
官网地址：https://echarts.apache.org/zh/index.html

进入定制页面，往最下面翻，翻到如下图所示的方法三：在线定制

第一步，选择下载的版本；必须和上面下载的ec-canvas中的echarts.js的版本对应，如下图所示：
在这里插入图片描述
第二步，选择要打包的图表，其它默认，如下图所示：

第三步，翻到最下面，点击下载按钮，生成 echarts.min.js 文件，如下图：

3、替换 echarts.js 文件
下载完成后，找到你下载的文件：echarts.min.js；然后把项目中 “ec-canvas” 目录中的 echarts.js 文件替换为 echarts.min.js；
注意： ec-canvas.js的import引入的是原来的echarts.js文件，你需要自己改成刚才下载的文件。
三、小程序中使用 Echarts
新建子组件xuetangecharts.vue

<template>
	<view>
		<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="mychart-gauge" :ec="ec">
		</uni-ec-canvas>
	</view>
</template>
 
<script>
	import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '@/components/uni-ec-canvas/echarts.min.js'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		props: {
			beforeFan:{
				type: Array,
				// 定义是否必须传
				required: false,
				// 定义默认值
				default: []
			},
			afterFan:{
				type: Array,
				// 定义是否必须传
				required: false,
				// 定义默认值
				default: []
			},
			shuju:{
				type: Array,
				// 定义是否必须传
				required: false,
				// 定义默认值
				default:[],
			},
			shujuTime:{
				type: Array,
				// 定义是否必须传
				required: false,
				// 定义默认值
				default:[],
			}
		},
		mounted() {
			this.$refs.canvas.init(this.initChart)
		},
		watch:{
				beforeFan: {
					immediate: true,
					handler(value) {
					  this.beforeFan = value
					  this.$refs.canvas.init(this.initChart)
					}
				 },
				 afterFan: {
				 	immediate: true,
				 	handler(value) {
				 	  this.afterFan = value
				 	  this.$refs.canvas.init(this.initChart)
				 	}
				  },
			   shuju: {
					immediate: true,
					handler(value) {
					  this.shuju = value
					  this.$refs.canvas.init(this.initChart)
					}
			    },
		},
		data() {
			return {
				ec: {
					//是否懒加载, 将 lazyLoad 设为 true 后，需要手动初始化图表
					lazyLoad: true
				},
			}
		},
 
		methods: {
			initChart(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
 
				let option = {
					color: ['#f04864','#FFFFFF', 'rgba(0, 186, 173, 0.2)'],
					  legend: {
					    data: ['血糖值','最低', '最高']
					  },
					  padding: [0,27,15,8],
					  
					  xAxis: [
					    {
					      type: 'category',
					      boundaryGap: false,
					      data: this.shujuTime
					    }
					  ],
					  yAxis: [
					    {
						  // gridType: "dash",
					      type: 'value'
					    }
					  ],
					  series: [
						  {
						    // name: '血糖值',
						    type: 'line',
						    data: this.shuju,
						    symbolSize: 6
						  },
					    {
					      // name: '最低',
					      type: 'line',
					      stack: 'Total',
						  symbolSize: 0,
					      areaStyle: {},
						  emphasis: {
							  focus: 'series'
							},
					      data: this.beforeFan
					    },
					    {
					      // name: '最高',
					      type: 'line',
					      stack: 'Total',
						  symbolSize: 0,
					      areaStyle: {},
						  emphasis: {
							  focus: 'series'
							},
					      data: this.afterFan
					    },
						
					  ]
				};
				chart.setOption(option)
				return chart
			},
		},
 
	}
</script>
<style>
	.uni-ec-canvas {
		width: 764rpx;
		height: 528rpx;
		display: block;
		margin-top: 30rpx;
	}
</style>

父组件中

<template>
	<view>
		<xuetangecharts class="echarts" 
				:beforeFan="beforeFan" :afterFan="afterFan" :shuju="shuju" :shujuTime="shujuTime">
		</xuetangecharts>
	</view>
</template>
<script>
import xuetangecharts from '@/components/xuetangzoushi/xuetangecharts.vue'
	export default {
		components:{
			xuetangecharts
		},
		data() {
			return {
				shuju:[],
				shujuTime:[],
				beforeFan:[],//餐前范围
				afterFan:[],//餐后范围
			}
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>
<style lang="scss" scoped>
</style>