uni-app：服务器端数据绘制echarts图标（renderjs解决手机端无法显示问题）

效果

代码

html 复制代码

<template>
	<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: '',
			}
		},
		mounted() {
			this.getData(); // 在组件挂载后调用获取数据的方法
		},
		methods: {
			getData() {
				uni.request({
					url: getApp().globalData.position + 'Other/select_sale_ekanbaninfo',
					data: {},
					header: {
						"Content-Type": "application/x-www-form-urlencoded"
					},
					method: 'POST',
					dataType: 'json',
					success: res => {
						//月统计
						var monthinfo = res.data.month_info;
						this.monthinfo = monthinfo;
						//显示图表
						this.echart();
					},
					fail(res) {
						console.log("查询失败")
					}
				});
			},
			echart() {
				//月统计
				// 提取日期和对应的值
				var dates1 = this.monthinfo.date;
				var values1 = this.monthinfo.total_amount;
				var months1 = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
				var months1_chinese = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"];
				this.option = {
					//配置网格组件，用于定义图表的位置和大小
					grid: {
						top: '15%', // 增加top的值来创建间距
						left: '2%',
						right: '2%',
						bottom: '2%', // 增加bottom的值来创建间距
						containLabel: true, //自动计算并包含坐标轴标签、刻度和标题等内容在内。
					},
					color: ['#5588d4'],
					tooltip: {
						trigger: 'item',
						axisPointer: {
							type: 'line'
						},
						formatter: function(params) {
							var value = values1[params.dataIndex];
							var date = dates1[params.dataIndex];
							var month = months1_chinese[params.dataIndex];
							var marker = params.marker; // 添加marker(小圆点)
							return marker + ' ' + date + '<br/>' + month + ' : ' + value + '万元';
						}
					},
					xAxis: {
						// name: '日期',
						data: months1,
						axisLine: {
							show: false // 隐藏纵坐标轴的横线
						},
						//隐藏小刻度短线
						axisTick: { // x轴刻度相关配置
							show: false, // 是否显示x轴刻度线
						},
						nameTextStyle: {
							fontSize: 12 // 设置横轴名称字体大小为12
						}
					},
					yAxis: {
						name: '金额(万元)',
						splitLine: {
							show: false // 隐藏纵坐标轴的背景横线
						},
						axisLine: {
							show: false // 隐藏纵坐标轴的竖线
						},
						//隐藏小刻度短线
						axisTick: { // x轴刻度相关配置
							show: false, // 是否显示x轴刻度线
						},
						axisLabel: {
							fontSize: 12 // 设置横轴标签字体大小为12
						},
						nameTextStyle: {
							fontSize: 12 // 设置横轴名称字体大小为12
						}
					},
					series: [{
						barWidth: '6',
						name: '销量',
						type: 'bar',
						data: values1,
						itemStyle: {
							show: true,
							position: 'top',
							textStyle: {
								// color: '#515dc3',
								fontSize: 12
							}
						}
					}]
				}
			}
		}
	}
</script>
<!-- 指定脚本类型模块为echarts,语言为renderjs -->
<script module="echarts" lang="renderjs">
	let myChart
	export default {
		mounted() {
			// 首先判断window.echarts是否存在，如果存在则调用initEcharts方法进行初始化。
			if (typeof window.echarts === 'function') {
				this.initEcharts()
			} else {
				// 如果不存在，则动态创建一个<script>标签，并设置其src属性为static/js/echarts.js，然后在加载完成后调用initEcharts方法。
				// 动态引入较大类库避免影响页面展示
				const script = document.createElement('script')
				script.src = 'static/js/echarts.js'
				script.onload = this.initEcharts.bind(this)
				document.head.appendChild(script)
			}
		},
		methods: {
			initEcharts() {
				//echarts.init函数创建一个新的ECharts实例，并将其挂载到具有id为echarts的DOM元素上。
				myChart = echarts.init(document.getElementById('echarts'))
			},
			//updateEcharts方法用于更新图表数据。当监听到组件数据或属性发生变化时，会调用这个方法。
			// 在方法中，首先判断myChart实例是否存在，如果存在则调用setOption方法，将新的配置选项传递给图表实例。
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				if (myChart != undefined) {
					myChart.setOption(newValue)
				}
			},
		}
	}
</script>

<style>
	.echarts {
		width: 100%;
		height: 300px;
	}
</style>

解析

<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts">

@click="echarts.onClick"：在点击事件发生时，将调用echarts.onClick方法进行处理。@click是Vue中绑定点击事件的方式，相当于v-on:click。
:prop="option"：将option作为prop属性的值进行绑定。这里的prop可以是组件的自定义属性，被父组件传递给子组件作为数据的一种方式。
:change:prop="echarts.updateEcharts"：使用了Vue的修饰符语法，在change:prop事件发生时，调用echarts.updateEcharts方法进行处理。
id="echarts"：给该元素指定了唯一的id属性值为echarts。id属性通常用于在JavaScript中获取元素或通过CSS选择器匹配元素。
class="echarts"：给该元素指定了一个CSS类名为echarts，用于样式设计或选择器匹配。

<script module="echarts" lang="renderjs">

指定了这个脚本模块的类型为echarts，并且语言为renderjs。

if (typeof window.echarts === 'function') {
this.initEcharts()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
script.src = 'static/js/echarts.js'
script.onload = this.initEcharts.bind(this)
document.head.appendChild(script)
}

首先判断window.echarts是否存在，如果存在则调用initEcharts方法进行初始化。
如果不存在，则动态创建一个<script>标签，并设置其src属性为static/js/echarts.js，然后在加载完成后调用initEcharts方法。
script.onload指定了onload事件的回调函数为this.initEcharts.bind(this)。当ECharts库的脚本加载完成后，触发onload事件，即可执行该回调函数。
this.initEcharts.bind(this)使用bind方法将当前组件实例绑定到initEcharts方法内部的this关键字上。这样，在initEcharts方法内部，this关键字将指向当前组件实例，可以访问组件的属性和方法。
document.head.appendChild(script)将动态创建的<script>元素添加到文档头部（head元素）中。通过这样的方式，浏览器会开始加载并执行该脚本。

initEcharts() {
myChart = echarts.init(document.getElementById('echarts'))
},

echarts.init函数创建一个新的ECharts实例，并将其挂载到具有id为echarts的DOM元素上

updateEcharts(newValue, oldValue, ownerInstance, instance) {
if (myChart != undefined) {
myChart.setOption(newValue)
}
},

updateEcharts方法用于更新图表数据。当监听到组件数据或属性发生变化时，会调用这个方法。
在方法中，首先判断myChart实例是否存在，如果存在则调用setOption方法，将新的配置选项传递给图表实例。