vue ECharts 树图修改某节点样式,选中、聚焦改变节点样式等
<template><div><div ref="treeEchart" :style="{ padding: '30px'}"></div></div></template><script>export default {name: "eCharts",data() {return {treedata: [{ /
·
<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>
更多推荐
已为社区贡献13条内容
所有评论(0)