vue ECharts 树图修改某节点样式，选中、聚焦改变节点样式等

<template>
	<div>
		<div ref="treeEchart" :style="{ padding: '30px'}"></div>
	</div>
</template>

<script>
	export default {
		name: "eCharts",
		data() {
			return {
				treedata: [{ //一定一定要注意这里有[]
					id: 1,
					name: 'test0',
					children: [{
							id: 2,
							name: 'test1',
						},
						{
							id: 3,
							name: 'test2',
							children: [{
								id: 4,
								name: 'test3'
							}]
						},
						{
							id: 5,
							name: 'test4'
						},
						{
							id: 6,
							name: 'test5',
							children: [{
								id: 7,
								name: 'test6'
							}]
						},
						{
							id: 8,
							name: 'test7'
						}
					]
				}]
			}
		},
		mounted() {
			this.setChart();
		},
		methods: {
			setChart() {
				// 基于准备好的dom，初始化echarts实例
				var myChart = this.$echarts.init(this.$refs.treeEchart);
				for (let i in this.treedata) {
					// 设置指定节点样式
					if (this.treedata[i].id == 1) {
						this.treedata[i].label = {
							color: 'red',
							fontSize: '20'
						};
					}
				}


				// 指定图表的配置项和数据
				var option = {
					title: {
						text: 'ECharts 入门示例'
					},
					// tooltip: { //提示框组件
					// 	trigger: 'item', //触发类型，默认：item（数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用）。可选：'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none':什么都不触发。
					// 	triggerOn: 'mousemove' //提示框触发的条件，默认mousemove|click（鼠标点击和移动时触发）。可选mousemove：鼠标移动时，click：鼠标点击时，none：        
					// },
					series: [{
						type: 'tree',

						data: this.treedata,

						top: '1%',
						left: '7%',
						bottom: '1%',
						right: '20%',
						orient: "RL",

						symbolSize: 7,

						label: {
							position: 'left',
							verticalAlign: 'middle',
							align: 'right',
							fontSize: 12,
							backgroundColor: '#fff',
							borderColor: '#e6e6e6',
							borderWidth: 1,
							borderRadius: 5,
							padding: 5,
							height: 20
						},
						itemStyle: {},
						lineStyle: {
							color: '#000',
							width: 0.5,
						},

						// 叶子节点样式 后期可将数据表的字段更换样式显示
						leaves: {
							label: {
								position: 'left',
								verticalAlign: 'middle',
								align: 'left'
							}
						},

						// 聚焦
						emphasis: {
							focus: 'none',
							label: {
								borderWidth: 2,
								backgroundColor: '#e6e6e6'
							}
						},
						// 设置选中
						selectedMode: 'single',
						select: {
							label: {
								borderWidth: 2,
								backgroundColor: '#e6e6e6'
							}
						},

						expandAndCollapse: true,
						animationDuration: 550,
						animationDurationUpdate: 750
					}]
				};
				// 使用刚指定的配置项和数据显示图表。
				myChart.setOption(option);
			}
		}
	}
</script>