【Echarts】 电影票房汇总实时数据横向柱状图比图
效果图
code
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>圆角柱状图</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 900px; height: 500px;"></div><script>const chartDom = document.getElementById('main');const myChart = echarts.init(chartDom);const option = {tooltip: {trigger: 'item' // 更推荐这种单项模式},grid: {left: '100',right: '40',bottom: '40',top: '20',},xAxis: {type: 'value',axisLabel: {formatter: value => `${value / 10000}万`}},yAxis: {type: 'category',data: ['恶意', '聊斋：兰若寺', '侏罗纪世界：重生', 'F1：狂飙飞车','名侦探柯南：独眼的混沌', '长安的荔枝', '超人', '戏台','螺笔小新：大人王国的反击', '新圳龙高手', '其它'],axisLabel: {interval: 0,formatter: function (name) {return name.length > 6 ? name.slice(0, 6) + '...' : name}}},series: [{name: '播放量',type: 'bar',data: [446449, 405000, 398000, 392000,300000, 160000, 110000, 90000,80000, 60000, 50000],itemStyle: {borderRadius: [0, 10, 10, 0], // 显示右侧圆角color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0, color: '#8dafff'},{offset: 1, color: '#a378ff'}])},barWidth: 14}]}myChart.setOption(option);
</script>
</body>
</html>