antvis / G2Plot

:dango: An interactive and responsive charting library based on G2.
https://g2plot.antv.antgroup.com
MIT License
2.56k stars 607 forks source link

vue中push的array绑定到组件无法显示,但是使用你们的远程数据可以 #1946

Closed BrettKang closed 3 years ago

BrettKang commented 4 years ago

绑定column、line和pie等多种图形,自己push的array绑定就是显示不出来,但是 把自己的array赋值给下面的data,再用data绑定就行了,就可以绑定了。

****非常奇怪,严格按格式push出来的array就是不行,看不出和你们的array有什么区别

fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json') .then((res) => res.json()) .then((data) => {

BrettKang commented 4 years ago

fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json') .then((res) => res.json()) .then((data) => { data = barData2 ***这是我组装的array,直接绑定不行,非得这样来一下,才能绑上去 const linePlot = new Line('bardata2', { data, ** xField: 'date', yField: 'count', seriesField: 'name',

hustcc commented 4 years ago

求提供最小复现 demo 或者伪代码。

BrettKang commented 4 years ago

求提供最小复现 demo 或者伪代码。 **以下是做的demo,我这里跑起来完全重现问题。见代码中的注释。*** 我的是vscode 1.51.1版本

<template>
  <div>
    <div id="pie1" style="height:320px;overflow:hidden;"></div>
  </div>
</template>
<script>
import { Pie } from '@antv/g2plot'
export default {
  data() {
    return {
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      // 24小时类型分布
      var pie1 = []
      for (var i = 0; i < 10; i++) {
        pie1.push({
          type: 'a' + i,
          value: 10 + i
        })
      }
      console.log('pie1:' + JSON.stringify(pie1))
      fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
      .then((res) => res.json())
      .then((data) => {
        data = pie1
        const piePlot = new Pie('pie1', {
          pie1, // 这个地方换成data,数据就可以绑定了*******************************
          appendPadding: 10,
          angleField: 'value',
          colorField: 'type',
          radius: 0.8,
          label: {
            type: 'spider',
            labelHeight: 28,
            content: '{name}\n{percentage}'
          },
          interactions: [{ type: 'element-selected' }, { type: 'element-active' }]
        })
        console.log('000000')
        piePlot.render()
        console.log('11111')
      }).catch(res => {
            console.log('loadData catch:' + JSON.stringify(res))
            // 如果data源换成pie1,会catch到这里
        })
    }
  }
}
</script>
BrettKang commented 4 years ago

重新zip传一下

index.zip

visiky commented 3 years ago

求提供最小复现 demo 或者伪代码。 **以下是做的demo,我这里跑起来完全重现问题。见代码中的注释。*** 我的是vscode 1.51.1版本

对于 plot 来做,数据是必须绑定的;G2Plot 的数据源绑定 90% 以上都是 data 属性哈

new Pie('containerId', {
   data: pie1,
   radius: 0.8,
   angelField: 'value',
   colorField: 'type'
   // ... 其他 options 配置
})
hustcc commented 3 years ago

感觉受到了侮辱。