效果
点进去时
父组件
<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>