echarts-demo

application.controller.js

import Ember from 'ember';

const optionA = {
  title : {
    text: '未来一周气温变化',
    subtext: '纯属虚构'
  },
  tooltip : {
    trigger: 'axis'
  },
  legend: {
      data:['最高气温','最低气温']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      dataView : {show: true, readOnly: false},
      magicType : {show: true, type: ['line', 'bar']},
      restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  xAxis : [{
    type : 'category',
    boundaryGap : false,
    data : ['周一','周二','周三','周四','周五','周六','周日']
  }],
  yAxis : [{
    type : 'value',
    axisLabel : {
      formatter: '{value} °C'
    }
  }],
  series : [{
    name:'最高气温',
    type:'line',
    data:[11, 11, 15, 13, 12, 13, 10],
    markPoint : {
      data : [
        {type : 'max', name: '最大值'},
        {type : 'min', name: '最小值'}
      ]
    },
    markLine : {
      data : [
        {type : 'average', name: '平均值'}
      ]
    }
  }, {
    name:'最低气温',
    type:'line',
    data:[1, -2, 2, 5, 3, 2, 0],
    markPoint : {
      data : [
        {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
      ]
    },
    markLine : {
      data : [
        {type : 'average', name : '平均值'}
      ]
    }
  }]
};

const optionB = {
  title : {
    text: '未来一周气温变化',
    subtext: '纯属虚构'
  },
  tooltip : {
    trigger: 'axis'
  },
  legend: {
      data:['最高气温','最低气温']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      dataView : {show: true, readOnly: false},
      magicType : {show: true, type: ['line', 'bar']},
      restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  xAxis : [{
    type : 'category',
    boundaryGap : false,
    data : ['周一','周二','周三','周四','周五','周六','周日']
  }],
  yAxis : [{
    type : 'value',
    axisLabel : {
      formatter: '{value} °C'
    }
  }],
  series : [{
    name:'最高气温',
    type:'line',
    data:[21, 12, 17, 11, 18, 14, 13],
    markPoint : {
      data : [
        {type : 'max', name: '最大值'},
        {type : 'min', name: '最小值'}
      ]
    },
    markLine : {
      data : [
        {type : 'average', name: '平均值'}
      ]
    }
  }, {
    name:'最低气温',
    type:'line',
    data:[3, -3, 1, 3, 4, 2, 0],
    markPoint : {
      data : [
        {name : '周最低', value : -3, xAxis: 1, yAxis: -1.5}
      ]
    },
    markLine : {
      data : [
        {type : 'average', name : '平均值'}
      ]
    }
  }]
};

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  chartOptions: optionA,
  actions: {
    changeOptions() {
      this.set('chartOptions', optionB);
    }
  }
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<button type="button" onclick={{action "changeOptions"}}>Change</button>
<br>
{{my-echarts options=chartOptions}}
<br>
{{outlet}}
<br>
<br>

my-echarts.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement() {
    this.element.style.height = "400px";
    this.chart = echarts.init(this.element);
  },
  
  didRender() {
    this.chart.setOption(this.get('options'));
  }
});

my-echarts.template.hbs

{{yield}}

twiddle.json

{
  "version": "0.4.17",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js",
    "echarts": "https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"
  }
}