|
- <!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="790dd57fb22a43aa8d771faf98b6b26e" class="chart-container" style="width:900px; height:500px;"></div>
- <script>
- var chart_790dd57fb22a43aa8d771faf98b6b26e = echarts.init(
- document.getElementById('790dd57fb22a43aa8d771faf98b6b26e'), 'white', {renderer: 'canvas'});
- var option_790dd57fb22a43aa8d771faf98b6b26e = {
- "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": "\u5546\u5bb6A",
- "connectNulls": false,
- "symbolSize": 4,
- "showSymbol": true,
- "smooth": true,
- "clip": true,
- "step": false,
- "data": [
- [
- "Jan",
- 2.0
- ],
- [
- "Feb",
- 4.9
- ],
- [
- "Mar",
- 7.0
- ],
- [
- "Apr",
- 23.2
- ],
- [
- "May",
- 25.6
- ],
- [
- "Jun",
- 76.7
- ],
- [
- "Jul",
- 135.6
- ],
- [
- "Aug",
- 162.2
- ],
- [
- "Sep",
- 32.6
- ],
- [
- "Oct",
- 20.0
- ],
- [
- "Nov",
- 6.4
- ],
- [
- "Dec",
- 3.3
- ]
- ],
- "hoverAnimation": true,
- "label": {
- "show": false,
- "position": "top",
- "margin": 8
- },
- "lineStyle": {
- "show": true,
- "width": 1,
- "opacity": 1,
- "curveness": 0,
- "type": "solid"
- },
- "areaStyle": {
- "opacity": 0.5
- },
- "zlevel": 0,
- "z": 0,
- "rippleEffect": {
- "show": true,
- "brushType": "stroke",
- "scale": 2.5,
- "period": 4
- }
- },
- {
- "type": "line",
- "name": "\u5546\u5bb6B",
- "connectNulls": false,
- "symbolSize": 4,
- "showSymbol": true,
- "smooth": true,
- "clip": true,
- "step": false,
- "data": [
- [
- "Jan",
- 2.6
- ],
- [
- "Feb",
- 5.9
- ],
- [
- "Mar",
- 9.0
- ],
- [
- "Apr",
- 26.4
- ],
- [
- "May",
- 28.7
- ],
- [
- "Jun",
- 70.7
- ],
- [
- "Jul",
- 175.6
- ],
- [
- "Aug",
- 182.2
- ],
- [
- "Sep",
- 48.7
- ],
- [
- "Oct",
- 18.8
- ],
- [
- "Nov",
- 6.0
- ],
- [
- "Dec",
- 2.3
- ]
- ],
- "hoverAnimation": true,
- "label": {
- "show": false,
- "position": "top",
- "margin": 8
- },
- "lineStyle": {
- "show": true,
- "width": 1,
- "opacity": 1,
- "curveness": 0,
- "type": "solid"
- },
- "areaStyle": {
- "opacity": 0.5
- },
- "zlevel": 0,
- "z": 0,
- "rippleEffect": {
- "show": true,
- "brushType": "stroke",
- "scale": 2.5,
- "period": 4
- }
- }
- ],
- "legend": [
- {
- "data": [
- "\u5546\u5bb6A",
- "\u5546\u5bb6B"
- ],
- "selected": {
- "\u5546\u5bb6A": true,
- "\u5546\u5bb6B": true
- },
- "show": true,
- "padding": 5,
- "itemGap": 10,
- "itemWidth": 25,
- "itemHeight": 14
- }
- ],
- "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
- },
- "xAxis": [
- {
- "show": true,
- "scale": false,
- "nameLocation": "end",
- "nameGap": 15,
- "gridIndex": 0,
- "axisTick": {
- "show": true,
- "alignWithLabel": true,
- "inside": false
- },
- "inverse": false,
- "offset": 0,
- "splitNumber": 5,
- "boundaryGap": false,
- "minInterval": 0,
- "splitLine": {
- "show": false,
- "lineStyle": {
- "show": true,
- "width": 1,
- "opacity": 1,
- "curveness": 0,
- "type": "solid"
- }
- },
- "data": [
- "Jan",
- "Feb",
- "Mar",
- "Apr",
- "May",
- "Jun",
- "Jul",
- "Aug",
- "Sep",
- "Oct",
- "Nov",
- "Dec"
- ]
- }
- ],
- "yAxis": [
- {
- "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"
- }
- }
- }
- ],
- "title": [
- {
- "text": "Line-\u9762\u79ef\u56fe\uff08\u7d27\u8d34 Y \u8f74\uff09",
- "padding": 5,
- "itemGap": 10
- }
- ]
- };
- chart_790dd57fb22a43aa8d771faf98b6b26e.setOption(option_790dd57fb22a43aa8d771faf98b6b26e);
- </script>
- </body>
- </html>
|