const highTemperatureColor = new echarts.graphic.LinearGradient(0, 0, 0, 0.5, [
{
offset: 0,
color: 'rgba(253, 153, 1, 0.5)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(248, 251, 255, 0)', // 100% 处的颜色
},
]);
const lowTemperatureColor = new echarts.graphic.LinearGradient(0, 0, 0, 0.5, [
{
offset: 0,
color: 'rgba(0, 178, 255, 0.5)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(248, 251, 255, 0)', // 100% 处的颜色
},
]);
option = {
backgroundColor: 'rgba(30, 53, 87, 0.5)',
grid: {
show: true,
backgroundColor: 'transparent',
opacity: 0.3,
borderWidth: '0',
top: '180',
bottom: '0',
left: '30',
right: '30'
},
tooltip: {
trigger: 'item',
},
legend: {
show: false,
},
xAxis: [
// 日期
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 110,
zlevel: 100,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
formatter: ['{a|{value}}'].join('\n'),
rich: {
a: {
color: '#FFFFFF',
fontSize: 12,
},
},
},
nameTextStyle: {},
data: ['现在', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
},
// 天气图标
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 32,
zlevel: 100,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
formatter: function (value, index) {
return '{' + index + '| }\n{b|' + '}';
},
rich: {
0: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png',
},
height: 40,
width: 40,
},
1: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png',
},
height: 40,
width: 40,
},
2: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
image: 'https://d.scggqx.com/forecast/img/阴.png',
},
height: 40,
width: 40,
},
3: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png',
},
height: 40,
width: 40,
},
4: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
image: 'https://d.scggqx.com/forecast/img/多云.png',
},
height: 40,
width: 40,
},
5: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png',
},
height: 40,
width: 40,
},
6: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png',
},
height: 40,
width: 40,
},
b: {
// color: 'white',
fontSize: 12,
lineHeight: 30,
height: 20,
},
},
},
nameTextStyle: {
fontWeight: 'bold',
fontSize: 19,
},
// data: this.weatherdata.weather
data: ['小雨', '小雨', '阴', '小雨', '多云', '小雨', '小雨'],
},
// 温度
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 40,
zlevel: 100,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
textStyle: {
color: '#FFFFFF'
}
},
data: [ '16℃','16℃','16℃','16℃','16℃','16℃','16℃',] ,
},
// 风力
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: -600,
zlevel: 100,
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
formatter: ['{a|{value}}'].join('\n'),
rich: {
a: {
color: 'white',
fontSize: 12,
},
},
},
data: ['风力二级', '风力二级', '风力二级', '风力二级', '风力二级', '风力二级', '风力二级'],
},
// gap: '100',
],
yAxis: {
type: 'value',
show: false,
axisLabel: {
formatter: '{value} °C',
color: 'white',
},
},
series: [
{
name: '最高气温',
type: 'line',
data: ["16.3","16.2","17.6","14.2","17.6","15.7","14.3"],
symbol: 'circle',
symbolSize: 6,
showSymbol: true,
smooth: true,
itemStyle: {
normal: {
color: '#FD9901',
}
},
label: {
show: true,
position: 'top',
color: '#FD9901',
formatter: '{c} °C'
},
lineStyle: {
width: 1,
// color: 'white'
},
areaStyle: {
// opacity: 1,
color: highTemperatureColor,
}
},
{
name: '最低气温',
type: 'line',
data: ["13.4","12.8","13.5","12.5","12.4","13.2","13"],
symbol: 'circle',
symbolSize: 6,
showSymbol: true,
smooth: true,
itemStyle: {
normal: {
color: '#1298E7'
}
},
label: {
show: true,
position: 'bottom',
color: '#1298E7',
formatter: '{c} °C'
},
lineStyle: {
width: 1,
// color: 'white'
},
areaStyle: {
opacity: 1,
color: lowTemperatureColor
}
}
],
};