天气曲线echarts

 

1. 用多x轴实现日期，图标，控制定位固定显示高度

2.背景遮罩抛开echarts另外用div

3.设置grid的offset控制温度折线的范围

html

  <div class="right_bottom"><basicEchartsstyle="height: 400px; width: 1200px":option="chartOptions":key="chartUpdate"/><divclass="test"v-for="(item, index) in gridArr":key="index":style="{ left: item.left }"></div></div>

 遮罩层left值数组

let gridArr = [{"left": "26px"},{"left": "104px"},{"left": "182px"},{"left": "260px"},{"left": "338px"},{"left": "416px"},{"left": "494px"},{"left": "572px"},{"left": "650px"},{"left": "728px"},{"left": "806px"},{"left": "884px"},{"left": "962px"},{"left": "1040px"},{"left": "1118px"}
]

css

.test {height: 350px;width: 70px;background-color: rgba(69, 89, 114, 0.5);position: absolute;top: 50px;left: 38px;
}

echarts的options

{"color": ["#fff","#fff"],"title": {"text": "未来15日天气","textStyle": {"color": "#fff"}},"grid": {"left": "5%","right": "4%","bottom": 0,"top": 240},"tooltip": {"trigger": "axis"},"legend": {"show": false},"xAxis": [{"type": "category","boundaryGap": false,"position": "top","offset": 160,"zlevel": 100,"axisLine": {"show": false},"axisTick": {"show": false},"axisLabel": {"interval": 0,"color": "rgba(255, 255, 255, 1)","formatter": "{a|{value}}","rich": {"a": {"fontSize": 14}}},"nameTextStyle": {"fontWeight": "bold","fontSize": 19},"data": ["周四","周五","周六","周日","周一","周二","周三","周四","周五","周六","周日","周一","周二","周三","周四"]},{"type": "category","boundaryGap": false,"position": "top","offset": 120,"zlevel": 100,"axisLine": {"show": false},"axisTick": {"show": false},"axisLabel": {"interval": 0,"color": "rgba(255, 255, 255, 1)","formatter": "{a|{value}}","rich": {"a": {"fontSize": 18}}},"nameTextStyle": {},"data": ["08/01","08/02","08/03","08/04","08/05","08/06","08/07","08/08","08/09","08/10","08/11","08/12","08/13","08/14","08/15"]},{"type": "category","boundaryGap": false,"position": "top","offset": 40,"zlevel": 100,"axisLine": {"show": false},"axisTick": {"show": false},"axisLabel": {"color": "rgba(255, 255, 255, 1)","interval": 0,"rich": [{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40},{"backgroundColor": {"image": "/images/weather/W1.png"},"height": 40,"width": 40}]},"nameTextStyle": {"fontWeight": "bold","fontSize": 19},"data": ["小雨","小雨","小雨","多云","中雨","小雨","小雨","小雨","小雨","小雨","小雨","小雨","小雨","小雨","小雨"]}],"yAxis": {"type": "value","show": false,"axisLabel": {"formatter": "{value} °C","color": "white"}},"series": [{"name": "最高气温","type": "line","data": ["31","31","32","32","30","29","27","28","29","32","32","30","32","33","33"],"symbol": "emptyCircle","symbolSize": 10,"showSymbol": true,"smooth": true,"itemStyle": {"normal": {}},"label": {"show": true,"position": "top","formatter": "{c} °C"},"lineStyle": {"width": 1},"areaStyle": {"opacity": 1,"color": "transparent"}},{"name": "最低气温","type": "line","data": ["23","22","24","23","22","22","19","20","20","21","21","21","19","21","21"],"symbol": "emptyCircle","symbolSize": 10,"showSymbol": true,"smooth": true,"itemStyle": {"normal": {}},"label": {"show": true,"position": "bottom","formatter": "{c} °C"},"lineStyle": {"width": 1},"areaStyle": {"opacity": 1,"color": "transparent"}}]
}