An EmberJS echarts wrapper
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
addon
app
blueprints
config
tests
vendor
.codeclimate.yml
.editorconfig
.ember-cli
.eslintrc.js
.gitignore
.npmignore
.travis.yml
.watchmanconfig
LICENSE.md
README.md
ember-cli-build.js
index.js
package-lock.json
package.json
testem.js
yarn.lock

README.md

Ember CLI echarts

Ember Version Build Status npm version Download Total

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

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 🍕 🍕