<script>
// 直接包装 vue-echarts
import ECharts from 'vue-echarts'

ECharts.registerTheme('primary-color', {
  color: [
    '#7585A2',
    '#73A0FA',
    '#8CCF9E',
    '#E15F30',
    '#EA9200',
    '#5553CE',
    '#1363D5',
    '#73DEB3',
    '#CFE615',
    '#FFB94E',
  ],
})

/**
 * <p>Echart图表组件。包装vue-echarts，适配当前主题</p>
 * <p>具体参数请参考 https://github.com/ecomfe/vue-echarts/blob/master/README.zh_CN.md#props-%E5%9D%87%E4%B8%BA%E5%93%8D%E5%BA%94%E5%BC%8F</p>
 * @displayName SdEchart 图表
 */
export default {
  name: 'SdEchart',
  functional: true,
  inheritAttrs: false,
  render: (createElement, context) => {
    context.data.attrs.theme = context.data.attrs.theme ?? 'primary-color'
    return [createElement(ECharts, context.data, context.children)]
  },
}
</script>

<docs>
```vue
<template>
  <sd-echart :options="pie" autoresize/>
</template>

<script>
// 为了按需加载，下面的组件需要手工导入
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
export default {
  data() {
    return {
      pie:{
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎'],
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 335, name: '直接访问' },
              { value: 310, name: '邮件营销' },
              { value: 234, name: '联盟广告' },
              { value: 135, name: '视频广告' },
              { value: 1548, name: '搜索引擎' },
            ],
          },
        ],
      }
    };
  },
}
</script>
```
</docs>
