<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Awesome-pyecharts</title>
<script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
</head>
<body>
<div id="54c145dcb0e7445384de1201619ad765" class="chart-container" style="width:900px; height:500px;"></div>
<script>
var chart_54c145dcb0e7445384de1201619ad765 = echarts.init(
document.getElementById('54c145dcb0e7445384de1201619ad765'), 'white', {renderer: 'canvas'});
var option_54c145dcb0e7445384de1201619ad765 = {
"backgroundColor": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#c86589'}, {offset: 1, color: '#06a7ff'}], false),
"animation": true,
"animationThreshold": 2000,
"animationDuration": 1000,
"animationEasing": "cubicOut",
"animationDelay": 0,
"animationDurationUpdate": 300,
"animationEasingUpdate": "cubicOut",
"animationDelayUpdate": 0,
"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"
],
"series": [
{
"type": "line",
"name": "\u5f39\u5e55\u6570\u91cf",
"connectNulls": false,
"symbol": "circle",
"symbolSize": 6,
"showSymbol": true,
"smooth": true,
"clip": true,
"step": false,
"data": [
[
0,
58
],
[
1,
89
],
[
2,
201
],
[
3,
342
],
[
4,
227
],
[
5,
111
],
[
6,
98
],
[
7,
84
],
[
8,
163
],
[
9,
161
],
[
10,
135
],
[
11,
140
],
[
12,
124
],
[
13,
152
],
[
14,
77
],
[
15,
75
],
[
16,
113
],
[
17,
93
],
[
18,
131
],
[
19,
108
],
[
20,
130
],
[
21,
78
],
[
22,
64
],
[
23,
46
]
],
"hoverAnimation": true,
"label": {
"show": true,
"position": "top",
"color": "white",
"margin": 8
},
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid",
"color": "#fff"
},
"areaStyle": {
"opacity": 1,
"color": new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false)
},
"markPoint": {
"label": {
"show": true,
"position": "inside",
"color": "#fff",
"margin": 8
},
"data": [
{
"type": "max"
}
]
},
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
},
"itemStyle": {
"color": "red",
"borderColor": "#fff",
"borderWidth": 3
},
"zlevel": 0,
"z": 0
}
],
"legend": [
{
"data": [
"\u5f39\u5e55\u6570\u91cf"
],
"selected": {
"\u5f39\u5e55\u6570\u91cf": true
},
"show": false,
"padding": 5,
"itemGap": 10,
"itemWidth": 25,
"itemHeight": 14
}
],
"tooltip": {
"show": true,
"trigger": "axis",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"showContent": true,
"alwaysShowContent": false,
"showDelay": 0,
"hideDelay": 100,
"textStyle": {
"fontSize": 14
},
"borderWidth": 0,
"padding": 5
},
"xAxis": [
{
"type": "category",
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"axisLine": {
"show": true,
"onZero": true,
"onZeroAxisIndex": 0,
"lineStyle": {
"show": true,
"width": 2,
"opacity": 1,
"curveness": 0,
"type": "solid",
"color": "#fff"
}
},
"axisTick": {
"show": true,
"alignWithLabel": false,
"inside": false,
"length": 25,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid",
"color": "#ffffff1f"
}
},
"axisLabel": {
"show": true,
"position": "top",
"color": "#ffffff63",
"margin": 30
},
"inverse": false,
"offset": 0,
"splitNumber": 5,
"boundaryGap": false,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid",
"color": "#ffffff1f"
}
},
"data": [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
10,
11,
12,
13,
14,
15,
16,
17,
18,
19,
20,
21,
22,
23
]
}
],
"yAxis": [
{
"type": "value",
"show": true,
"scale": false,
"nameLocation": "end",
"nameGap": 15,
"gridIndex": 0,
"axisLine": {
"show": true,
"onZero": true,
"onZeroAxisIndex": 0,
"lineStyle": {
"show": true,
"width": 2,
"opacity": 1,
"curveness": 0,
"type": "solid",
"color": "#fff"
}
},
"axisTick": {
"show": true,
"alignWithLabel": false,
"inside": false,
"length": 15,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid",
"color": "#ffffff1f"
}
},
"axisLabel": {
"show": true,
"position": "top",
"color": "#ffffff63",
"margin": 20
},
"inverse": false,
"position": "left",
"offset": 0,
"splitNumber": 5,
"minInterval": 0,
"splitLine": {
"show": true,
"lineStyle": {
"show": true,
"width": 1,
"opacity": 1,
"curveness": 0,
"type": "solid",
"color": "#ffffff1f"
}
}
}
],
"title": [
{
"left": "center",
"bottom": "5%",
"padding": 5,
"itemGap": 10,
"textStyle": {
"color": "#fff",
"fontSize": 16
}
}
]
};
chart_54c145dcb0e7445384de1201619ad765.setOption(option_54c145dcb0e7445384de1201619ad765);
</script>
</body>
</html>