0.1.8 • Published 5 years ago
ember-cli-echarts v0.1.8
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
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}}
Events
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}}
Loading
_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
}}
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
}}
Additional Config
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 repositorynpm 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/.