<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="chart" style="width: 600px;height:400px;margin: 100px auto"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
<script>
const myChart = echarts.init(document.getElementById('chart'), 'dark')
const option = {
grid: { x: '30', y: '35', x2: '0', y2: '25' },
xAxis: {
type: 'category',
axisTick: { show: false },
axisLine: { show: false },
axisLabel: { interval: '0', rotate: 0, color: '#FFFFFF', fontSize: '14' },
data: [ '成长型企业', '小巨人企业' ],
},
yAxis: {
nameGap: '3.6',
type: 'value',
axisLine: { show: false },
axisLabel: { show: false },
splitLine: { show: false },
axisTick: { show: false },
},
series: [ {
data: [ 60, 40 ],
type: 'pictorialBar',
color: '#007AFE',
symbol: 'roundRect', //图形类型，带圆角的矩形
barWidth: 4, //柱图宽度
barMaxWidth: '100%', //最大宽度
borderRadius: 2,
symbolClip: true,
symbolMargin: 3, //图形垂直间隔
symbolRepeat: true, //图形是否重复
symbolSize: [ 36, 4 ], //图形元素的尺寸
label: {
show: true, //开启显示
position: 'top', //在上方显示
color: '#FFFFFF',
fontSize: 18,
lineHeight: 18,
},
} ],
}
myChart.setOption(option)
</script>
</body>
</html>