markdown 由简入繁，上手跟我做（十一）echarts 图表 - 柱状（条形）图
语法
```echarts
json代码
```
可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码
示例 1
效果
{
"title": {
"text": "温度计式图表",
"subtext": "From ExcelHome",
"sublink": "http://e.weibo.com/1341556070/AizJXrAEa"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"legend": {
"selectedMode": false,
"data": [
"Acutal",
"Forecast"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"calculable": true,
"xAxis": [
{
"type": "category",
"data": [
"Cosco",
"CMA",
"APL",
"OOCL",
"Wanhai",
"Zim"
]
}
],
"yAxis": [
{
"type": "value",
"boundaryGap": [
0,
0.1
]
}
],
"series": [
{
"name": "Acutal",
"type": "bar",
"stack": "sum",
"barCategoryGap": "50%",
"itemStyle": {
"normal": {
"color": "tomato",
"barBorderColor": "tomato",
"barBorderWidth": 6,
"barBorderRadius": 0,
"label": {
"show": true,
"position": "insideTop"
}
}
},
"data": [
260,
200,
220,
120,
100,
80
]
},
{
"name": "Forecast",
"type": "bar",
"stack": "sum",
"itemStyle": {
"normal": {
"color": "#fff",
"barBorderColor": "tomato",
"barBorderWidth": 6,
"barBorderRadius": 0,
"label": {
"show": true,
"position": "top",
"textStyle": {
"color": "tomato"
}
}
}
},
"data": [
40,
80,
50,
80,
80,
70
]
}
]
}
json
{
"title": {
"text": "温度计式图表",
"subtext": "From ExcelHome",
"sublink": "http://e.weibo.com/1341556070/AizJXrAEa"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"legend": {
"selectedMode": false,
"data": [
"Acutal",
"Forecast"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"calculable": true,
"xAxis": [
{
"type": "category",
"data": [
"Cosco",
"CMA",
"APL",
"OOCL",
"Wanhai",
"Zim"
]
}
],
"yAxis": [
{
"type": "value",
"boundaryGap": [
0,
0.1
]
}
],
"series": [
{
"name": "Acutal",
"type": "bar",
"stack": "sum",
"barCategoryGap": "50%",
"itemStyle": {
"normal": {
"color": "tomato",
"barBorderColor": "tomato",
"barBorderWidth": 6,
"barBorderRadius": 0,
"label": {
"show": true,
"position": "insideTop"
}
}
},
"data": [
260,
200,
220,
120,
100,
80
]
},
{
"name": "Forecast",
"type": "bar",
"stack": "sum",
"itemStyle": {
"normal": {
"color": "#fff",
"barBorderColor": "tomato",
"barBorderWidth": 6,
"barBorderRadius": 0,
"label": {
"show": true,
"position": "top",
"textStyle": {
"color": "tomato"
}
}
}
},
"data": [
40,
80,
50,
80,
80,
70
]
}
]
}
示例 2
效果
{
"title": {
"text": "阶梯瀑布图",
"subtext": "From ExcelHome",
"sublink": "http://e.weibo.com/1341556070/Aj1J2x5a5"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"legend": {
"data": [
"支出",
"收入"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"xAxis": [
{
"type": "category",
"splitLine": {
"show": false
},
"data": [
"11月1日",
"11月2日",
"11月3日",
"11月4日",
"11月5日",
"11月6日",
"11月7日",
"11月8日",
"11月9日",
"11月10日",
"11月11日"
]
}
],
"yAxis": [
{
"type": "value"
}
],
"series": [
{
"name": "辅助",
"type": "bar",
"stack": "总量",
"itemStyle": {
"normal": {
"barBorderColor": "rgba(0,0,0,0)",
"color": "rgba(0,0,0,0)"
},
"emphasis": {
"barBorderColor": "rgba(0,0,0,0)",
"color": "rgba(0,0,0,0)"
}
},
"data": [
0,
900,
1245,
1530,
1376,
1376,
1511,
1689,
1856,
1495,
1292
]
},
{
"name": "收入",
"type": "bar",
"stack": "总量",
"itemStyle": {
"normal": {
"label": {
"show": true,
"position": "top"
}
}
},
"data": [
900,
345,
393,
"-",
"-",
135,
178,
286,
"-",
"-",
"-"
]
},
{
"name": "支出",
"type": "bar",
"stack": "总量",
"itemStyle": {
"normal": {
"label": {
"show": true,
"position": "bottom"
}
}
},
"data": [
"-",
"-",
"-",
108,
154,
"-",
"-",
"-",
119,
361,
203
]
}
]
}
json
{
"title": {
"text": "阶梯瀑布图",
"subtext": "From ExcelHome",
"sublink": "http://e.weibo.com/1341556070/Aj1J2x5a5"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"legend": {
"data": [
"支出",
"收入"
]
},
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"xAxis": [
{
"type": "category",
"splitLine": {
"show": false
},
"data": [
"11月1日",
"11月2日",
"11月3日",
"11月4日",
"11月5日",
"11月6日",
"11月7日",
"11月8日",
"11月9日",
"11月10日",
"11月11日"
]
}
],
"yAxis": [
{
"type": "value"
}
],
"series": [
{
"name": "辅助",
"type": "bar",
"stack": "总量",
"itemStyle": {
"normal": {
"barBorderColor": "rgba(0,0,0,0)",
"color": "rgba(0,0,0,0)"
},
"emphasis": {
"barBorderColor": "rgba(0,0,0,0)",
"color": "rgba(0,0,0,0)"
}
},
"data": [
0,
900,
1245,
1530,
1376,
1376,
1511,
1689,
1856,
1495,
1292
]
},
{
"name": "收入",
"type": "bar",
"stack": "总量",
"itemStyle": {
"normal": {
"label": {
"show": true,
"position": "top"
}
}
},
"data": [
900,
345,
393,
"-",
"-",
135,
178,
286,
"-",
"-",
"-"
]
},
{
"name": "支出",
"type": "bar",
"stack": "总量",
"itemStyle": {
"normal": {
"label": {
"show": true,
"position": "bottom"
}
}
},
"data": [
"-",
"-",
"-",
108,
154,
"-",
"-",
"-",
119,
361,
203
]
}
]
}
示例 3
效果
{
"title": {
"text": "交错正负轴标签",
"subtext": "From ExcelHome",
"sublink": "http://e.weibo.com/1341556070/AjwF2AgQm"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"grid": {
"top": 80,
"bottom": 30
},
"xAxis": {
"type": "value",
"position": "top",
"splitLine": {
"lineStyle": {
"type": "dashed"
}
}
},
"yAxis": {
"type": "category",
"axisLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"data": [
"ten",
"nine",
"eight",
"seven",
"six",
"five",
"four",
"three",
"two",
"one"
]
},
"series": [
{
"name": "生活费",
"type": "bar",
"stack": "总量",
"label": {
"normal": {
"show": true,
"formatter": "{b}"
}
},
"data": [
{
"value": -0.07,
"label": {
"normal": {
"position": "right"
}
}
},
{
"value": -0.09,
"label": {
"normal": {
"position": "right"
}
}
},
0.2,
0.44,
{
"value": -0.23,
"label": {
"normal": {
"position": "right"
}
}
},
0.08,
{
"value": -0.17,
"label": {
"normal": {
"position": "right"
}
}
},
0.47,
{
"value": -0.36,
"label": {
"normal": {
"position": "right"
}
}
},
0.18
]
}
]
}
json
{
"title": {
"text": "交错正负轴标签",
"subtext": "From ExcelHome",
"sublink": "http://e.weibo.com/1341556070/AjwF2AgQm"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"grid": {
"top": 80,
"bottom": 30
},
"xAxis": {
"type": "value",
"position": "top",
"splitLine": {
"lineStyle": {
"type": "dashed"
}
}
},
"yAxis": {
"type": "category",
"axisLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"data": [
"ten",
"nine",
"eight",
"seven",
"six",
"five",
"four",
"three",
"two",
"one"
]
},
"series": [
{
"name": "生活费",
"type": "bar",
"stack": "总量",
"label": {
"normal": {
"show": true,
"formatter": "{b}"
}
},
"data": [
{
"value": -0.07,
"label": {
"normal": {
"position": "right"
}
}
},
{
"value": -0.09,
"label": {
"normal": {
"position": "right"
}
}
},
0.2,
0.44,
{
"value": -0.23,
"label": {
"normal": {
"position": "right"
}
}
},
0.08,
{
"value": -0.17,
"label": {
"normal": {
"position": "right"
}
}
},
0.47,
{
"value": -0.36,
"label": {
"normal": {
"position": "right"
}
}
},
0.18
]
}
]
}
上一篇 markdown 由简入繁，上手跟我做（十）echarts 图表 - 折线（面积）图
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（十二）echarts 图表 - 散点（气泡）图