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.方法貌似也不支持
类似资料：