【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>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/bicheng/89454.shtml
繁体地址，请注明出处：http://hk.pswp.cn/bicheng/89454.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！