**
01. 渲染效果
**
**
02. 实现代码
**
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="adf83f88f9104131a8e55e68a8adf6d5" class="chart-container" style="width:900px; height:500px;"></div>
<script>
var chart_adf83f88f9104131a8e55e68a8adf6d5 = echarts.init(
document.getElementById('adf83f88f9104131a8e55e68a8adf6d5'), 'white', {
renderer: 'canvas'});
var option_adf83f88f9104131a8e55e68a8adf6d5 = {
"baseOption": {
"series": [
{
"type": "bar",
"name": "\u9500\u552e\u989d\ud83e\udd49",
"legendHoverLink": true,
"data": [
226,
276,
249,
221,
187,
231,
173,
134,
223,
240,
183
],
"showBackground": false,
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"position": "top",
"margin": 8,
"fontSize": 13
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
},
"data": [
{
"name": "\u6700\u5927\u503c",
"type": "max"
}
]
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"position": "top",
"margin": 8
},
"data": [
{
"name": "\u8fbe\u6807\u7ebf",
"type": "average"
}
]
},
"itemStyle": {
"normal": {
"barBorderRadius": [
30,
30,
30,
30
],
"shadowBlur": 10,
"shadowColor": "rgba(0, 0, 0, 0.5)",
"shadowOffsetX": 10,
"shadowOffsetY": 10
}
},
"rippleEffect": {
"show": true,
"brushType": "stroke",
"scale": 2.5,
"period": 4
}
},
{
"type": "bar",
"name": "\u6bdb\u5229\u989d\ud83e\udd48",
"legendHoverLink": true,
"data": [
45,
55,
50,
44,
37,
46,
35,
27,
45,
48,
37
],
"showBackground": false,
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"position": "top",
"margin": 8,
"fontSize": 13
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
},
"data": [
{
"name": "\u6700\u5927\u503c",
"type": "max"
}
]
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"position": "top",
"margin": 8
},
"data": [
{
"name": "\u8fbe\u6807\u7ebf",
"type": "average"
}
]
},
"itemStyle": {
"normal": {
"barBorderRadius": [
30,
30,
30,
30
],
"shadowBlur": 10,
"shadowColor": "rgba(0, 0, 0, 0.5)",
"shadowOffsetX": 10,
"shadowOffsetY": 10
}
},
"rippleEffect": {
"show": true,
"brushType": "stroke",
"scale": 2.5,
"period": 4
}
}
],
"timeline": {
"axisType": "category",
"orient": "horizontal",
"autoPlay": false,
"controlPosition": "left",
"loop": true,
"rewind": false,
"show": true,
"inverse": false,
"bottom": "-5px",
"data": [
"2012",
"2013",
"2014",
"2015",
"2016",
"2017",
"2018",
"2019",
"2020",
"2021",
"2022"
]
},
"xAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"data": [
"\u852c\u83dc",
"\u6c34\u679c",
"\u6c34\u4ea7",
"\u8089\u7c7b",
"\u86cb\u7c7b",
"\u5976\u5236\u54c1",
"\u7cd5\u70b9\u7c7b",
"\u86cb\u7c7b",
"\u96f6\u98df",
"\u5364\u5473",
"\u7a3b\u7c73"
]
}
],
"yAxis": [
{
"show": false,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
}
],
"dataZoom": {
"show": true,
"type": "slider",
"realtime": true,
"start": 20,
"end": 80,
"orient": "horizontal",
"zoomLock": false,
"left": "10%",
"top": "89%",
"filterMode": "filter"
}
},
"options": [
{
"legend": [
{
"data": [
"\u9500\u552e\u989d\ud83e\udd49",
"\u6bdb\u5229\u989d\ud83e\udd48"
],
"selected": {
"\u9500\u552e\u989d\ud83e\udd49": true,
"\u6bdb\u5229\u989d\ud83e\udd48": true
},
"show": true,
"left": "40%",
"top": "0%",
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14,
"icon": "path://M24.734 17.003c-0.040-4.053 3.305-5.996 3.454-6.093-1.88-2.751-4.808-3.127-5.851-3.171-2.492-0.252-4.862 1.467-6.127 1.467-1.261 0-3.213-1.43-5.28-1.392-2.716 0.040-5.221 1.579-6.619 4.012-2.822 4.897-0.723 12.151 2.028 16.123 1.344 1.944 2.947 4.127 5.051 4.049 2.026-0.081 2.793-1.311 5.242-1.311s3.138 1.311 5.283 1.271c2.18-0.041 3.562-1.981 4.897-3.931 1.543-2.255 2.179-4.439 2.216-4.551-0.048-0.022-4.252-1.632-4.294-6.473zM20.705 5.11c1.117-1.355 1.871-3.235 1.665-5.11-1.609 0.066-3.559 1.072-4.713 2.423-1.036 1.199-1.942 3.113-1.699 4.951 1.796 0.14 3.629-0.913 4.747-2.264z"
}
],
"series": [
{
"type": "bar",
"name": "\u9500\u552e\u989d\ud83e\udd49",
"legendHoverLink": true,
"data": [
148,
209,
126,
272,
119,
170,
257,
298,
198,
227,
271
],
"showBackground": false,
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"position": "top",
"margin": 8,
"fontSize": 13
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
},
"data": [
{
"name": "\u6700\u5927\u503c",
"type": "max"
}
]
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"position": "top",
"margin": 8
},
"data": [
{
"name": "\u8fbe\u6807\u7ebf",
"type": "average"
}
]
},
"itemStyle": {
"normal": {
"barBorderRadius": [
30,
30,
30,
30
],
"shadowBlur": 10,
"shadowColor": "rgba(0, 0, 0, 0.5)",
"shadowOffsetX": 10,
"shadowOffsetY": 10
}
},
"rippleEffect": {
"show": true,
"brushType": "stroke",
"scale": 2.5,
"period": 4
}
},
{
"type": "bar",
"name": "\u6bdb\u5229\u989d\ud83e\udd48",
"legendHoverLink": true,
"data": [
30,
42,
25,
54,
24,
34,
51,
60,
40,
45,
54
],
"showBackground": false,
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"position": "top",
"margin": 8,
"fontSize": 13
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
},
"data": [
{
"name": "\u6700\u5927\u503c",
"type": "max"
}
]
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"position": "top",
"margin": 8
},
"data": [
{
"name": "\u8fbe\u6807\u7ebf",
"type": "average"
}
]
},
"itemStyle": {
"normal": {
"barBorderRadius": [
30,
30,
30,
30
],
"shadowBlur": 10,
"shadowColor": "rgba(0, 0, 0, 0.5)",
"shadowOffsetX": 10,
"shadowOffsetY": 10
}
},
"rippleEffect": {
"show": true,
"brushType": "stroke",
"scale": 2.5,
"period": 4
}
}
],
"xAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"data": [
"\u852c\u83dc",
"\u6c34\u679c",
"\u6c34\u4ea7",
"\u8089\u7c7b",
"\u86cb\u7c7b",
"\u5976\u5236\u54c1",
"\u7cd5\u70b9\u7c7b",
"\u86cb\u7c7b",
"\u96f6\u98df",
"\u5364\u5473",
"\u7a3b\u7c73"
]
}
],
"yAxis": [
{
"show": false,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
}
],
"title": [
{
"text": "2012\u5e74 \u5404\u54c1\u7c7b\u9500\u552e\u4e1a\u7ee9",
"subtext": "\u53c8\u571f\u53c8\u8c46",
"padding": 5,
"itemGap": 10
}
],
"tooltip": {
"show": true,
"trigger": "axis",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "cross"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
},
"color": [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#749f83",
"#ca8622",
"#bda29a",
"#6e7074",
"#546570",
"#c4ccd3",
"#f05b72",
"#ef5b9c",
"#f47920",
"#905a3d",
"#fab27b",
"#2a5caa",
"#444693",
"#726930",
"#b2d235",
"#6d8346",
"#ac6767",
"#1d953f",
"#6950a1",
"#918597"
],
"graphic": [
{
"type": "image",
"id": "\u6ed1\u7a3d1",
"$action": "merge",
"rotation": 0,
"origin": [
75,
75
],
"right": "center",
"top": 50,
"bounding": "all",
"z": -10,
"zlevel": 0,
"silent": false,
"invisible": false,
"ignore": false,
"cursor": "pointer",
"draggable": false,
"progressive": false,
"width": 0,
"height": 0,
"style": {
"image": "https://oscimg.oschina.net/oscnet/up-407ece679b12536779c132909820f4647ea.png",
"x": 0,
"y": 0,
"width": 150,
"height": 150,
"opacity": 0.1
}
},
{
"type": "image",
"id": "\u6ed1\u7a3d2",
"$action": "merge",
"rotation": 0,
"origin": [
75,
75
],
"right": 20,
"top": 30,
"bounding": "all",
"z": -10,
"zlevel": 0,
"silent": false,
"invisible": false,
"ignore": false,
"cursor": "pointer",
"draggable": false,
"progressive": false,
"width": 0,
"height": 0,
"style": {
"image": "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-4o3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3D0ce9b22a46086e066afd374f373857c2%2Fac6eddc451da81cb8dabadd65866d0160924315f.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1639731617&t=5d03cfab0f0a114e7aeed99a7c75bc64",
"x": 0,
"y": 0,
"width": 150,
"height": 150,
"opacity": 1
}
},
{
"type": "group",
"diffChildrenByName": false,
"children": [
{
"type": "rect",
"$action": "merge",
"rotation": 0,
"left": "center",
"top": "center",
"bounding": "all",
"z": 1000,
"zlevel": 0,
"silent": false,
"invisible": false,
"ignore": false,
"cursor": "pointer",
"draggable": false,
"progressive": false,
"width": 0,
"height": 0,
"shape": {
"x": 0,
"y": 0,
"width": 400,
"height": 50
},
"style": {
"fill": "rgba(0,0,0,0.3)",
"line_width": 0
}
},
{
"type": "text",
"$action": "merge",
"rotation": 0,
"left": "center",
"top": "center",
"bounding": "all",
"z": 1000,
"zlevel": 0,
"silent": false,
"invisible": false,
"ignore": false,
"cursor": "pointer",
"draggable": false,
"progressive": false,
"width": 0,
"height": 0,
"style": {
"text": "\u94b1\u591a\u591a\u96f6\u98df\u8d38\u6613\u8d23\u4efb\u6709\u9650\u516c\u53f8",
"x": 0,
"y": 0,
"font": "bold 26px Microsoft YaHei",
"textAlign": "left",
"fill": "#afa",
"line_width": 0
}
}
],
"$action": "merge",
"rotation": Math.PI / 4,
"right": 200,
"bottom": 160,
"bounding": "raw",
"z": 100,
"zlevel": 0,
"silent": false,
"invisible": false,
"ignore": false,
"cursor": "pointer",
"draggable": false,
"progressive": false,
"width": 0,
"height": 0
}
]
},
{
"legend": [
{
"data": [
"\u9500\u552e\u989d\ud83e\udd49",
"\u6bdb\u5229\u989d\ud83e\udd48"
],
"selected": {
"\u9500\u552e\u989d\ud83e\udd49": true,
"\u6bdb\u5229\u989d\ud83e\udd48": true
},
"show": true,
"left": "40%",
"top": "0%",
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14,
"icon": "path://M24.734 17.003c-0.040-4.053 3.305-5.996 3.454-6.093-1.88-2.751-4.808-3.127-5.851-3.171-2.492-0.252-4.862 1.467-6.127 1.467-1.261 0-3.213-1.43-5.28-1.392-2.716 0.040-5.221 1.579-6.619 4.012-2.822 4.897-0.723 12.151 2.028 16.123 1.344 1.944 2.947 4.127 5.051 4.049 2.026-0.081 2.793-1.311 5.242-1.311s3.138 1.311 5.283 1.271c2.18-0.041 3.562-1.981 4.897-3.931 1.543-2.255 2.179-4.439 2.216-4.551-0.048-0.022-4.252-1.632-4.294-6.473zM20.705 5.11c1.117-1.355 1.871-3.235 1.665-5.11-1.609 0.066-3.559 1.072-4.713 2.423-1.036 1.199-1.942 3.113-1.699 4.951 1.796 0.14 3.629-0.913 4.747-2.264z"
}
],
"series": [
{
"type": "bar",
"name": "\u9500\u552e\u989d\ud83e\udd49",
"legendHoverLink": true,
"data": [
210,
231,
245,
108,
199,
159,
234,
121,
300,
238,
145
],
"showBackground": false,
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"position": "top",
"margin": 8,
"fontSize": 13
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
},
"data": [
{
"name": "\u6700\u5927\u503c",
"type": "max"
}
]
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"position": "top",
"margin": 8
},
"data": [
{
"name": "\u8fbe\u6807\u7ebf",
"type": "average"
}
]
},
"itemStyle": {
"normal": {
"barBorderRadius": [
30,
30,
30,
30
],
"shadowBlur": 10,
"shadowColor": "rgba(0, 0, 0, 0.5)",
"shadowOffsetX": 10,
"shadowOffsetY": 10
}
},
"rippleEffect": {
"show": true,
"brushType": "stroke",
"scale": 2.5,
"period": 4
}
},
{
"type": "bar",
"name": "\u6bdb\u5229\u989d\ud83e\udd48",
"legendHoverLink": true,
"data": [
42,
46,
49,
22,
40,
32,
47,
24,
60,
48,
29
],
"showBackground": false,
"barMinHeight": 0,
"barCategoryGap": "20%",
"barGap": "30%",
"large": false,
"largeThreshold": 400,
"seriesLayoutBy": "column",
"datasetIndex": 0,
"clip": true,
"zlevel": 0,
"z": 2,
"label": {
"show": true,
"position": "top",
"margin": 8,
"fontSize": 13
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
},
"data": [
{
"name": "\u6700\u5927\u503c",
"type": "max"
}
]
},
"markLine": {
"silent": false,
"precision": 2,
"label": {
"show": true,
"position": "top",
"margin": 8
},
"data": [
{
"name": "\u8fbe\u6807\u7ebf",
"type": "average"
}
]
},
"itemStyle": {
"normal": {
"barBorderRadius": [
30,
30,
30,
30
],
"shadowBlur": 10,
"shadowColor": "rgba(0, 0, 0, 0.5)",
"shadowOffsetX": 10,
"shadowOffsetY": 10
}
},
"rippleEffect": {
"show": true,
"brushType": "stroke",
"scale": 2.5,
"period": 4
}
}
],
"xAxis": [
{
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
},
"data": [
"\u852c\u83dc",
"\u6c34\u679c",
"\u6c34\u4ea7",
"\u8089\u7c7b",
"\u86cb\u7c7b",
"\u5976\u5236\u54c1",
"\u7cd5\u70b9\u7c7b",
"\u86cb\u7c7b",
"\u96f6\u98df",
"\u5364\u5473",
"\u7a3b\u7c73"
]
}
],
"yAxis": [
{
"show": false,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"inverse": false,
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": false,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid"
}
}
}
],
"title": [
{
"text": "2013\u5e74 \u5404\u54c1\u7c7b\u9500\u552e\u4e1a\u7ee9",
"subtext": "\u53c8\u571f\u53c8\u8c46",
"padding": 5,
"itemGap": 10
}
],
"tooltip": {
"show": true,
"trigger": "axis",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "cross"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
},
"color": [
"#c23531",
"#2f4554",
"#61a0a8",
"#d48265",
"#749f83",
"#ca8622",
"#bda29a",
"#6e7074",
"#546570",
"#c4ccd3",
"#f05b72",
"#ef5b9c",
"#f47920",
"#905a3d",
"#fab27b",
"#2a5caa",
"#444693",
"#726930",
"#b2d235",
"#6d8346",
"#ac6767",
"#1d953f",
"#6950a1",
"#918597"
],
"graphic": [
{
"type": "image",
"id": "\u6ed1\u7a3d1",
"$action": "merge",
"rotation": 0,
"origin": [
75,
75
],
"right": "center",
"top": 50,
"bounding": "all",
"z": -10,
"zlevel": 0,
"silent": false,
"invisible": false,
"ignore": false,
"cursor": "pointer",
"draggable": false,
"progressive": false,
"width": 0,
"height": 0,
"style": {
"image": "https://oscimg.oschina.net/oscnet/up-407ece679b12536779c132909820f4647ea.png",
"x": 0,
"y": 0,
"width": 150,
"height": 150,
"opacity": 0.1
}
},
{
"type"
最低0.47元/天 解锁文章
286
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
