用Echarts绘制柱状图（详解版）

一、导入Echarts.js文件
1、在编写前我们需要用到Echarts.js文件导入
这里直接给你们提供网盘

链接：https://pan.baidu.com/s/1OmNWBTHuuxPZfo-QE7b0ng 
提取码：efde

2、 然后在当目录下新建 scc和js，image文件夹

3、把下载好的.js文件放入到js目录下

4、在同一目录下新建html文件

 

然后命名为柱状图.html的文件（文件后缀为.html）。

二、柱状图的演练

1、引入ECharts脚本

<script src ="js/echarts.js" ></script>

2、为ECharts准备一个具备大小（宽高）的DOM

 <div id="main" style="width: 900px; height: 600px"></div>

3、基于准备好的DOM，初始化ECharts图表，结构要弄清楚哦

 var myChart = echarts.init(document.getElementById("main"));

4、指定图表的配置项和数据
         //指定图表的配置项和数据
        var option ={
            title:{
                backgroundColor:'yellow', //设置标题的背景颜色
                text:'这里是绘制的图表的标题',
                subtext:'这里是副标题'
            },
            legend:{
                data:['销量']
            },
            xAxis: { // x的坐标轴
                data: ['红枣', '草莓', '柠檬', '香蕉', '车厘子', '雪梨'] //数据
                        },
                yAxis: {
                    type:'value'
                }, //y的坐标轴
            series: [{
                name:'销量',
                data: [5, 12, 18, 10, 15, 9],
                type: 'bar' //柱状图
            }]

主要分为三块，标题和x轴，y轴

5、最后使用刚指定的配置项和数据

1. //使用刚指定的配置项和数据显示图表

2. myChart.setOption(option);

6、然后启动html文件

右击启动

图形展示