echart 旭日图组件拆分

效果

点进去时

父组件

<template>
  <div class="graph">
    <TcmGraph ref="tcmGraph" />
  </div>
</template>
<script>
import TcmGraph from './components/graph.vue';
export default {
  components: {
    TcmGraph,
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      this.$refs.tcmGraph && this.$refs.tcmGraph.renderGraph();
    },
  },
};
</script>

<style scoped>
.graph {
  width: 100%;
  height: 100%;
}
</style>

子组件

<template>
  <div class="tcm-graph">
   style要写行内样式，负责无法获取宽高
    <div id="contain" style="width: 100%; height: 100%"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts/core';
import { TitleComponent } from 'echarts/components';
import { SunburstChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
echarts.use([TitleComponent, SunburstChart, CanvasRenderer]);

var myChart = null;

export default {
  data() {
    return {
      mockData: [
        {
          name: '阳虚感冒11',
          itemStyle: {
            color: '#e65832',
          },
          label: {
            fontSize: 22,
            fontWeight: 'bold',
          },
          children: [
            {
              name: '针灸指压',
              itemStyle: {
                color: '#f89a80',
              },
              label: {
                fontSize: 14,
                fontWeight: 'bold',
              },
              children: [
                {
                  name: '列缺',
                  value: 1,
                  itemStyle: {
                    color: '#f89a80',
                  },
                },
                {
                  name: '合谷',
                  value: 1,
                  itemStyle: {
                    color: '#f89ae0',
                  },
                },
                {
                  name: '风池',
                  value: 1,
                  itemStyle: {
                    color: '#f89ee0',
                  },
                },
                {
                  name: '大椎',
                  value: 1,
                  itemStyle: {
                    color: '#f8eae0',
                  },
                },
                {
                  name: '外关',
                  value: 1,
                  itemStyle: {
                    color: '#feeae0',
                  },
                },
                {
                  name: '风门',
                  value: 1,
                  itemStyle: {
                    color: '#e8eae0',
                  },
                },
                {
                  name: '肺俞',
                  value: 1,
                  itemStyle: {
                    color: '#f0eae0',
                  },
                },
              ],
            },
            {
              name: '舌象',
              itemStyle: {
                color: 'b7cd87',
              },
              label: {
                fontSize: 14,
                fontWeight: 'bold',
              },
              children: [
                {
                  name: '舌苔薄白',
                  value: 1,
                  itemStyle: {
                    color: 'a7b86a',
                  },
                },
              ],
            },
            {
              name: '脉象',
              itemStyle: {
                color: '#f89a80',
              },
              label: {
                fontSize: 14,
                fontWeight: 'bold',
              },
              children: [
                {
                  name: '脉浮',
                  value: 1,
                  itemStyle: {
                    color: '#f89a80',
                  },
                },
                {
                  name: '脉浮紧',
                  value: 1,
                  itemStyle: {
                    color: '#c89a80',
                  },
                },
              ],
            },
            {
              name: '症候',
              itemStyle: {
                color: '#ee9a80',
              },
              label: {
                fontSize: 14,
                fontWeight: 'bold',
              },
              children: [
                {
                  name: '恶寒重',
                  value: 1,
                  itemStyle: {
                    color: '#f89a80',
                  },
                },
                {
                  name: '发热轻',
                  value: 1,
                  itemStyle: {
                    color: '#fe9a80',
                  },
                },
                {
                  name: '无汗',
                  value: 1,
                  itemStyle: {
                    color: '#f19a80',
                  },
                },
                {
                  name: '头痛',
                  value: 1,
                  itemStyle: {
                    color: '#a19a80',
                  },
                },
                {
                  name: '肢体酸楚',
                  value: 1,
                  itemStyle: {
                    color: '#a19a80',
                  },
                },
                {
                  name: '肢体疼痛',
                  value: 1,
                  itemStyle: {
                    color: '#b19a80',
                  },
                },
                {
                  name: '鼻塞',
                  value: 1,
                  itemStyle: {
                    color: '#c19a80',
                  },
                },
                {
                  name: '声重',
                  value: 1,
                  itemStyle: {
                    color: '#d19a80',
                  },
                },
                {
                  name: '打喷嚏',
                  value: 1,
                  itemStyle: {
                    color: '#e19a80',
                  },
                },
                {
                  name: '流清涕',
                  value: 1,
                  itemStyle: {
                    color: '#f99a80',
                  },
                },
                {
                  name: '咽痒',
                  value: 1,
                  itemStyle: {
                    color: '#fffa80',
                  },
                },
                {
                  name: '咳嗽',
                  value: 1,
                  itemStyle: {
                    color: '#fafa80',
                  },
                },
                {
                  name: '痰白稀薄',
                  value: 1,
                  itemStyle: {
                    color: '#f0fa80',
                  },
                },
              ],
            },
            {
              name: '治法治则',
              itemStyle: {
                color: '#f89a80',
              },
              label: {
                fontSize: 14,
                fontWeight: 'bold',
              },
              children: [
                {
                  name: '助阳解表',
                  value: 1,
                  itemStyle: {
                    color: '#f89a80',
                  },
                },
              ],
            },
            {
              name: '西药处方',
              itemStyle: {
                color: '#f89a80',
              },
              label: {
                fontSize: 14,
                fontWeight: 'bold',
              },
              children: [
                {
                  name: '三九感冒灵颗粒',
                  value: 1,
                  itemStyle: {
                    color: '#f89a80',
                  },
                },
              ],
            },
            {
              name: '麻黄附子细辛汤',
              itemStyle: {
                color: '#d45a59',
              },
              label: {
                fontSize: 14,
                fontWeight: 'bold',
              },
              children: [
                {
                  name:
                    '桂枝15g、白芍15g、炙甘草10g、黄芪50g、当归20g、生姜5片大枣5枚',
                  value: 1,
                  itemStyle: {
                    color: '#da5c1f',
                  },
                },
              ],
            },
          ],
        },
      ],
    };
  },
  methods: {
    renderGraph() {
      // 重新渲染时如果存在销毁图表 动态渲染 myChart 设置成全局变量
      if (myChart != null && myChart != '' && myChart != undefined) {
        myChart.dispose(); //销毁
      }
      // dom查找
      var chartDom = document.getElementById('contain');
      // 初始化
      myChart = echarts.init(chartDom);
      let option = {
        series: {
          type: 'sunburst',
          data: this.mockData,
          radius: [0, '95%'],
          sort: undefined,
          emphasis: {
            focus: 'ancestor',
          },
          nodeClick: 'false',
          levels: [
            {},
            {
              r0: '0%',
              r: '35%',
              itemStyle: {
                borderWidth: 2,
              },
              label: {
                rotate: 'tangential',
              },
            },
            {
              r0: '35%',
              r: '70%',
              label: {
                align: 'right',
              },
            },
            {
              r0: '70%',
              r: '72%',
              label: {
                position: 'outside',
                padding: 3,
                silent: false,
              },
              itemStyle: {
                borderWidth: 3,
              },
            },
          ],
        },
      };
      // 获取this实例
      let that = this;
      option && myChart.setOption(option);
      myChart.on('click', function (params) {
        // 这里面this是指echart实例

        //将点击数据放入data，点击的数据是个object
        that.mockData = [];
        that.mockData.push(params.data);

        // 重新渲染图表
        that.renderGraph();

        console.log(params, '获取的数据');
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.tcm-graph {
  width: 100%;
  height: 100%;
}
</style>