uniapp微信小程序使用echarts

2024-07-16 小程序 0

uni组件中无法引入uni-ec-canvas，或者引入uni-ec-canvas后也没有此依赖包，此时我们可以写组件来引用渲染。

1、引入组件

在pages.json中引入该组件

	"usingComponents": {	    "ec-canvas": "../../components/ec-canvas/ec-canvas"	},

在要使用echarts图的页面引入组件

详细代码如下

<template>	<view class="body">		<u-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="uni-ec-canvas" :ec="ec">		</u-ec-canvas>	</view></template><script>import uEcCanvas from '../components/uni-ec-canvas/test-ec.vue'import * as echarts from '../components/uni-ec-canvas/echarts.js'let chart = null		export default {		components: {			uEcCanvas		},    mounted() {        this.getData()    },    onUnload() {		echarts.dispose(this.$refs.canvas);	},    methods: {        initChart(canvas, width, height, canvasDpr) {					chart = echarts.init(canvas, null, {					  width: width,					  height: height,					  devicePixelRatio: canvasDpr,					  resize: true					})					let option = {						xAxis: {							type: 'category',							data: this.xdata,							axisLabel: {								rotate: -45, // 设置 x 轴标签旋转角度为 -45 度							}						},						yAxis: [							{								type: 'value',								name: "℃",								// min: 10							},							{								type: 'value',								name: "湿度",							}						],						series: [							{							  name: "温度",							  data: this.ydata,							  type: 'line',							  smooth: true,							  itemStyle: {								normal: {									color: "#00aaff"								}							  },							  areaStyle: {								  color: 'rgba(0, 170, 255, 0.2)'							  }							},							{								name: "湿度",								data: this.y2data,								type: 'line',								smooth: true,								itemStyle: {									normal: {										color: "#ff0000" // 设置第二条线的颜色									}								},								areaStyle: {									color: 'rgba(255, 0, 0, 0.2)' // 设置第二条线的区域颜色								},								yAxisIndex: 1 // 将第二条线的 y 轴设置为右边的 y 轴							}						],						legend: {							data: ['温度', '湿度'] // 设置图例名称						},						tooltip: {							trigger: 'axis', // 设置触发类型为坐标轴触发							// axisPointer: {							// 	type: 'cross' // 设置指示器类型为十字准星							// },							showContent: true, // 显示 Tooltip 内容							showDelay: 0, // 鼠标移入后立即显示							hideDelay: 0, // 鼠标移出后立即隐藏							triggerOn: 'click', // 设置触发方式为点击							hideOn: 'mouseout', // 鼠标移出时隐藏 Tooltip							formatter: function(params) {								return  `时间: ${params[0].name}	${params[0].seriesName}: ${params[0].value}	${params[1].seriesName}: ${params[1].value}`							}						},						dataZoom: [							{								type: 'slider',								show: true,								start: 0,								end: 10 / this.xdata.length * 100, // 默认显示最后10条数据								handleSize: 8,								height: 2,								top: '90%'							},							{								type: 'inside',								start: 0,								end: 10 / this.xdata.length * 100, // 默认显示最后10条数据								height: 2							}						]					}					canvas.setChart(chart)					chart.setOption(option)					return chart			},    }