【Apache ECharts】＜农作物病害发生防治面积＞

在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-ignoredata: ['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.datafor(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()}