柱形图效果图引入Echarts:npmIlcdnl githup 在页面上提供一个显示图表的区域初始化echarts

效果图

引入Echarts:npmIlcdnl githup
在页面上提供一个显示图表的区域
```
  <div id="Echart"></div>
```

初始化echarts的实例

  var  myChart = document.getElementById('Echart');
          var  echarts = echarts.init(myChart);

重点:指定图表的配置项和数据
将第四步的配置设置到第三步的实例当中
```
echarts.setOption(option);
```

代码：

   <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>柱状图</title>
        <script src="../echarts/echarts.js"></script>
        <style>
            #Echart{

                width: 500px;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div id="Echart"></div>
        <script>
            var  myChart = document.getElementById('Echart');
            var  echarts = echarts.init(myChart);
            var option = {
                title:{
                    text:'柱状图示例'
                },
                tooltip:{

                },
                xAxis:{
                    type:'category',
                    data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
                },
                yAxis:{

                },
                series:[{
                    color:'brown',
                    data:[24,53,67,37,82,93,61],
                    type:'bar'
                }]
            }
            echarts.setOption(option);
        </script>
    </body>
<html>