markdown 由简入繁，上手跟我做（十四）echarts 图表 - 饼图
语法
```echarts
json代码
```
可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码
示例 1
效果
{
"title": {
"text": "某站点用户访问来源",
"subtext": "纯属虚构",
"x": "center"
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c} ({d}%)"
},
"legend": {
"orient": "vertical",
"x": "left",
"data": [
"直接访问",
"邮件营销",
"联盟广告",
"视频广告",
"搜索引擎"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"magicType": {
"show": true,
"type": [
"pie",
"funnel"
],
"option": {
"funnel": {
"x": "25%",
"width": "50%",
"funnelAlign": "left",
"max": 1548
}
}
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"calculable": true,
"series": [
{
"name": "访问来源",
"type": "pie",
"radius": "55%",
"center": [
"50%",
"60%"
],
"data": [
{
"value": 335,
"name": "直接访问"
},
{
"value": 310,
"name": "邮件营销"
},
{
"value": 234,
"name": "联盟广告"
},
{
"value": 135,
"name": "视频广告"
},
{
"value": 1548,
"name": "搜索引擎"
}
]
}
]
}
json
{
"title": {
"text": "某站点用户访问来源",
"subtext": "纯属虚构",
"x": "center"
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c} ({d}%)"
},
"legend": {
"orient": "vertical",
"x": "left",
"data": [
"直接访问",
"邮件营销",
"联盟广告",
"视频广告",
"搜索引擎"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"magicType": {
"show": true,
"type": [
"pie",
"funnel"
],
"option": {
"funnel": {
"x": "25%",
"width": "50%",
"funnelAlign": "left",
"max": 1548
}
}
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"calculable": true,
"series": [
{
"name": "访问来源",
"type": "pie",
"radius": "55%",
"center": [
"50%",
"60%"
],
"data": [
{
"value": 335,
"name": "直接访问"
},
{
"value": 310,
"name": "邮件营销"
},
{
"value": 234,
"name": "联盟广告"
},
{
"value": 135,
"name": "视频广告"
},
{
"value": 1548,
"name": "搜索引擎"
}
]
}
]
}
示例 2
效果
{
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c} ({d}%)"
},
"legend": {
"orient": "vertical",
"x": "left",
"data": [
"直达",
"营销广告",
"搜索引擎",
"邮件营销",
"联盟广告",
"视频广告",
"百度",
"谷歌",
"必应",
"其他"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"magicType": {
"show": true,
"type": [
"pie",
"funnel"
]
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"calculable": false,
"series": [
{
"name": "访问来源",
"type": "pie",
"selectedMode": "single",
"radius": [
0,
70
],
"x": "20%",
"width": "40%",
"funnelAlign": "right",
"max": 1548,
"itemStyle": {
"normal": {
"label": {
"position": "inner"
},
"labelLine": {
"show": false
}
}
},
"data": [
{
"value": 335,
"name": "直达"
},
{
"value": 679,
"name": "营销广告"
},
{
"value": 1548,
"name": "搜索引擎",
"selected": true
}
]
},
{
"name": "访问来源",
"type": "pie",
"radius": [
100,
140
],
"x": "60%",
"width": "35%",
"funnelAlign": "left",
"max": 1048,
"data": [
{
"value": 335,
"name": "直达"
},
{
"value": 310,
"name": "邮件营销"
},
{
"value": 234,
"name": "联盟广告"
},
{
"value": 135,
"name": "视频广告"
},
{
"value": 1048,
"name": "百度"
},
{
"value": 251,
"name": "谷歌"
},
{
"value": 147,
"name": "必应"
},
{
"value": 102,
"name": "其他"
}
]
}
]
}
json
{
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c} ({d}%)"
},
"legend": {
"orient": "vertical",
"x": "left",
"data": [
"直达",
"营销广告",
"搜索引擎",
"邮件营销",
"联盟广告",
"视频广告",
"百度",
"谷歌",
"必应",
"其他"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"magicType": {
"show": true,
"type": [
"pie",
"funnel"
]
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"calculable": false,
"series": [
{
"name": "访问来源",
"type": "pie",
"selectedMode": "single",
"radius": [
0,
70
],
"x": "20%",
"width": "40%",
"funnelAlign": "right",
"max": 1548,
"itemStyle": {
"normal": {
"label": {
"position": "inner"
},
"labelLine": {
"show": false
}
}
},
"data": [
{
"value": 335,
"name": "直达"
},
{
"value": 679,
"name": "营销广告"
},
{
"value": 1548,
"name": "搜索引擎",
"selected": true
}
]
},
{
"name": "访问来源",
"type": "pie",
"radius": [
100,
140
],
"x": "60%",
"width": "35%",
"funnelAlign": "left",
"max": 1048,
"data": [
{
"value": 335,
"name": "直达"
},
{
"value": 310,
"name": "邮件营销"
},
{
"value": 234,
"name": "联盟广告"
},
{
"value": 135,
"name": "视频广告"
},
{
"value": 1048,
"name": "百度"
},
{
"value": 251,
"name": "谷歌"
},
{
"value": 147,
"name": "必应"
},
{
"value": 102,
"name": "其他"
}
]
}
]
}
上一篇 markdown 由简入繁，上手跟我做（十三）echarts 图表 - K 线图
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（十五）echarts 图表 - 雷达（面积）图