Ember CLI echarts

An EmberJS echarts wrapper

Installation

ember install ember-cli-echarts

echarts Documentation

Before using this addon, you might want to checkout the echarts docs

Usage | Examples

Basic Usage

All you need to get started is to pass in the data it should display via the option parameter.

{{echarts-chart option=option}}

Options

Chart Options

All chart specific options can be specified via the option parameter.

// Basic area chart
option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        areaStyle: {}
    }]
};

{{echarts-chart option=option}}

Example

Events

Echarts events API

onEvents: {
    click(param, echart) {
      console.log(param, echart);
      alert('chart clicked');
    },
    legendselectchanged(param, echart){
      console.log(param, echart);
      alert('chart legendselectchanged');
    }
  }

{{echarts-chart option=option onEvents=onEvents}}

Example

Loading

Echarts showLoading API

_t: null,

loadingOptions: {
  text: '加载中...',
  color: '#4413c2',
  textColor: '#270240',
  maskColor: 'rgba(194, 88, 86, 0.3)',
  zlevel: 0
},

onChartReady(chart) {
  set(this, '_t', setTimeout(() => {
    chart.hideLoading();
  }, 3000));
},

{{echarts-chart
  option=option
  onChartReady=(action onChartReady)
  loadingOptions=loadingOptions
  showLoading=true
}}

Example

Themes

Custom theme

init() {
  this._super(...arguments);
  this.registerTheme();
  set(this, 'theme', 'my_theme');
},
  
registerTheme() {
  const colorPalette = [
    '#c12e34','#e6b600','#0098d9','#2b821d',
    '#005eaa','#339ca8','#cda819','#32a487'
  ];

  echarts.registerTheme('my_theme', {
    "color": colorPalette,
    "title": {
      "left": "center",
      "y": "10",
      "textStyle": {
        "color": "#fff"
      },
    },
    legend: {
      "textStyle": {
        "color": "#fff"
      },
    },
    "backgroundColor": "#1c2e40",
  });
}

Echarts Dark theme

init() {
  this._super(...arguments);
  // echart default themes
  set(this, 'theme', 'dark');
}

{{echarts-chart
  option=option
  theme=theme
}}

Example

Additional Config

Echarts init API

opts: {
  devicePixelRatio: 1,
  renderer: 'svg' // canvas of svg
  width: '500px',
  height: '500px'
}

{{echarts-chart
  option=option
  opts=opts
}}

Helper Actions

Currently there are two helper actions provided:

1. beforeSetup

This is called before echarts has been initialized.

beforeSetup(context, chart) {}

{{echarts-chart option=option beforeSetup=(action beforeSetup)}}

2. afterSetup

This is called after all chart options and data have been set, as well as after the chart has been created.

afterSetup(context, chart) {}

{{echarts-chart option=option afterSetup=(action afterSetup)}}

Looking for help?

If it is a bug please open an issue on GitHub.

Want to help?

Installation

• git clone this repository
• npm install
• bower install

Running

• ember server
• Visit your app at http://localhost:4200.

Running Tests

• ember test
• ember test --server

Building

• ember build

For more information on using ember-cli, visit http://www.ember-cli.com/.

Shout-out to @offirgolan as a lot of this was inspired by: ember-cli-nvd3 :pizza: :pizza: