实现
1. 设置 div （块级盒子）,设置 id 为 chart
<div id="chart"></div>2. css设置样式位置
<style>#main{width: 30%;height: 40vh;/* background-color: red; */min-height: 100px;min-width: 150px;margin-top: 150px;}body{background-image: url("img/地球.png");background-size: 100% 100vh;}#chart{width:30%;height:40vh;/* background-color: aquamarine; */margin-right: 50px;margin-left: 800px;min-height: 100px;min-width: 150px;}</style>3. 基于准备好的dom，初始化echarts实例
var Chart=echarts.init(document.getElementById('chart'));4. 指定图表的配置项和数据
4.1 对标题进行设置
题目，字体颜色
title:{text:'病虫害致粮食损失统计',textStyle:{color:'#fff'}},4.2 X轴
设置类目轴，坐标轴两边留白，轴线颜色为白色
xAxis: {type: 'category',boundaryGap: true,data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],axisLine:{lineStyle:{color:'#fff'}}},4.3 Y轴
Y轴名字，数值轴，轴线颜色为白色，分隔线隐藏
yAxis: {name:'损失（万吨）',type: 'value',axisLine:{show: true,lineStyle:{color:'#fff'}},splitLine:false},4.4 折线设置
折线节点数值，阴影颜色渐变（从0%到100%）
series:[{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',areaStyle: {color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0,color: '#090e2a'},{offset: 1,color: '#487d8f'}])}}],5. 使用刚指定的配置项和数据显示图表。
Chart.setOption(option2);6. 给整个窗口绑事件,只要窗口尺寸有变化，就触发。
window.onresize=function(){Chart.resize()}
