Echarts实现简单柱状图效果。
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
h1{
text-align: center;
}
</style>
</head>
<body>
<h1>Echart实现简单柱状图效果</h1>
<hr>
<div id="container" class="cur" style="min-width:960px;height:400px"></div>
<!--引入Echart-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
<script>
window.onload = function () {
//initChinaEchartMap();
}
let chartDom = document.getElementById('container');
let myChart = echarts.init(chartDom);
let app = {};
let option;
option = {
title: {
text: '视频播放Top10柱状图',
left: '10%' //可以定义
},
legend: {
right: '10%'
},
tooltip: {},
dataset: {
dimensions: [
{ name: 'videoId', displayName: '视频ID' },
{ name: 'views', displayName: '播放量' }
],
source: [
{videoId: '1dmVU08zVpA', views: 545676},
{videoId: '4dmVU08zVYS', views: 54667},
{videoId: '6dmVU074VpS', views: 342545},
{videoId: '576VU074VpS', views: 122545},
{videoId: 'deRVU074VpS', views: 232545},
{videoId: '890VU074VpA', views: 342545},
{videoId: '6dmVU074Vpv', views: 192545},
{videoId: '6dmVU074Vpj', views: 42545},
]
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0, //这个是字体距离
rotate: 360, //倾斜角度
formatter(val) {
return '{a|' + `${val.slice(0, 4)}\n${val.slice(4)}` +'}'
},
rich: {
a: {
height: 12, // 设置字体行高
}
}
}
},
yAxis: {},
series: [
{
type: 'bar',
color: '#4295cd' //可以改变颜色
}
]
};
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>
运行效果:
