search

xieziyu / ngx-echarts

An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
https://xieziyu.github.io/ngx-echarts/
MIT License
1.11k stars 197 forks source link

Default 'Option' object for chart #220

Open ankurshah32 opened 4 years ago

ankurshah32 commented 4 years ago

I am integrating e-charts in to Angular 8 my application . I can integrate it without any problem at all. Problem i am facing is that I want to show various types of charts for the "same data". I am not able to find the documentation for it? I am not able to get a default 'option' object so that I can change that object accordingly see the chart. For your information I am using below import. import { EChartOption } from 'echarts';

For each and every chart I need to set Option object. Is there any way so that we will get the Option object of Bar chart or any other chart with all default values so that we only need to set data of legend, data of xAxis, data of yAxis and data property of series

sawyerbutton commented 4 years ago

I am integrating e-charts in to Angular 8 my application . I can integrate it without any problem at all. Problem i am facing is that I want to show various types of charts for the "same data". I am not able to find the documentation for it? I am not able to get a default 'option' object so that I can change that object accordingly see the chart. For your information I am using below import. import { EChartOption } from 'echarts';

For each and every chart I need to set Option object. Is there any way so that we will get the Option object of Bar chart or any other chart with all default values so that we only need to set data of legend, data of xAxis, data of yAxis and data property of series

Hi, ankurshah32, According to your comment: You wanna use "same business data" for the different charts. But as Echarts' official documentation mentioned, the type of chart willing to defined in the type property under the series property. I believe ECharts' official team defined this kind of data-structure is aiming to keep data collaborate with the chart type in a more precise method. Using only one type of data structure to draw all type of charts will face more complicated situation, especially when EChart's growing up. As Ngx-echarts, it faces the same situation. That's why ngx-echarts did not support your expected ability. From my perspective, I also not recommend ngx-echarts fulfilling this.

But you definitely could get a default option property for your project. Actually, it's the developer who controlled the chart option object overall. Which means, there is not default option object provided by ngx-charts. If you read the core source code of ngx-chart-directive, it is obvious that strong typed property options has no initial value. :

export class NgxEchartsDirective implements OnChanges, OnDestroy, OnInit, DoCheck, AfterViewInit {
  @Input() options: EChartOption;
  @Input() theme: string; // theme should accept string or object, which could be upgrade
  @Input() loading: boolean;
  @Input() initOpts: {
    devicePixelRatio?: number
    renderer?: string
    width?: number | string
    height?: number | string
  };

so that we will get the Option object of Bar chart or any other chart

Currently, ngx-charts didn't support this. If you want to get the default option property from the chart itself, you can code like this (the value actually coming from Echart's instance) :

// demoChart from @Output chartInit
const demoOption = demoChart.getOption();

If you want to set data of legend, data of xAxis or something similar, directly modifying your options is a workable option.