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

川长思鸟来 2022-10-05 06:48 1204阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70]: /images/20221005/e49c118101e14f8b914a840d741db252.png