【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
英文地址，請注明出處：http://en.pswp.cn/bicheng/89454.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！