jeapp打包后echrts无法绑定动态数据

1136360074 · 发表于 2022-4-6 10:28:57

我在编写jeapp插件的过程中导入了echrts组件，然后绑定了通过JE.ajax请求回来的动态数据，但是echrts没办法显示，然后我尝试了绑定死数据发现可以显示，又确定了我的JE.ajax请求成功并且有数据。
图一是我后来的单独重写的新插件，情况是一样的，有三个数据，只有死数据能展示出来，但是在上面显示我的动态数据是请求到了的

图二红色箭头的死数据是成功呈现了的，白色的就没有呈现出来，但是我请求是成功了

凯特-呼丽华 · 发表于 2022-4-7 11:30:37

看一下返回数据的格式与写死数据的格式有什么不同

1136360074 · 发表于 2022-4-7 15:43:01

凯特-呼丽华发表于 2022-4-7 11:30
看一下返回数据的格式与写死数据的格式有什么不同

没有问题，死数据和请求回来的类型都是Array

凯特-呼丽华 · 发表于 2022-4-8 13:58:59

1136360074 发表于 2022-4-7 15:43
没有问题，死数据和请求回来的类型都是Array

1、编写插件界面，代码不全，仅作为参考cpxs_sl_data，就是请求返回的数据

<Card
title="产品销售量统计"
class="je-card-not-full"
>
<marketSum
id="cpxs_sl_data"
:data="cpxs_sl_data"
/>
</Card>

复制代码

2、获取数据，并渲染，案例是统计图是分界面做的，如下：

//引入统计界面
import marketSum from './components/marketSum/index.vue';
//data()中获取数据
data() {
return {
cpxs_sl_data: [],
cpxs_je_data: {},

复制代码

凯特-呼丽华 · 发表于 2022-4-8 13:59:23

凯特-呼丽华发表于 2022-4-8 13:58
1、编写插件界面，代码不全，仅作为参考cpxs_sl_data，就是请求返回的数据2、获取数据，并渲染，案例是统 ...

methods: {
initData() {
JE.ajax({
url: '/je/xxxx', //根据业务定url
params,
}).then((data) => {
if ((Object.keys(data)).length) {
this.cpxs_sl_data = data.obj.cpxs_sl.map((item) => {
this.$set(item, 'value', item.sum);
return item;
});
}
this.cpxs_je_data = data.obj.cpxs_je;
});
}
}

复制代码

凯特-呼丽华 · 发表于 2022-4-8 14:02:05

凯特-呼丽华发表于 2022-4-8 13:59

图表绘制

<template>
<div
ref="id"
:id="id"
:style="wh"
/>
</template>
<script>
export default {
props: {
data: Array,
id: String,
},
data() {
return {
myChart: null,
wh: {
width: '100%',
height: '300px',
},
};
},
watch: {
data(val) {
if (val) {
this.data = val;
this.initCarts();
}
},
},
methods: {
initCarts() {
const echarts = require('echarts');
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(document.getElementById(this.id), 'macarons');
// 绘制图表
this.myChart.setOption({
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)',
},
grid: {
top: '0',
left: '0',
containLabel: true,
},
legend: {
bottom: 'bottom',
},
series: [
{
name: '数量',
type: 'pie',
radius: ['15%', '50%'],
avoidLabelOverlap: false,
center: ['50%', '35%'],
label: {
normal: {
show: false,
formatter: '{b}:{d}% ',
},
emphasis: {
show: false,
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
labelLine: {
normal: {
show: false,
},
},
data: this.data,
itemStyle: {
normal: {
// eslint-disable-next-line
color: function (params) {
const colorList = [
'#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80',
'#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
'#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
'#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089',
];
return colorList[params.dataIndex];
},
},
},
},
],
});
},
},
};
</script>
<style scoped>
</style>

复制代码

1136360074 · 发表于 2022-4-11 11:40:35

凯特-呼丽华发表于 2022-4-8 14:02
图表绘制

是在data改变后watch触发再挂载echrts才能展示吗

凯特-呼丽华 · 发表于 2022-4-13 09:34:16

1136360074 发表于 2022-4-11 11:40
是在data改变后watch触发再挂载echrts才能展示吗

我这边找到的案例是这样的，您可以参考一下

1136360074 · 发表于 2022-4-13 09:48:54

凯特-呼丽华发表于 2022-4-13 09:34
我这边找到的案例是这样的，您可以参考一下

照着写了之后还是没有办法展示参数。。。请问有不需要页面之间传参的案例吗？

1136360074 · 发表于 2022-4-14 09:38:37

凯特-呼丽华发表于 2022-4-13 09:34
我这边找到的案例是这样的，您可以参考一下

又遇到一个bug，app插件中justify-content: flex-start;属性不起效

		自动登录	找回密码
密码			立即注册