markdown 由简入繁，上手跟我做（二十二）echarts 图表 - 旭日图
语法
```echarts
json代码
```
可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码
示例 1
效果
{
"backgroundColor": "#2E2733",
"color": [
"#FFAE57",
"#FF7853",
"#EA5151",
"#CC3F57",
"#9A2555"
],
"series": [
{
"type": "sunburst",
"center": [
"50%",
"48%"
],
"data": [
{
"name": "虚构",
"itemStyle": {
"normal": {
"color": "#FF7853"
}
},
"children": [
{
"name": "小说",
"children": [
{
"name": "5☆",
"children": [
{
"name": "疼",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FFAE57"
},
"label": {
"color": "#FFAE57"
}
},
{
"name": "慈悲",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FFAE57"
},
"label": {
"color": "#FFAE57"
}
},
{
"name": "楼下的房客",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FFAE57"
},
"label": {
"color": "#FFAE57"
}
}
],
"label": {
"color": "#FFAE57",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "4☆",
"children": [
{
"name": "虚无的十字架",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
},
{
"name": "无声告白",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
},
{
"name": "童年的终结",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
}
],
"label": {
"color": "#FF7853",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "3☆",
"children": [
{
"name": "疯癫老人日记",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#EA5151"
},
"label": {
"color": "#EA5151"
}
}
],
"label": {
"color": "#EA5151",
"downplay": {
"opacity": 0.5
}
}
}
],
"itemStyle": {}
},
{
"name": "其他",
"children": [
{
"name": "5☆",
"children": [
{
"name": "纳博科夫短篇小说全集",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FFAE57"
},
"label": {
"color": "#FFAE57"
}
}
],
"label": {
"color": "#FFAE57",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "4☆",
"children": [
{
"name": "安魂曲",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
},
{
"name": "人生拼图版",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
}
],
"label": {
"color": "#FF7853",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "3☆",
"children": [
{
"name": "比起爱你，我更需要你",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#EA5151"
},
"label": {
"color": "#EA5151"
}
}
],
"label": {
"color": "#EA5151",
"downplay": {
"opacity": 0.5
}
}
}
],
"itemStyle": {}
}
]
},
{
"name": "非虚构",
"itemStyle": {
"color": "#EA5151"
},
"children": [
{
"name": "设计",
"children": [
{
"name": "5☆",
"children": [
{
"name": "无界面交互",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FFAE57"
},
"label": {
"color": "#FFAE57"
}
}
],
"label": {
"color": "#FFAE57",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "4☆",
"children": [
{
"name": "数字绘图的光照与渲染技术",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
},
{
"name": "日本建筑解剖书",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
}
],
"label": {
"color": "#FF7853",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "3☆",
"children": [
{
"name": "奇幻世界艺术\n&RPG地图绘制讲座",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#EA5151"
},
"label": {
"color": "#EA5151"
}
}
],
"label": {
"color": "#EA5151",
"downplay": {
"opacity": 0.5
}
}
}
],
"itemStyle": {
"color": "#EA5151"
}
},
{
"name": "社科",
"children": [
{
"name": "5☆",
"children": [
{
"name": "痛点",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FFAE57"
},
"label": {
"color": "#FFAE57"
}
}
],
"label": {
"color": "#FFAE57",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "4☆",
"children": [
{
"name": "卓有成效的管理者",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
},
{
"name": "进化",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
},
{
"name": "后物欲时代的来临",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
}
],
"label": {
"color": "#FF7853",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "3☆",
"children": [
{
"name": "疯癫与文明",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#EA5151"
},
"label": {
"color": "#EA5151"
}
}
],
"label": {
"color": "#EA5151",
"downplay": {
"opacity": 0.5
}
}
}
],
"itemStyle": {
"color": "#EA5151"
}
},
{
"name": "心理",
"children": [
{
"name": "5☆",
"children": [
{
"name": "我们时代的神经症人格",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FFAE57"
},
"label": {
"color": "#FFAE57"
}
}
],
"label": {
"color": "#FFAE57",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "4☆",
"children": [
{
"name": "皮格马利翁效应",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
},
{
"name": "受伤的人",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
}
],
"label": {
"color": "#FF7853",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "3☆",
"label": {
"color": "#EA5151",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "2☆",
"children": [
{
"name": "迷恋",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#CC3F57"
},
"label": {
"color": "#CC3F57"
}
}
],
"label": {
"color": "#CC3F57",
"downplay": {
"opacity": 0.5
}
}
}
],
"itemStyle": {
"color": "#EA5151"
}
},
{
"name": "居家",
"children": [
{
"name": "4☆",
"children": [
{
"name": "把房子住成家",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
},
{
"name": "只过必要生活",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
},
{
"name": "北欧简约风格",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
}
],
"label": {
"color": "#FF7853",
"downplay": {
"opacity": 0.5
}
}
}
],
"itemStyle": {
"color": "#EA5151"
}
},
{
"name": "绘本",
"children": [
{
"name": "5☆",
"children": [
{
"name": "设计诗",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FFAE57"
},
"label": {
"color": "#FFAE57"
}
}
],
"label": {
"color": "#FFAE57",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "4☆",
"children": [
{
"name": "假如生活糊弄了你",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
},
{
"name": "博物学家的神秘动物图鉴",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
}
],
"label": {
"color": "#FF7853",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "3☆",
"children": [
{
"name": "方向",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#EA5151"
},
"label": {
"color": "#EA5151"
}
}
],
"label": {
"color": "#EA5151",
"downplay": {
"opacity": 0.5
}
}
}
],
"itemStyle": {
"color": "#EA5151"
}
},
{
"name": "哲学",
"children": [
{
"name": "4☆",
"children": [
{
"name": "人生的智慧",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
}
],
"label": {
"color": "#FF7853",
"downplay": {
"opacity": 0.5
}
}
}
],
"itemStyle": {
"color": "#EA5151"
}
},
{
"name": "技术",
"children": [
{
"name": "5☆",
"children": [
{
"name": "代码整洁之道",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FFAE57"
},
"label": {
"color": "#FFAE57"
}
}
],
"label": {
"color": "#FFAE57",
"downplay": {
"opacity": 0.5
}
}
},
{
"name": "4☆",
"children": [
{
"name": "Three.js 开发指南",
"value": 1,
"itemStyle": {
"opacity": 1,
"color": "#FF7853"
},
"label": {
"color": "#FF7853"
}
}
],
"label": {
"color": "#FF7853",
"downplay": {
"opacity": 0.5
}
}
}
],
"itemStyle": {
"color": "#EA5151"
}
}
]
}
],
"label": {
"rotate": "radial",
"color": "#2E2733"
},
"itemStyle": {
"borderColor": "#2E2733",
"borderWidth": 2
},
"levels": [
{ },
{
"r0": 0,
"r": 40,
"label": {
"rotate": 0
}
},
{
"r0": 40,
"r": 105
},
{
"r0": 115,
"r": 140,
"itemStyle": {
"shadowBlur": 2,
"shadowColor": "#EA5151",
"color": "transparent"
},
"label": {
"rotate": "tangential",
"fontSize": 10,
"color": "#FFAE57"
}
},
{
"r0": 140,
"r": 145,
"itemStyle": {
"shadowBlur": 80,
"shadowColor": "#FFAE57"
},
"label": {
"position": "outside",
"textShadowBlur": 5,
"textShadowColor": "#333"
},
"downplay": {
"label": {
"opacity": 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
]
}
]
}
]
}
echarts 图表 - 旭日图示例 2
上一篇 markdown 由简入繁，上手跟我做（二十一）echarts 图表 - 矩形树图
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（二十三）echarts 图表 - 平行坐标系