js使用echarts图表的柱状图的使用

最新推荐文章于 2024-05-17 13:52:13 发布

天香自然，地上红豆

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量142

点赞数 3

文章标签： javascript echarts 开发语言

本文链接：https://blog.csdn.net/tianxianghuiwei/article/details/138337918

版权

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
    <title>Bar Chart with Custom Label</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.2/dist/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 800px; height: 400px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));

        var app = {
            config: {
                position: 'top',
                distance: 10,
                align: 'center',
                verticalAlign: 'middle',
                rotate: 90
            },
            init: function() {
                this.createChart();
            },
            createChart: function() {
                const labelOption = {
                    show: true,
                    position: app.config.position,
                    distance: app.config.distance,
                    align: app.config.align,
                    verticalAlign: app.config.verticalAlign,
                    rotate: app.config.rotate,
                    formatter: '{c} {name|{a}}',
                    fontSize: 16,
                    rich: {
                        name: {
                            lineHeight: 30,
                            color: 'red'
                        }
                    }
                };

                var option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: ['Forest', 'Steppe', 'Desert', 'Wetland']
                    },
                    toolbox: {
                        show: true,
                        orient: 'vertical',
                        left: 'right',
                        top: 'center',
                        feature: {
                            mark: { show: true },
                            dataView: { show: true, readOnly: false },
                            magicType: { show: true, type: ['line', 'bar', 'stack'] },
                            restore: { show: true },
                            saveAsImage: { show: true }
                        }
                    },
                    xAxis: [{
                        type: 'category',
                        axisTick: { show: false },
                        data: ['2012', '2013', '2014', '2015', '2016']
                    }],
                    yAxis: [{
                        type: 'value'
                    }],
                    series: [
                        {
                            name: 'Forest',
                            type: 'bar',
                            barGap: 0,
                            label: labelOption,
                            emphasis: { focus: 'series' },
                            data: [320, 332, 301, 334, 390]
                        },
                        {
                            name: 'Steppe',
                            type: 'bar',
                            label: labelOption,
                            emphasis: { focus: 'series' },
                            data: [220, 182, 191, 234, 290]
                        },
                        {
                            name: 'Desert',
                            type: 'bar',
                            label: labelOption,
                            emphasis: { focus: 'series' },
                            data: [150, 232, 201, 154, 190]
                        },
                        {
                            name: 'Wetland',
                            type: 'bar',
                            label: labelOption,
                            emphasis: { focus: 'series' },
                            data: [98, 77, 101, 99, 40]
                        }
                    ]
                };

                option && myChart.setOption(option);
            }
        };

        app.init();
    </script>
</body>
</html>

这是一个基础示例用户可以根据需求进行修改希望可以帮到大家