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，点击的数据是个objectthat.mockData = [];that.mockData.push(params.data);// 重新渲染图表that.renderGraph();console.log(params, '获取的数据');});},},
};
</script>
<style lang="scss" scoped>
.tcm-graph {width: 100%;height: 100%;
}
</style>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！