<!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="4b0f7b2f322a47858a41e99fb420d440" class="chart-container" style="width:900px; height:500px;"></div> <script> var chart_4b0f7b2f322a47858a41e99fb420d440 = echarts.init( document.getElementById('4b0f7b2f322a47858a41e99fb420d440'), 'white', {renderer: 'canvas'}); var option_4b0f7b2f322a47858a41e99fb420d440 = { "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": "bar", "name": "\u671f\u4e2d", "legendHoverLink": true, "data": [ 92, 95, 82, 88 ], "showBackground": false, "barWidth": 40, "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 } }, { "type": "bar", "name": "\u671f\u672b", "legendHoverLink": true, "data": [ 95, 79, 93, 90 ], "showBackground": false, "barWidth": 40, "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 } } ], "legend": [ { "data": [ "\u671f\u4e2d", "\u671f\u672b" ], "selected": { "\u671f\u4e2d": true, "\u671f\u672b": true } } ], "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, "inverse": false, "offset": 0, "splitNumber": 5, "minInterval": 0, "splitLine": { "show": false, "lineStyle": { "show": true, "width": 1, "opacity": 1, "curveness": 0, "type": "solid" } }, "data": [ "\u6d48\u6d48", "\u806a\u806a", "\u5c0f\u667a", "\u6ce2\u5947" ] } ], "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" } } } ] }; chart_4b0f7b2f322a47858a41e99fb420d440.setOption(option_4b0f7b2f322a47858a41e99fb420d440); </script> </body> </html>