← 返回首页
Echarts实现简单柱状图效果
发表时间:2023-07-09 10:41:14
Echarts实现简单柱状图效果

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>

运行效果: