1、配置数据
第一层为最内层的环,第二层为第一层对应的children所构成的环
[
{
value:n, 数值,根据同层所有数值的占比,构成百分比矩形
[n,n2,n3] 当为数组时,默认第一项为数据,也可用于visualDimension进行数据映射
name:'显示内容',
itemStyle:{ 当前矩形样式
},
children:[
{
value:n,
name:'显示内容'
}
]
},
{
value:n,
name:''
}
]
2、配置series:
series:[
{
type:'treemap',
leafDepth:1, 设置展示第几层级,默认不开启,层次更深的节点则被隐藏起来,点击则可下钻看到层次更深的节点
drillDownIcon 当节点可以下钻时的提示符,只能是字符。
breadcrumb:{ 底层显示层级关系的面包屑,默认开启
show:true
},
squareRatio:0.5 * (1 + Math.sqrt(5)) 期望矩形长宽比率,布局计算时会尽量向这个比率靠近,默认黄金比
visibleMin:n, 如果某个节点的面加px^2小于这个值就不显示内容
childrenVisibleMin:n, 如果某个节点的矩形面积,小于这个数值(单位:px平方)则不显示这个节点的子节点
data:data,
nodeClick 点击节点后的行为
false:节点点击无反应。
'zoomToNode':点击节点后缩放到节点。
'link':如果节点数据中有link点击节点后会进行超链接跳转
zoomToNodeRatio:0.32*0.32 点击某个节点,会自动放大那个节点到合适的比例(节点占可视区域的面积比例)
visualDimension:0, 当value为数组时,映射哪个维度的数据,该属性可在多处配置
于sereis-treemap根下,表示本系列全局的统一设置。
于series-treemap.levels的每个数组元素中,表示树每个层级的统一设置。
于series-treemap.data的每个节点中,表示每个节点的特定设置。
colorMappingBy 表示同一层级节点,在颜色列表中(参见 color 属性)选择时,按照什么来选择
'value':根据节点的值(即 series-treemap.data.value)映射到颜色列表中,可以使用visualDimension属性来设置,用data中哪个纬度的值来映射。
'index':同一层级中,第一个节点取颜色列表中第一个颜色,第二个节点取第二个。
'id':将节点的id(即series-treemap.data.id)映射到颜色列表中,同一 id 映射到同一颜色,保持一致性
于sereis-treemap根下,表示本系列全局的统一设置。
于series-treemap.levels的每个数组元素中,表示树每个层级的统一设置。
于series-treemap.data的每个节点中,表示每个节点的特定设置。
upperLabel:{ 用于显示矩形的父节点的标签
show:true,
于sereis-treemap根下,表示本系列全局的统一设置。
于series-treemap.levels的每个数组元素中,表示树每个层级的统一设置。
于series-treemap.data的每个节点中,表示每个节点的特定设置。
},
levels:[ 设置每层级样式
{}, 第一层显示样式
{
colorSaturation: [0.3, 0.5], 颜色饱和度,从0.3-0.5,这样设置能在每层形成渐变色
itemStyle: {
borderColorSaturation: 0.7, 边框饱和度
gapWidth: 2,
}
}, 第一层的子节点样式
{}, 第一层的子子节点样式
]
}
]
效果图:
代码示例:
<template>
<div id="app">
<div class='map'>
</div>
<div class='map2'>
</div>
<div>
<button @click="add">修改</button>
<button @click="highLight">高亮</button>
</div>
<!-- <router-view/> -->
</div>
</template>
<script>
import echarts from 'echarts';
import axios from 'axios';
export default {
name: 'App',
data()
{
return{
myMap:'',
pieData:[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]
}
},
methods:{
add()
{
this.pieData.push({name:'苏宁',value:'9999'})
var option={
series:[
{
data:this.pieData
}
]
}
this.myMap.setOption(option);
},
highLight()
{
this.myMap.dispatchAction({
type: 'highlight',
// seriesIndex:0,
dataIndex: 2,
})
}
},
mounted:async function(){
var myMap=echarts.init(document.querySelector('.map'));
this.myMap=myMap;
var xData=['张三','彭万里','高大山','谢大海','马宏宇','林莽','黄强辉','章汉夫']
var yData1=[88,92,63,77,94,80,72,86];
var yData2=[80,90,60,70,90,70,62,76];
// var pieData=[{name:'淘宝',value:'11231'},{name:'京东',value:'22673'},{name:'唯品会',value:'6123'},{name:'1号店',value:'8989'},{name:'聚美优品',value:'6700'}]
var radaData=[{name: '华为手机1',value: [80, 90, 80, 82, 90]},{name: '中兴手机1',value: [70, 82, 75, 70, 78]}]
var dataMax = [
{
name: '易用性',
max: 100
},
{
name: '功能',
max: 100
},
{
name: '拍照',
max: 100
},
{
name: '跑分',
max: 100
},
{
name: '续航',
max: 100
}
]
var option = {
legen:{
show:true,
},
series:[{
type:'treemap',
leafDepth:1, //设置展示第几层级,默认不开启
breadcrumb:{ //底层显示层级关系的面包屑,默认开启
show:true
},
data:
[{
name: 'parent1',
value: 10, // 可以不写父元素的 value,则为第一层子元素之和;
// 如果写了,并且大于子元素之和,可以用来表示还有其他子元素未显示
children: [
{
value: 5,
name: 'child1',
children: [{
value: 8, //根据第一层节点的value数值,来进行占比绘制,若第一层无value,则根据第一层子节点的value进行占比
name: 'grandchild1',
}]
},
{
value: 3,
name: 'child2',
}
],
}, {
name: 'parent2',
value: 8,
children:[
{
value:8,
name:'p2child',
itemStyle:{
color:'purple'
},
children:[
{
value:4,
name:'pp2child'
},
{
value:5,
name:'pp2child2'
}
]
},
{
value:5,
name:'p2child2'
},
{
value:4,
name:'p2child3'
}
]
},
{
value:'5',
name:'p3'
},
{
value:'7',
name:'p4'
},
{
value:'5',
name:'p5'
},
{
value:'7',
name:'p6'
}
],
levels:[
{
itemStyle: {
borderColor: '#555',
borderWidth: 4,
gapWidth: 4
}
},
{
colorSaturation: [0.3, 0.5],
itemStyle: {
borderColorSaturation: 0.7,
gapWidth: 2,
}
},
{
colorSaturation: [0.3, 0.5],
itemStyle: {
borderColorSaturation: 0.6,
gapWidth: 1,
}
},
{
colorSaturation: [0.3, 0.5]
}
]
}]
};
myMap.setOption(option);
}
}
</script>
<style>
.map{
height:400px;
width: 100%;
/* width:700px; */
}
.map2{
height:400px;
width: 100%;
/* width:700px; */
}
</style>