tomLadder / react-native-echarts-wrapper

📈Powerful React-Native ECharts Wrapper 📊
MIT License
177 stars 62 forks source link

How can I render a 3d chart? #70

Closed LeaFranz closed 3 years ago

LeaFranz commented 3 years ago

I would like to use an ECharts 3D chart, but i cannot get it to render. Is this possible with this wrapper? Thanks!

hungdev commented 3 years ago

@LeaFranz why do you close this topic?

hungdev commented 3 years ago

@LeaFranz I dont know why it doesnt work for me.

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
  }
});