markdown 由简入繁，上手跟我做（二十一）echarts 图表 - 矩形树图
语法
```echarts
json代码
```
可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码
示例 1
效果
{
"title": {
"text": "ECharts 配置项查询分布",
"subtext": "2016/04",
"left": "leafDepth"
},
"tooltip": { },
"series": [
{
"name": "option",
"type": "treemap",
"visibleMin": 300,
"data": [
{
"name": "parallelAxis",
"children": [
{
"name": "parallelAxis.name",
"value": 9
},
{
"name": "parallelAxis.type",
"value": 27
},
{
"name": "parallelAxis.axisLabel",
"children": [
{
"name": "parallelAxis.axisLabel.textStyle",
"children": [
{
"name": "parallelAxis.axisLabel.textStyle.color",
"value": 1
},
{
"name": "parallelAxis.axisLabel.textStyle",
"value": 3
}
]
},
{
"name": "parallelAxis.axisLabel.formatter",
"value": 13
},
{
"name": "parallelAxis.axisLabel.interval",
"value": 4
},
{
"name": "parallelAxis.axisLabel.show",
"value": 3
},
{
"name": "parallelAxis.axisLabel.margin",
"value": 1
},
{
"name": "parallelAxis.axisLabel.rotate",
"value": 7
},
{
"name": "parallelAxis.axisLabel",
"value": 18
}
]
},
{
"name": "parallelAxis.boundaryGap",
"value": 11
},
{
"name": "parallelAxis.dim",
"value": 80
},
{
"name": "parallelAxis.parallelIndex",
"value": 38
},
{
"name": "parallelAxis.areaSelectStyle",
"children": [
{
"name": "parallelAxis.areaSelectStyle.width",
"value": 4
},
{
"name": "parallelAxis.areaSelectStyle.borderWidth",
"value": 5
},
{
"name": "parallelAxis.areaSelectStyle.borderColor",
"value": 3
},
{
"name": "parallelAxis.areaSelectStyle.color",
"value": 3
},
{
"name": "parallelAxis.areaSelectStyle.opacity",
"value": 2
},
{
"name": "parallelAxis.areaSelectStyle",
"value": 33
}
]
},
{
"name": "parallelAxis.max",
"value": 7
},
{
"name": "parallelAxis.nameTextStyle",
"children": [
{
"name": "parallelAxis.nameTextStyle.fontStyle",
"value": 2
},
{
"name": "parallelAxis.nameTextStyle.fontWeight",
"value": 2
},
{
"name": "parallelAxis.nameTextStyle.fontFamily",
"value": 2
},
{
"name": "parallelAxis.nameTextStyle.color",
"value": 1
},
{
"name": "parallelAxis.nameTextStyle.fontSize",
"value": 1
},
{
"name": "parallelAxis.nameTextStyle",
"value": 16
}
]
},
{
"name": "parallelAxis.data",
"children": [
{
"name": "parallelAxis.data.textStyle",
"children": [
{
"name": "parallelAxis.data.textStyle.fontSize",
"value": 1
},
{
"name": "parallelAxis.data.textStyle.fontFamily",
"value": 1
},
{
"name": "parallelAxis.data.textStyle.fontWeight",
"value": 1
},
{
"name": "parallelAxis.data.textStyle.fontStyle",
"value": 1
},
{
"name": "parallelAxis.data.textStyle.baseline",
"value": 1
},
{
"name": "parallelAxis.data.textStyle",
"value": 3
}
]
},
{
"name": "parallelAxis.data.value",
"value": 3
},
{
"name": "parallelAxis.data",
"value": 28
}
]
},
{
"name": "parallelAxis.interval",
"value": 15
},
{
"name": "parallelAxis.axisTick",
"children": [
{
"name": "parallelAxis.axisTick.show",
"value": 2
},
{
"name": "parallelAxis.axisTick.interval",
"value": 4
},
{
"name": "parallelAxis.axisTick.inside",
"value": 2
},
{
"name": "parallelAxis.axisTick.length",
"value": 2
},
{
"name": "parallelAxis.axisTick.lineStyle",
"children": [
{
"name": "parallelAxis.axisTick.lineStyle.width",
"value": 1
},
{
"name": "parallelAxis.axisTick.lineStyle",
"value": 2
}
]
},
{
"name": "parallelAxis.axisTick",
"value": 16
}
]
},
{
"name": "parallelAxis.axisLine",
"children": [
{
"name": "parallelAxis.axisLine.lineStyle",
"children": [
{
"name": "parallelAxis.axisLine.lineStyle.color",
"value": 6
},
{
"name": "parallelAxis.axisLine.lineStyle.shadowBlur",
"value": 3
},
{
"name": "parallelAxis.axisLine.lineStyle.type",
"value": 2
},
{
"name": "parallelAxis.axisLine.lineStyle.shadowColor",
"value": 2
},
{
"name": "parallelAxis.axisLine.lineStyle.shadowOffsetY",
"value": 1
},
{
"name": "parallelAxis.axisLine.lineStyle.shadowOffsetX",
"value": 1
},
{
"name": "parallelAxis.axisLine.lineStyle.width",
"value": 1
},
{
"name": "parallelAxis.axisLine.lineStyle",
"value": 9
}
]
},
{
"name": "parallelAxis.axisLine.show",
"value": 3
},
{
"name": "parallelAxis.axisLine",
"value": 24
}
]
},
{
"name": "parallelAxis.nameGap",
"value": 10
},
{
"name": "parallelAxis.min",
"value": 10
},
{
"name": "parallelAxis.splitNumber",
"value": 6
},
{
"name": "parallelAxis.nameLocation",
"value": 9
},
{
"name": "parallelAxis.inverse",
"value": 5
},
{
"name": "parallelAxis.scale",
"value": 3
},
{
"name": "parallelAxis.silent",
"value": 1
},
{
"name": "parallelAxis",
"value": 2600
}
]
},
{
"name": "animationDurationUpdate",
"value": 1609
}
],
"leafDepth": 2,
"levels": [
{
"itemStyle": {
"normal": {
"borderColor": "#555",
"borderWidth": 4,
"gapWidth": 4
}
}
},
{
"colorSaturation": [
0.3,
0.6
],
"itemStyle": {
"normal": {
"borderColorSaturation": 0.7,
"gapWidth": 2,
"borderWidth": 2
}
}
},
{
"colorSaturation": [
0.3,
0.5
],
"itemStyle": {
"normal": {
"borderColorSaturation": 0.6,
"gapWidth": 1
}
}
},
{
"colorSaturation": [
0.3,
0.5
]
}
]
}
]
}
json
{
"title": {
"text": "ECharts 配置项查询分布",
"subtext": "2016/04",
"left": "leafDepth"
},
"tooltip": { },
"series": [
{
"name": "option",
"type": "treemap",
"visibleMin": 300,
"data": [
{
"name": "parallelAxis",
"children": [
{
"name": "parallelAxis.name",
"value": 9
},
{
"name": "parallelAxis.type",
"value": 27
},
{
"name": "parallelAxis.axisLabel",
"children": [
{
"name": "parallelAxis.axisLabel.textStyle",
"children": [
{
"name": "parallelAxis.axisLabel.textStyle.color",
"value": 1
},
{
"name": "parallelAxis.axisLabel.textStyle",
"value": 3
}
]
},
{
"name": "parallelAxis.axisLabel.formatter",
"value": 13
},
{
"name": "parallelAxis.axisLabel.interval",
"value": 4
},
{
"name": "parallelAxis.axisLabel.show",
"value": 3
},
{
"name": "parallelAxis.axisLabel.margin",
"value": 1
},
{
"name": "parallelAxis.axisLabel.rotate",
"value": 7
},
{
"name": "parallelAxis.axisLabel",
"value": 18
}
]
},
{
"name": "parallelAxis.boundaryGap",
"value": 11
},
{
"name": "parallelAxis.dim",
"value": 80
},
{
"name": "parallelAxis.parallelIndex",
"value": 38
},
{
"name": "parallelAxis.areaSelectStyle",
"children": [
{
"name": "parallelAxis.areaSelectStyle.width",
"value": 4
},
{
"name": "parallelAxis.areaSelectStyle.borderWidth",
"value": 5
},
{
"name": "parallelAxis.areaSelectStyle.borderColor",
"value": 3
},
{
"name": "parallelAxis.areaSelectStyle.color",
"value": 3
},
{
"name": "parallelAxis.areaSelectStyle.opacity",
"value": 2
},
{
"name": "parallelAxis.areaSelectStyle",
"value": 33
}
]
},
{
"name": "parallelAxis.max",
"value": 7
},
{
"name": "parallelAxis.nameTextStyle",
"children": [
{
"name": "parallelAxis.nameTextStyle.fontStyle",
"value": 2
},
{
"name": "parallelAxis.nameTextStyle.fontWeight",
"value": 2
},
{
"name": "parallelAxis.nameTextStyle.fontFamily",
"value": 2
},
{
"name": "parallelAxis.nameTextStyle.color",
"value": 1
},
{
"name": "parallelAxis.nameTextStyle.fontSize",
"value": 1
},
{
"name": "parallelAxis.nameTextStyle",
"value": 16
}
]
},
{
"name": "parallelAxis.data",
"children": [
{
"name": "parallelAxis.data.textStyle",
"children": [
{
"name": "parallelAxis.data.textStyle.fontSize",
"value": 1
},
{
"name": "parallelAxis.data.textStyle.fontFamily",
"value": 1
},
{
"name": "parallelAxis.data.textStyle.fontWeight",
"value": 1
},
{
"name": "parallelAxis.data.textStyle.fontStyle",
"value": 1
},
{
"name": "parallelAxis.data.textStyle.baseline",
"value": 1
},
{
"name": "parallelAxis.data.textStyle",
"value": 3
}
]
},
{
"name": "parallelAxis.data.value",
"value": 3
},
{
"name": "parallelAxis.data",
"value": 28
}
]
},
{
"name": "parallelAxis.interval",
"value": 15
},
{
"name": "parallelAxis.axisTick",
"children": [
{
"name": "parallelAxis.axisTick.show",
"value": 2
},
{
"name": "parallelAxis.axisTick.interval",
"value": 4
},
{
"name": "parallelAxis.axisTick.inside",
"value": 2
},
{
"name": "parallelAxis.axisTick.length",
"value": 2
},
{
"name": "parallelAxis.axisTick.lineStyle",
"children": [
{
"name": "parallelAxis.axisTick.lineStyle.width",
"value": 1
},
{
"name": "parallelAxis.axisTick.lineStyle",
"value": 2
}
]
},
{
"name": "parallelAxis.axisTick",
"value": 16
}
]
},
{
"name": "parallelAxis.axisLine",
"children": [
{
"name": "parallelAxis.axisLine.lineStyle",
"children": [
{
"name": "parallelAxis.axisLine.lineStyle.color",
"value": 6
},
{
"name": "parallelAxis.axisLine.lineStyle.shadowBlur",
"value": 3
},
{
"name": "parallelAxis.axisLine.lineStyle.type",
"value": 2
},
{
"name": "parallelAxis.axisLine.lineStyle.shadowColor",
"value": 2
},
{
"name": "parallelAxis.axisLine.lineStyle.shadowOffsetY",
"value": 1
},
{
"name": "parallelAxis.axisLine.lineStyle.shadowOffsetX",
"value": 1
},
{
"name": "parallelAxis.axisLine.lineStyle.width",
"value": 1
},
{
"name": "parallelAxis.axisLine.lineStyle",
"value": 9
}
]
},
{
"name": "parallelAxis.axisLine.show",
"value": 3
},
{
"name": "parallelAxis.axisLine",
"value": 24
}
]
},
{
"name": "parallelAxis.nameGap",
"value": 10
},
{
"name": "parallelAxis.min",
"value": 10
},
{
"name": "parallelAxis.splitNumber",
"value": 6
},
{
"name": "parallelAxis.nameLocation",
"value": 9
},
{
"name": "parallelAxis.inverse",
"value": 5
},
{
"name": "parallelAxis.scale",
"value": 3
},
{
"name": "parallelAxis.silent",
"value": 1
},
{
"name": "parallelAxis",
"value": 2600
}
]
},
{
"name": "animationDurationUpdate",
"value": 1609
}
],
"leafDepth": 2,
"levels": [
{
"itemStyle": {
"normal": {
"borderColor": "#555",
"borderWidth": 4,
"gapWidth": 4
}
}
},
{
"colorSaturation": [
0.3,
0.6
],
"itemStyle": {
"normal": {
"borderColorSaturation": 0.7,
"gapWidth": 2,
"borderWidth": 2
}
}
},
{
"colorSaturation": [
0.3,
0.5
],
"itemStyle": {
"normal": {
"borderColorSaturation": 0.6,
"gapWidth": 1
}
}
},
{
"colorSaturation": [
0.3,
0.5
]
}
]
}
]
}
上一篇 markdown 由简入繁，上手跟我做（二十）echarts 图表 - 树图
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（二十二）echarts 图表 - 旭日图