实现
1. 设置 div (块级盒子),设置 id 为 chart
html
<div id="chart"></div>
2. css设置样式位置
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实例
javascript
var Chart=echarts.init(document.getElementById('chart'));
4. 指定图表的配置项和数据
4.1 对标题进行设置
题目,字体颜色
javascript
title:{
text:'病虫害致粮食损失统计',
textStyle:{
color:'#fff'
}
},
4.2 X轴
设置类目轴,坐标轴两边留白,轴线颜色为白色
javascript
xAxis: {
type: 'category',
boundaryGap: true,
data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
axisLine:{
lineStyle:{
color:'#fff'
}
}
},
4.3 Y轴
Y轴名字,数值轴,轴线颜色为白色,分隔线隐藏
javascript
yAxis: {
name:'损失(万吨)',
type: 'value',
axisLine:{
show: true,
lineStyle:{
color:'#fff'
}
},
splitLine:false
},
4.4 折线设置
折线节点数值,阴影颜色渐变(从0%到100%)
javascript
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'
}
])
}
}
],
- 使用刚指定的配置项和数据显示图表。
javascript
Chart.setOption(option2);
- 给整个窗口绑事件,只要窗口尺寸有变化,就触发。
javascript
window.onresize=function(){
Chart.resize()
}