Echarts柱形图首先需要引入 echarts地址： http://juejin.cn/user/4312763955

首先需要引入

1、引入Echarts:npmIlcdnl githup

2、在页面上提供一个显示图表的区域 3、初始化echarts的实例

4、重点:指定图表的配置项和数据

5、将第四步的配置设置到第三步的实例当中

运行代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>柱形图2</title>
    <script src="../echarts/echarts.js"></script>
    <style>
        #ec{
            width: 50%;
            height: 300px;
        }
        #ld{
            padding: 5px;
            margin: 5px;
        }
    </style>

</head>
<body>
    <div id="ld">LOGO</div>
    <div id="ec"></div>
    <script>
        var bos=document.getElementById('ec')
        var echarts=echarts.init(bos,'dark')
        var option={
            title:{
               text:'柱形图',
               left:'center'
            },
            tooltip: {
                trigger:'axis',
                axisPointer:{
                    type:'shadow'
                }
            },
            xAxis:{
                type:'category',
                data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
            },
            yAxis:{},
            series:[
                {name:'销量',
                type:'bar',
                data:[5, 20, 36, 10, 10, 20,50]
            },
                {
                    name:'销量',
                    type:'bar',
                    data:[3,50,30,20,10,30,20,37]
                }
            ]
        }
        window.addEventListener('resize', function() {
              echarts.resize();
        });
        echarts.setOption(option)
    </script>
</body>

效果图：