在vs Code里打开，

---

实现

1. 首先引入 echarts.min.js 资源

2. 在body部分设一个 div，设置 id 为 main

3. 设置 script

        3.1 基于准备好的dom，初始化echarts实例

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

        3.2  指定图表的配置项和数据

             

---

           3.2.1 对标题进行设置   （标题，字体颜色）

 title: {
                text: '农作物病害发生防治面积',
                textstyle:{
                    color:'#fff'
                }
            },

           

---

    3.2.2 提示框组件（提示框颜色，字体颜色）

 tooltip: {
                trigger: 'axis',
                axisPointer:{
                    type:'shadow'
                },
            backgroundColor:'rdba(0,0,0,0.6)',
            borderColor:'rgba(0,120,212,0.5)',
            textStyle:{
                color:'#fff'
            }
        },

                 

---

3.2.3 图例组件（组件纵向对齐）

legend: {
            data: ['发生面积', '防治面积'],
            right:'3%',
            orient:'vertical',//布局朝向  'vertical'纵向
            textStyle:{
                color:'#fff'
            }
        },

             

---

  3.2.4 显示拖拽用的手柄

 calculable: true,

           

---

     3.2.5 X轴：

                        设置类目轴，坐标轴轴线颜色设置白色

xAxis: [
            {
            type: 'category',//类目轴
            // prettier-ignore
            data: ['2017','2018','2019','2020','2021','2022','2023'],
            axisLine:{
                lineStyle:{
                    color:'#fff'
                }
            }
            }
        ],

         

---

      3.2.6 Y轴：

                        设置名字 ，数值轴，轴线颜色，分隔线不显示隐藏

yAxis: [
            {
                name:'面积（亿亩）',
                type: 'value',
                axisLine:{
                    show: true,
                    lineStyle:{
                        color:'#fff'
                    }
                },
                splitLine:false

            }
        ],

         

---

      3.2.7 设置柱状图：

                name:

                系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。

                对应数据data：

series: [
            {
            name: '发生面积',
            type: 'bar',//这是个柱状图
            data: happen,
            
            },
            {
            name: '防治面积',
            type: 'bar',
            data: treat,
            
            }
        ],

    这里 happen,treat 我设置在json文件里，

json文件内容如示：

{
    "code":"1",
    "msg":"查找成功",
    "data":[{
        "id":1,
        "year":2017,
        "happen":24,
        "treat":21
    },{
        "id":1,
        "year":2018,
        "happen":54,
        "treat":50
    },{
        "id":1,
        "year":2019,
        "happen":64,
        "treat":60
    },{
        "id":1,
        "year":2020,
        "happen":54,
        "treat":50
    },{
        "id":1,
        "year":2021,
        "happen":68,
        "treat":61
    },{
        "id":1,
        "year":2022,
        "happen":43,
        "treat":40
    },{
        "id":1,
        "year":2023,
        "happen":35,
        "treat":30
    }]
}

引入json资源： 

 var year=[]
        var happen=[]
        var treat=[]
        $.ajax({
            url:"json/echarts.json",
            type:"get",
            async:false,//同步
            success:function(value){
                var arr=value.data
                for(var i=0;i<arr.length;i++){
                    year.push(arr[i].year)
                    happen.push(arr[i].happen)
                    treat.push(arr[i].treat)
                   
                }
                
            },
            error:function(){
                alert("出错了")
            }
        })

要用到 $.ajax 语句，引入 jquery.js格式

                设置两个柱状条的颜色：

 color:['rgb(73,146,255)','rgb(124,255,178)'],

           

---

    3.2.8 坐标轴区域设置

grid: 包含坐标轴

grid:{
            left:'5%',
            right:'5%',
            bottom:'5%',
            containLabel:true //包含坐标轴
        }

---

3.3 使用刚指定的配置项和数据显示图表。

myChart.setOption(option);

3.4 给整个窗口绑事件,只要窗口尺寸有变化，就触发

window.onresize=function(){
            myChart.resize()
            
        }