Skip to content

How to enable scatter3D? #74

Open
Open
@hungdev

Description

Thank you for your work. @tomLadder
But how to enable scatter3D.
Here is my code:

import React, { Component } from "react";
import { StyleSheet, View } from "react-native";
import { ECharts } from "react-native-echarts-wrapper";

const data = [
  [
    "Income",
    "Life Expectancy",
    "Population",
    "Country",
    "Year"
  ],
  [
    815,
    34.05,
    351014,
    "Australia",
    1800
  ],
  [
    1314,
    39,
    645526,
    "Canada",
    1800
  ],
]
export default class App extends Component {
  option = {
    grid3D: {},
    xAxis3D: {
      type: 'category'
    },
    yAxis3D: {},
    zAxis3D: {},
    dataset: {
      dimensions: [
        'Income',
        'Life Expectancy',
        'Population',
        'Country',
        { name: 'Year', type: 'ordinal' }
      ],
      source: data
    },
    series: [
      {
        type: 'scatter3D',
        symbolSize: 2.5,
        encode: {
          x: 'Country',
          y: 'Life Expectancy',
          z: 'Income',
          tooltip: [0, 1, 2, 3, 4]
        }
      }
    ]
  };

  render() {
    return (
      <View style={styles.chartContainer}>
        <ECharts
          option={this.option}
          backgroundColor="rgba(93, 169, 81, 0.3)"
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  chartContainer: {
    flex: 1
  }
});

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions