JavaScript实现柱状图echarts

EBYB

已于 2022-03-23 17:53:20 修改

阅读量1.8k

点赞数

分类专栏： JavaScript 文章标签： echarts javascript vscode

于 2022-03-22 23:34:43 首次发布

本文链接：https://blog.csdn.net/qq_53326467/article/details/123674541

版权

JavaScript 专栏收录该内容

8 篇文章 2 订阅

订阅专栏

echarts.js下载链接

提取码：qj3g

根据以下数据实现柱状图

柱状图数据
	男	女
自愿	2	3
微信推广	0	2
团购促销	1	2
节日活动	2	2

代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="echarts.js"></script>
</head>

<body>
    <div id="main" style="width: 800px; height: 400px"></div>
    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById("main"));
        var option = {
            title: {
                text: '会员入会渠道分布情况',
            },
            tooltip: {
                trigger: 'axis',
            },
            legend: {
                data: ['男', '女'],
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true },
                },
            },
            calculable: true,
            xAxis: [
                {
                    type: 'value', 
                    boundaryGap: [0, 0.01],
                },
            ],
            yAxis: [
                {
                    type: 'category',
                    data: ['自愿', '微信推广', '团购促销', '节日活动'],
                },
            ],
            series: [
                {
                    name: '男',
                    type: 'bar',
                    data: [2, 0, 1, 2],
                },
                {
                    name: '女',
                    type: 'bar',
                    data: [3, 2, 2, 2],
                },
            ],
        };

        myChart.setOption(option);
    </script>
</body>

</html>