-
太酷不给撩2019-09-09 00:00
- 10
- 52
- 0
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
listContent: Array(2)
0: {id: 1, content: "数量", resultCount: 5个}
1: {id: 2, content: "数量2", resultCount: 6个}
length: 2
__proto__: Array(0)
type: 1
typeName: "图表1"
__proto__: Object
1: {type: 2, typeName: "图表2", listContent: Array(3)}
2: {type: 3, typeName: "图表3", listContent: Array(4)}
3: {type: 4, typeName: "图表4", listContent: Array(3)}- 后台返回10个数组，每个数组对应一个图表，上图有详细数据结构，我怎么遍历这个数组拿到值渲染出10个图表，
大佬们帮我看看
下面是我写的遍历的方法:
if(info.staut == 0){
一次性取10个图表就有错
console.log(info.data) // 数组(length为10)
info.data.forEach((i,index) => {
this.disableCategoryRatoData[index] = []
this.disableCategoryRatoType[index] = []
this.allValuaPortName[index] = i.typeName
i.listContent.forEach(tem => {
console.log(index)
this.disableCategoryRatoData[index].push(tem.resultCount)
this.disableCategoryRatoType[index].push(tem.content)
})
})
注释代码：是我取第5个图表渲染能成功
// this.allValuaPortName= info.data[5].typeName
// info.data[5].listContent.forEach(item => {
// this.disableCategoryRatoData.push(item.resultCount)
// this.disableCategoryRatoType.push(item.content)
// });
}更新下： html代码部分
图表渲染是封装的，数据直接赋值上去就可以的，但要生成对应下标个数的disableCategoryRatoData数组赋值
<Bar :chartType="this.disableCategoryRatoType" :chartData="disableCategoryRatoData" :chartColor="disableCategoryRatoColor" :chartTitle="allValuaPortName"></Bar>- 共 0 条
- 全部回答
-
Pasttense 普通会员 1楼
在JavaScript中，我们可以使用ECharts库的
.data()方法将数据传递给图表的.series()方法。然后，我们可以在每个数据点上创建一个ECharts图表，并使用.mark()方法来创建各种图表标记。最后，我们可以在图表中添加各种交互行为，例如鼠标悬停时显示图表信息等。以下是一个简单的例子，展示了如何遍历一个数组，并在每个数据点上创建一个ECharts图表：
```javascript var data = [ {name: 'A', value: 1}, {name: 'B', value: 2}, {name: 'C', value: 3} ];
var option = { tooltip: { trigger: 'item', itemWidth: 120 }, legend: { data:['Value'] }, series: [{ name: 'Series1', type: 'bar', data: data.map(function(d){ return d.value; }) }] };
echarts.init(document.getElementById('main'));
var chart = echarts.init(document.getElementById('main'));
chart.setOption(option);
var dataItem = { name: 'D', value: 4 };
chart.setOption({ tooltip: { trigger: 'item', itemWidth: 120 }, legend: { data:['Value'] }, series: [{ name: 'Series2', type: 'bar', data: data.map(function(d){ return d.value; }) }] });
var seriesData = { name: 'Series3', type: 'bar', data: data.map(function(d){ return d.value; }) };
chart.setOption({ tooltip: { trigger: 'item', itemWidth: 120 }, legend: { data:['Value'] }, series: [{ name: 'Series4', type: 'bar', data: seriesData.map(function(d){ return d.value; }) }] });
chart.on('dataUpdate', function(data){ // 在每个数据点上创建一个ECharts图表 var item = { name: data.name, value: data.value }; var series = { name: data.name, type: 'bar', data: data.map(function(d){ return d.value; }) }; var seriesItem = { name: data.name, type: 'bar', data: data.map(function(d){ return d.value; }) }; chart.setOption({ series: [{ name: series.name, type: series.type, data: series.data, itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }, { name: item.name, type: item.type, data: item.value, itemStyle: { shadowBlur: 10, shadowOffsetX: 0, shadowOffsetY: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } }] }); });
chart.on('itemClick', function(item, event){ // 在鼠标悬停时显示图表信息 var tooltip = echarts.init(document.getElementById('main')); tooltip.setOption({ trigger: 'item', itemWidth: 120, formatter: function(value, item, index){ return value; } }); }); ```
在这个例子中，我们首先创建了一个包含数据的数组。然后，我们创建了一个ECharts图表，并在每个数据点上创建了一个图表。我们还创建了多个数据点的图表标记，每个标记都有一个唯一的名称。最后，我们添加了一个鼠标悬停事件，当鼠标悬停在图表上时，我们显示一个图表信息框。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部