<!--
此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category&code=PYBwLglsB2AEC8sDeAoWtJgDYFMBcya6GOAHmAQOQDqwATlgCawAKoArlgIaQyVEBfADREwwYFkggCqYhjoQA5opx0qXUhADOlEXI3a2EaGFUyicsAE8Q-WJS0ALLo2AB3fnIGC9sXCuhGGWEiRQUgwjlcADMKewBmAFJdC1gFRUc4ygAWZN90ACNgMDEAWyoklLkAYxgwLmMAGS4CnCwCMDp2HB8iUgBBTS1zSxs7SgA3LixuquIi9kCuOisAcS5pWABtAAYhWB2AOh2ARgBdXvQrQe0R4mtbKmqeHEV6Kzn0Rh4uAi3KABMpwAHLp7ECTgBOMGAnZAygXdAhdBaVQQHDDbapWRyWDQLilcarYDTWDxT73MZUArLClfH5_I7Ak5CJkAVlZh2BkMRxGRxBxcnxhKoxNJJwAbHSMFT7DS6NLvvU_idDgB2YFCVWQiVCAHHYG8pH5SK44VEklYWAnNXSh7jeWKhnbVVs3WugFa9UAo2wbzoC4CADcQA
⚠ 请注意，该图表不是 Apache ECharts 官方示例，而是由用户代码生成的。请注意鉴别其内容。
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/echarts.min.js"></script>
<!-- Uncomment this line if you want to dataTool extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/extension/dataTool.min.js"></script>
-->
<!-- Uncomment this line if you want to use gl extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
-->
<!-- Uncomment this line if you want to echarts-stat extension
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
-->
<!-- Uncomment this line if you want to use map
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>
-->
<!-- Uncomment these two lines if you want to use bmap extension
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>
<script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.1/dist/extension/bmap.min.js"></script>
-->
<script type="text/javascript">
var dom = document.getElementById('container');
var myChart = echarts.init(dom, null, {
renderer: 'canvas',
useDirtyRect: false
});
var app = {};
var option;
option = {
title: {
text: ''
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['2018', '2019', '2020']
},
series: [
{
name: 'Goal 3',
type: 'bar',
data: [0.81,0.85,0.89]
},
{
name: 'Goal 16',
type: 'bar',
data: [1.78,1.96,2.08]
},
{
name: 'Goal 17',
type: 'bar',
data: [1.56,1.52,1.72]
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
window.addEventListener('resize', myChart.resize);
</script>
</body>
</html>
