$.when(
  $.getScript(ROOT_PATH + '/data/asset/data/timelineGDP.js'),
  $.getScript(ROOT_PATH + '/data/asset/data/draggable.js')
).done(function () {
  draggable.init($('div[_echarts_instance_]')[0], myChart, {
    width: 700,
    height: 400,
    throttle: 70
  });

  option = {
    baseOption: {
      title: {
        text: 
 
'南丁格爾玫瑰圖',
        subtext: '純屬虛構',
        x: 'center'
      },
      tooltip: {
       
      },
      legend: {
        data: [
          'rose1',
          'rose2',
          'rose3',
          'rose4',
          'rose5',
          'rose6',
          'rose7',
          'rose8'
        ]
      },
      toolbox: {
        show: 
 
true,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: {
            show: true,
            type: ['pie', 'funnel']
          },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: 
 
true,
      series: [
        {
          name: '半徑模式',
          type: 'pie',
          roseType: 'radius',
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: true
            }
          },
          lableLine: {
            normal: {
              show: false
            },
            emphasis: {
              show: true
            }
          },
          data: [
            { value: 10, name: 'rose1' },
            { value: 5, name: 'rose2' },
            { value: 15, name: 'rose3' },
            { value: 25, name: 'rose4' },
            { value: 20, name: 'rose5' },
            { value: 35, name: 'rose6' },
            { value: 30, name: 'rose7' },
            { value: 40, name: 'rose8' }
          ]
        },
        {
          name: '面積模式',
          type: 'pie',
          roseType: 'area',
          data: [
            { value: 10, name: 'rose1' },
            { value: 5, name: 'rose2' },
            { value: 15, name: 'rose3' },
            { value: 25, name: 'rose4' },
            { value: 20, name: 'rose5' },
            { value: 35, name: 'rose6' },
            { value: 30, name: 'rose7' },
            { value: 40, name: 'rose8' }
          ]
        }
      ]
    },
    media: [
      {
        option: {
          legend: {
            right: 'center',
            bottom: 0,
            orient: 'horizontal'
          },
          series: [
            {
              radius: [20, '50%'],
              center: ['25%', '50%']
            },
            {
              radius: [30, '50%'],
              center: ['75%', '50%']
            }
          ]
        }
      },
      {
        query: {
          minAspectRatio: 1
        },
        option: {
          legend: {
            right: 'center',
            bottom: 0,
            orient: 'horizontal'
          },
          series: [
            {
              radius: [20, '50%'],
              center: ['25%', '50%']
            },
            {
              radius: [30, '50%'],
              center: ['75%', '50%']
            }
          ]
        }
      },
      {
        query: {
          maxAspectRatio: 1
        },
        option: {
          legend: {
            right: 'center',
            bottom: 0,
            orient: 'horizontal'
          },
          series: [
            {
              radius: [20, '50%'],
              center: ['50%', '30%']
            },
            {
              radius: [30, '50%'],
              center: ['50%', '70%']
            }
          ]
        }
      },
      {
        query: {
          maxWidth: 500
        },
        option: {
          legend: {
            right: 10,
            top: '15%',
            orient: 'vertical'
          },
          series: [
            {
              radius: [20, '50%'],
              center: ['50%', '30%']
            },
            {
              radius: [30, '50%'],
              center: ['50%', '75%']
            }
          ]
        }
      }
    ]
  };
  myChart.setOption(option);
});