app使用echarts数据renderjs通信(点击页面更新echarts图表数据)

1.html

<template>
	<view class="mp_list">
		<view class="mp_list_content content">
			<view class="" style="margin: 0px 0;text-align:center;">
				<uni-row :gutter="10">

					<uni-col :span="6" :xs="12" :md="6" :sm="6" :lg="6" :xl="6" v-for="(i, index) in imgtexts1"
						:key="index">
						<view
							:style="{ background: dataIds.fieldFis == index+1 ? '#E7EDFF!important':'#EFEFEF!important'}"
							style=" height: 80px;display: flex; margin: 5px auto;align-items: center;color:#555555;background: #efefef;padding:10px;border-radius:5px;"
							@click="onViewClick(i, index)">
							<image :src="i.img" mode="" style="width:50px;height:50px;"></image>
							<view
								style="flex:1;    display: flex; flex-direction: column; align-items: flex-start;justify-content: center;margin-left:10px;">
								<view style="font-size:14px;">
									{{ i.name }}
								</view>
								<view style="font-size:16px;">
									{{ i.value }}
								</view>
							</view>
						</view>
					</uni-col>
				</uni-row>

			</view>
			<!-- #ifdef APP-PLUS || H5  -->
			<view class="" style="display: flex; align-items: center;justify-content: space-between;flex-wrap: wrap;">
				<view class="e1" style="">
					<view :prop="dataIds" :change:prop="echarts.updateEcharts" id="containerhy" class="echarts"></view>
				</view>
				<view class="e1" style="">
					<view :prop="dataIds" :change:prop="echarts.updateEcharts" id="containernb" class="echarts"></view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifndef APP-PLUS || H5 -->
			<view>非 APP、H5 环境不支持</view>
			<!-- #endif -->
		</view>
	</view>

</template>

2.css样式表可自行根据页面设置

3.JavaScript  serve和renderJs两部分

<script>
	import { getAnaysisData } from '../../api/analysis.js'
	export default {
		components: {},
		name: "Compare",
		props: {
			num: {
				type: [String, Number]
			}
		},
		data() {
			return {
                // card列表固定的数据和图标
				imgtexts1: [{
						img: '自己的图片地址',
						name: '',
						value: '',
						type: 1
					},
					{
						img: '',
						name: '',
						value: '',
						type: 2
					}
				],
                // 需要往renderjs传递的数据
				dataIds: {
					interviewId: '',
					fieldFis: 1,
					unit: ''
				}
			};
		},
		onLoad: function(options) {
			this.dataIds.interviewId = options.interviewId
			this.handlegetAnaysisData()
		},
		methods: {
            // 获取卡片列表接口数据
			handlegetAnaysisData() {
				getAnaysisData({
					interviewId: this.dataIds.interviewId
				}).then((res) => {
					// // console.log('列表数据', res)
					if (res.status == 200 && res.data && res.data.length) {
						res.data.forEach((data, index) => {
							this.imgtexts1[index]['name'] = data.name
							this.imgtexts1[index]['value'] = data.value
						})
						this.dataIds.unit = res.data && res.data.length && res.data[0].unit ? `(${res.data[0].unit} || '')` : ''
					}
				})
			},
            // 点击单个卡片列表事件
			onViewClick(i, index) {
				// console.log(i, index, 'i, indexi, indexi, index')
                // 更新传递数据
				this.dataIds.fieldFis = i.type
				this.dataIds.unit = i.unit ? `(${i.unit})` : ''
			}
		},

	}
</script>

<script module="echarts" lang="renderjs">
	let myChart
	let myChart1
	export default {
		data: function() {
			return {
				canvas: '',
				canvas1: '',
				canvas3: ''
			}
		},

		mounted() {
			this.$nextTick(() => {
				// renderjs 里可以自由操作 window 、dom等浏览器环境属性
				const container = document.getElementById('containerhy')
				// 创建 html5 canvas DOM
				const canvas = document.createElement('canvas')
				// id 不可重复
				canvas.id = 'f2hy'
				canvas.width = uni.upx2px(750)
				canvas.height = uni.upx2px(750)
				container.appendChild(canvas)
				this.canvas = canvas;

				const container1 = document.getElementById('containernb')
				const canvas1 = document.createElement('canvas')
				canvas1.id = 'f2nb'
				canvas1.width = uni.upx2px(750)
				canvas1.height = uni.upx2px(750)
				container1.appendChild(canvas1)
				this.canvas1 = canvas1;

				if (typeof window.F2 === 'function') {
					this.initF4()
				} else {
					// 动态引入较大类库避免影响页面展示
					const script = document.createElement('script')
                    //本地echarts文件，从echarts官网自行下载
					script.src = 'static/echarts.min.js'
					script.onload = this.initF4.bind(this)
					document.head.appendChild(script)

				}
			})
		},
		methods: {
			initF4() {
				var myChart = echarts.init(this.canvas);
				var myChart1 = echarts.init(this.canvas1)
                // 自定义echarts图表数据
				var option = {
					title: {
						text: 'A对标',
						textStyle: {
							fontSize: 30
						}
					},
					grid: {
						top: '20%',
						width: '100%',
						left:'0%',
						height: '60%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						data: ['B', 'C', 'D'],
						axisLabel: {
							textStyle: {
								fontSize: 30,
							},
						}
					},
					yAxis: {
						type: 'value',
						axisLabel: {
							textStyle: {
								fontSize: 30,
							},
						}
					},
					series: [{
						barWidth: 40,
						itemStyle: {
							normal: {
								label: {
									show: true,
									position: 'top',
									fontSize: 24,
								},
								barBorderRadius: [50, 59, 0, 0]
							}
						},
						data: [{
								value: 0,
								itemStyle: {
									color: '#8996D3',
									barBorderRadius: [50, 59, 0, 0],
								}
							},
							{
								value: 0,
								itemStyle: {
									color: '#F2BE59',
									barBorderRadius: [50, 59, 0, 0],
								}
							},
							{
								value: 0,
								itemStyle: {
									color: '#01A289',
									barBorderRadius: [50, 59, 0, 0],
								}
							},
						],
						type: 'bar'
					}],
				}
				var option1 = {
					title: {
						text: 'B',
						textStyle: {
							fontSize: 30
						}
					},
					grid: {
						top: '20%',
						left:'0%',
						width: '100%',
						height: '60%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						data: ['B', 'C', 'D'],
						axisLabel: {
							textStyle: {
								fontSize: 30,
							},
						}
					},
					boundaryGap: false,
					yAxis: {
						type: 'value',
						axisLabel: {
							textStyle: {
								fontSize: 30,
							},
						}
					},
					series: [{
						barWidth: 40,
						itemStyle: {
							normal: {
								label: {
									show: true,
									position: 'top',
									fontSize: 24,
								},
								barBorderRadius: [50, 59, 0, 0]
							}
						},
						data: [{
								value: 0,
								itemStyle: {
									color: '#8996D3',
									barBorderRadius: [50, 59, 0, 0],
								}
							},
							{
								value: 0,
								itemStyle: {
									color: '#F2BE59',
									barBorderRadius: [50, 59, 0, 0],
								}
							},
							{
								value: 0,
								itemStyle: {
									color: '#01A289',
									barBorderRadius: [50, 59, 0, 0],
								}
							},
							{
								value: 0,
								itemStyle: {
									color: '#DF7A7A',
									barBorderRadius: [50, 59, 0, 0],
								}
							}
						],
						type: 'bar'
					}],
				}

				let that = this
				let xhr = new XMLHttpRequest();
				xhr.open("POST", "http://pe4.onesmile-dev.uniceu.com/api/quantitative/eightAnalysis");
				xhr.setRequestHeader("content-type", "application/json");
				// 转成json格式
				xhr.send(JSON.stringify({
					interviewId: that.dataIds.interviewId,
					fieldFis: that.dataIds.fieldFis
				}));
				xhr.onreadystatechange = function(res) {
                    // 自行判断是否调取成功渲染数据
					if (xhr.readyState == 4 && xhr.status === 200) {
						let res = JSON.parse(xhr.responseText);
						if (res.status == 200) {
							// 这里操作echarts数据
							option.series[0].data[0].value = //你需要的接口数据
                            option1.series[0].data[0].value = //你需要的接口数据
							myChart.setOption(option);
							myChart1.setOption(option1);
						} else {
							// console.log('失败')
						}
					} else {
						// console.log(xhr.status);
					}
				}

			},
			// 监听 service 层数据变更，重新渲染
			updateEcharts(newValue, oldValue, ownerInstance, instance) {
				this.initF4()
			}

		}
	}
</script>

注意：renderjs 不识别uni.request,其他uni.方法貌似也不支持