markdown 由简入繁，上手跟我做（二十七）echarts 图表 - 象形柱图
语法
```echarts
json代码
```
可用 echarts 源代码，标准 json 代码
不能嵌入 js 代码
示例 1
效果
{
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"backgroundColor": "#0f375f",
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"legend": {
"data": [
"line",
"bar"
],
"textStyle": {
"color": "#ccc"
}
},
"xAxis": {
"data": [
"2019-8-27",
"2019-8-28",
"2019-8-29",
"2019-8-30",
"2019-8-31",
"2019-9-1",
"2019-9-2",
"2019-9-3",
"2019-9-4",
"2019-9-5",
"2019-9-6",
"2019-9-7",
"2019-9-8",
"2019-9-9",
"2019-9-10",
"2019-9-11",
"2019-9-12",
"2019-9-13",
"2019-9-14",
"2019-9-15"
],
"axisLine": {
"lineStyle": {
"color": "#ccc"
}
}
},
"yAxis": {
"splitLine": {
"show": false
},
"axisLine": {
"lineStyle": {
"color": "#ccc"
}
}
},
"series": [
{
"name": "line",
"type": "line",
"smooth": true,
"showAllSymbol": true,
"symbol": "emptyCircle",
"symbolSize": 15,
"data": [
219.24876248901694,
229.2619066023966,
146.61447478415766,
263.24977855760227,
212.9194943649046,
220.71475559808783,
374.6737226311343,
96.9535982900815,
203.09991824030718,
311.45634979260967,
358.38494509255247,
267.55394387527537,
189.9755170792298,
134.6637065627468,
190.1455605563211,
71.28138041472643,
159.78996505634285,
254.32078416494338,
204.5510004027796,
23.276926452175186
]
},
{
"name": "bar",
"type": "bar",
"barWidth": 10,
"itemStyle": {
"normal": {
"barBorderRadius": 5,
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [
{
"offset": 0,
"color": "#14c8d4"
},
{
"offset": 1,
"color": "#43eec6"
}
]
}
}
},
"data": [
170.87104748606262,
22.71305710306011,
67.71387778480276,
142.99812532476892,
126.5522012598488,
75.19416018825834,
51.11363628333896,
10.572209538843813,
124.1607803361529,
106.55779028423149,
178.6382005042191,
180.06959598239598,
33.51985702081299,
15.42555355861479,
54.73794269579384,
176.190882365992,
70.51780739955733,
17.947889251379134,
77.73985863771426,
66.19930967647424
]
},
{
"name": "line",
"type": "bar",
"barGap": "-100%",
"barWidth": 10,
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [
{
"offset": 0,
"color": "rgba(20,200,212,0.5)"
},
{
"offset": 0.2,
"color": "rgba(20,200,212,0.2)"
},
{
"offset": 1,
"color": "rgba(20,200,212,0)"
}
]
}
}
},
"z": -12,
"data": [
219.24876248901694,
229.2619066023966,
146.61447478415766,
263.24977855760227,
212.9194943649046,
220.71475559808783,
374.6737226311343,
96.9535982900815,
203.09991824030718,
311.45634979260967,
358.38494509255247,
267.55394387527537,
189.9755170792298,
134.6637065627468,
190.1455605563211,
71.28138041472643,
159.78996505634285,
254.32078416494338,
204.5510004027796,
23.276926452175186
]
},
{
"name": "dotted",
"type": "pictorialBar",
"symbol": "rect",
"itemStyle": {
"normal": {
"color": "#0f375f"
}
},
"symbolRepeat": true,
"symbolSize": [
12,
4
],
"symbolMargin": 1,
"z": -10,
"data": [
219.24876248901694,
229.2619066023966,
146.61447478415766,
263.24977855760227,
212.9194943649046,
220.71475559808783,
374.6737226311343,
96.9535982900815,
203.09991824030718,
311.45634979260967,
358.38494509255247,
267.55394387527537,
189.9755170792298,
134.6637065627468,
190.1455605563211,
71.28138041472643,
159.78996505634285,
254.32078416494338,
204.5510004027796,
23.276926452175186
]
}
]
}
json
{
"toolbox": {
"show": true,
"feature": {
"mark": {
"show": true
},
"dataView": {
"show": true,
"readOnly": false
},
"restore": {
"show": true
},
"saveAsImage": {
"show": true
}
}
},
"backgroundColor": "#0f375f",
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"legend": {
"data": [
"line",
"bar"
],
"textStyle": {
"color": "#ccc"
}
},
"xAxis": {
"data": [
"2019-8-27",
"2019-8-28",
"2019-8-29",
"2019-8-30",
"2019-8-31",
"2019-9-1",
"2019-9-2",
"2019-9-3",
"2019-9-4",
"2019-9-5",
"2019-9-6",
"2019-9-7",
"2019-9-8",
"2019-9-9",
"2019-9-10",
"2019-9-11",
"2019-9-12",
"2019-9-13",
"2019-9-14",
"2019-9-15"
],
"axisLine": {
"lineStyle": {
"color": "#ccc"
}
}
},
"yAxis": {
"splitLine": {
"show": false
},
"axisLine": {
"lineStyle": {
"color": "#ccc"
}
}
},
"series": [
{
"name": "line",
"type": "line",
"smooth": true,
"showAllSymbol": true,
"symbol": "emptyCircle",
"symbolSize": 15,
"data": [
219.24876248901694,
229.2619066023966,
146.61447478415766,
263.24977855760227,
212.9194943649046,
220.71475559808783,
374.6737226311343,
96.9535982900815,
203.09991824030718,
311.45634979260967,
358.38494509255247,
267.55394387527537,
189.9755170792298,
134.6637065627468,
190.1455605563211,
71.28138041472643,
159.78996505634285,
254.32078416494338,
204.5510004027796,
23.276926452175186
]
},
{
"name": "bar",
"type": "bar",
"barWidth": 10,
"itemStyle": {
"normal": {
"barBorderRadius": 5,
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [
{
"offset": 0,
"color": "#14c8d4"
},
{
"offset": 1,
"color": "#43eec6"
}
]
}
}
},
"data": [
170.87104748606262,
22.71305710306011,
67.71387778480276,
142.99812532476892,
126.5522012598488,
75.19416018825834,
51.11363628333896,
10.572209538843813,
124.1607803361529,
106.55779028423149,
178.6382005042191,
180.06959598239598,
33.51985702081299,
15.42555355861479,
54.73794269579384,
176.190882365992,
70.51780739955733,
17.947889251379134,
77.73985863771426,
66.19930967647424
]
},
{
"name": "line",
"type": "bar",
"barGap": "-100%",
"barWidth": 10,
"itemStyle": {
"normal": {
"color": {
"x": 0,
"y": 0,
"x2": 0,
"y2": 1,
"type": "linear",
"global": false,
"colorStops": [
{
"offset": 0,
"color": "rgba(20,200,212,0.5)"
},
{
"offset": 0.2,
"color": "rgba(20,200,212,0.2)"
},
{
"offset": 1,
"color": "rgba(20,200,212,0)"
}
]
}
}
},
"z": -12,
"data": [
219.24876248901694,
229.2619066023966,
146.61447478415766,
263.24977855760227,
212.9194943649046,
220.71475559808783,
374.6737226311343,
96.9535982900815,
203.09991824030718,
311.45634979260967,
358.38494509255247,
267.55394387527537,
189.9755170792298,
134.6637065627468,
190.1455605563211,
71.28138041472643,
159.78996505634285,
254.32078416494338,
204.5510004027796,
23.276926452175186
]
},
{
"name": "dotted",
"type": "pictorialBar",
"symbol": "rect",
"itemStyle": {
"normal": {
"color": "#0f375f"
}
},
"symbolRepeat": true,
"symbolSize": [
12,
4
],
"symbolMargin": 1,
"z": -10,
"data": [
219.24876248901694,
229.2619066023966,
146.61447478415766,
263.24977855760227,
212.9194943649046,
220.71475559808783,
374.6737226311343,
96.9535982900815,
203.09991824030718,
311.45634979260967,
358.38494509255247,
267.55394387527537,
189.9755170792298,
134.6637065627468,
190.1455605563211,
71.28138041472643,
159.78996505634285,
254.32078416494338,
204.5510004027796,
23.276926452175186
]
}
]
}
上一篇 markdown 由简入繁，上手跟我做（二十六）echarts 图表 - 仪表盘
markdown 教程（目录）
下一篇 markdown 由简入繁，上手跟我做（二十八）echarts 图表 - 主题河流图