markdown 由简入繁，上手跟我做（二十五）echarts 图表 - 漏斗图
语法
```echarts
json代码
```
可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码
示例 1
效果
{
"title": {
"text": "漏斗图",
"subtext": "纯属虚构"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c}%"
},
"toolbox": {
"feature": {
"dataView": {
"readOnly": false
},
"restore": { },
"saveAsImage": { }
}
},
"legend": {
"data": [
"展现",
"点击",
"访问",
"咨询",
"订单"
]
},
"calculable": true,
"series": [
{
"name": "漏斗图",
"type": "funnel",
"left": "10%",
"top": 60,
"bottom": 60,
"width": "80%",
"min": 0,
"max": 100,
"minSize": "0%",
"maxSize": "100%",
"sort": "descending",
"gap": 2,
"label": {
"show": true,
"position": "inside"
},
"labelLine": {
"length": 10,
"lineStyle": {
"width": 1,
"type": "solid"
}
},
"itemStyle": {
"borderColor": "#fff",
"borderWidth": 1
},
"emphasis": {
"label": {
"fontSize": 20
}
},
"data": [
{
"value": 60,
"name": "访问"
},
{
"value": 40,
"name": "咨询"
},
{
"value": 20,
"name": "订单"
},
{
"value": 80,
"name": "点击"
},
{
"value": 100,
"name": "展现"
}
]
}
]
}
json
{
"title": {
"text": "漏斗图",
"subtext": "纯属虚构"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c}%"
},
"toolbox": {
"feature": {
"dataView": {
"readOnly": false
},
"restore": { },
"saveAsImage": { }
}
},
"legend": {
"data": [
"展现",
"点击",
"访问",
"咨询",
"订单"
]
},
"calculable": true,
"series": [
{
"name": "漏斗图",
"type": "funnel",
"left": "10%",
"top": 60,
"bottom": 60,
"width": "80%",
"min": 0,
"max": 100,
"minSize": "0%",
"maxSize": "100%",
"sort": "descending",
"gap": 2,
"label": {
"show": true,
"position": "inside"
},
"labelLine": {
"length": 10,
"lineStyle": {
"width": 1,
"type": "solid"
}
},
"itemStyle": {
"borderColor": "#fff",
"borderWidth": 1
},
"emphasis": {
"label": {
"fontSize": 20
}
},
"data": [
{
"value": 60,
"name": "访问"
},
{
"value": 40,
"name": "咨询"
},
{
"value": 20,
"name": "订单"
},
{
"value": 80,
"name": "点击"
},
{
"value": 100,
"name": "展现"
}
]
}
]
}
示例 2
效果
{
"title": {
"text": "漏斗图",
"subtext": "纯属虚构"
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c}%"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"legend": {
"data": [
"展现",
"点击",
"访问",
"咨询",
"订单"
]
},
"series": [
{
"name": "预期",
"type": "funnel",
"left": "10%",
"width": "80%",
"label": {
"normal": {
"formatter": "{b}预期"
},
"emphasis": {
"position": "inside",
"formatter": "{b}预期: {c}%"
}
},
"labelLine": {
"normal": {
"show": false
}
},
"itemStyle": {
"normal": {
"opacity": 0.7
}
},
"data": [
{
"value": 60,
"name": "访问"
},
{
"value": 40,
"name": "咨询"
},
{
"value": 20,
"name": "订单"
},
{
"value": 80,
"name": "点击"
},
{
"value": 100,
"name": "展现"
}
]
},
{
"name": "实际",
"type": "funnel",
"left": "10%",
"width": "80%",
"maxSize": "80%",
"label": {
"normal": {
"position": "inside",
"formatter": "{c}%",
"textStyle": {
"color": "#fff"
}
},
"emphasis": {
"position": "inside",
"formatter": "{b}实际: {c}%"
}
},
"itemStyle": {
"normal": {
"opacity": 0.5,
"borderColor": "#fff",
"borderWidth": 2
}
},
"data": [
{
"value": 30,
"name": "访问"
},
{
"value": 10,
"name": "咨询"
},
{
"value": 5,
"name": "订单"
},
{
"value": 50,
"name": "点击"
},
{
"value": 80,
"name": "展现"
}
]
}
]
}
json
{
"title": {
"text": "漏斗图",
"subtext": "纯属虚构"
},
"tooltip": {
"trigger": "item",
"formatter": "{a} <br/>{b} : {c}%"
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"legend": {
"data": [
"展现",
"点击",
"访问",
"咨询",
"订单"
]
},
"series": [
{
"name": "预期",
"type": "funnel",
"left": "10%",
"width": "80%",
"label": {
"normal": {
"formatter": "{b}预期"
},
"emphasis": {
"position": "inside",
"formatter": "{b}预期: {c}%"
}
},
"labelLine": {
"normal": {
"show": false
}
},
"itemStyle": {
"normal": {
"opacity": 0.7
}
},
"data": [
{
"value": 60,
"name": "访问"
},
{
"value": 40,
"name": "咨询"
},
{
"value": 20,
"name": "订单"
},
{
"value": 80,
"name": "点击"
},
{
"value": 100,
"name": "展现"
}
]
},
{
"name": "实际",
"type": "funnel",
"left": "10%",
"width": "80%",
"maxSize": "80%",
"label": {
"normal": {
"position": "inside",
"formatter": "{c}%",
"textStyle": {
"color": "#fff"
}
},
"emphasis": {
"position": "inside",
"formatter": "{b}实际: {c}%"
}
},
"itemStyle": {
"normal": {
"opacity": 0.5,
"borderColor": "#fff",
"borderWidth": 2
}
},
"data": [
{
"value": 30,
"name": "访问"
},
{
"value": 10,
"name": "咨询"
},
{
"value": 5,
"name": "订单"
},
{
"value": 50,
"name": "点击"
},
{
"value": 80,
"name": "展现"
}
]
}
]
}
上一篇 markdown 由简入繁，上手跟我做（二十四）echarts 图表 - 桑基图
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（二十六）echarts 图表 - 仪表盘