vue2 + echats macarons 选中样式的树状图

vue2 + echats macarons 选中样式的树状图

<template><div ref="chart" style="width: 100%; height: 600px;"></div>
</template><script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
export default {mounted() {this.initChart();},methods: {initChart() {const chart = echarts.init(this.$refs.chart, 'macarons');const option = {tooltip: {trigger: 'item',triggerOn: 'mousemove',},series: [{type: 'tree',orient: "TB", //竖向或水平   TB代表竖向  LR代表水平edgeShape: 'polyline', //设置直线// symbolSize: 10, // 调整节点大小layout: 'orthogonal', // 设置布局为直角坐标系roam: true, // 开启漫游emphasis: {focus: 'descendant'},expandAndCollapse: true,animationDuration: 550,animationDurationUpdate: 750,emphasis: {itemStyle: {borderWidth: 5}},label: {color: '#fff',backgroundColor: '#F0F2F5',borderRadius: [0, 0, 4, 4],formatter: (params) => {return '{name|' + params.name + '}\n{value|' + params.name + '}'},rich: {name: {backgroundColor: '#0560D2',color: '#fff',align: 'center',fontSize: '14px',padding: [10, 20],borderRadius: [4, 4, 0, 0]},value: {align: 'center',fontSize: '14px',padding: [15, 20],color: '#0560D2'}}},leaves: {label: {verticalAlign: 'middle',align: 'center'}},// 聚焦emphasis: {focus: 'descendant',// descendant  nonelabel: {borderWidth: 2,backgroundColor: 'red',color: 'red'}},// 设置选中selectedMode: 'single',select: {label: {borderWidth: 2,backgroundColor: 'red',color: 'red'}},data: [{name: '根节点',children: [{id: 1,name: '子节点1', children: [{ id: 21, name: '子节点21' },{ id: 22, name: '子节点22' },{ id: 23, name: '子节点23' },{ id: 24, name: '子节点24' },{ id: 25, name: '子节点25' },{ id: 26, name: '子节点2' },{ id: 27, name: '子节点1' },{ id: 28, name: '子节点2' },{ id: 29, name: '子节点1' },{ id: 30, name: '子节点2' },{ id: 31, name: '子节点1' },{ id: 32, name: '子节点2' },{ id: 33, name: '子节点1' },{ id: 34, name: '子节点2' },{ id: 35, name: '子节点1' },{ id: 36, name: '子节点2' },{ id: 37, name: '子节点1' },{ id: 38, name: '子节点2' },{ id: 39, name: '子节点1' },{ id: 40, name: '子节点2' },{ id: 41, name: '子节点1' },{ id: 42, name: '子节点2' },{ id: 43, name: '子节点1' },{ id: 44, name: '子节点2' },{ id: 45, name: '子节点1' },{ id: 46, name: '子节点2' },]},{ id: 2, name: '子节点2' }]}],// 其他配置...}]};chart.setOption(option);chart.on('click', (params) => {if (params.dataType === 'node') {// 取消之前高亮的节点chart.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: this.currentIndex});// 高亮当前点击的节点this.currentIndex = params.dataIndex;chart.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: this.currentIndex});}});// 保存echarts实例this.chart = chart;}},beforeDestroy() {if (this.chart) {this.chart.dispose(); // 清理chart实例}}
};
</script>