Echarts bar柱状图的使用（入门级）

最新推荐文章于 2024-08-09 14:25:37 发布

敲代码无敌小奶龙

最新推荐文章于 2024-08-09 14:25:37 发布

阅读量376

点赞数 1

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_53986004/article/details/128577006

版权

2023.1.6我学习了如何使用bar柱状图，效果如：

首先就是设置容器的id和宽高。

然后是

var barChart = echarts.init(document.getElementById('bar'));

    barChart.setOption({
        // 标题
        title: {
            text: '当前企业总体发布情况',
            // 设置标题的样式
            textStyle: {
                color: 'white'
            },
            // 设置题目的位置
            left: "20px",
            top: "10px"
        },
        // 设置提示框
        tooltip: {
            show: true
        },
        // 设置按钮开关
        legend: {
            show: false,
        },
        xAxis: {
            data: ['入驻企业数', '企业培育数', '产教融合型产业'],
            // x轴的字体颜色
            axisLabel: {
                textStyle: {
                    color: "white"
                }
            }
        },
        yAxis: {
            // y轴的字体颜色
            axisLabel: {
                textStyle: {
                    color: "white"
                }
            }
        },
        series: [{
            color: 'rgb(0,162,248)',
            name: '柱状图',
            type: 'bar',
            // 柱状图的宽度
            barWidth: 40,
            // 设置数据在头顶显示
            itemStyle: {
                normal: {
                    label: {
                        show: true,
                        position: 'top',
                        textStyle: {
                            fontSize: 16
                        }
                    }
                }
            },
            data: [27, 0, 0]
        }]
    });