效果图
实现代码
const imglist = { "晴" : 'data:image/png;base64,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' , "小雨" : "data:image/png;base64,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" , "阴" : "data:image/png;base64,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" , "多云" : "data:image/png;base64,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"
} ;
const img = 'data:image/png;base64,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' ;
const maxTemp = [ "16.3" , "16.2" , "20.6" , "14.2" , "17.6" , "15.7" , "14.3" ] ;
const minTemp = [ "-5.4" , "-2.8" , "-3.5" , "-2.5" , "12.4" , "-1.2" , "-13" ] ; const weekday = [ "周一" , "周二" , "周三" , "周四" , "周五" , "周六" , "周日" ] ;
const daylist = [ "25日" , "26日" , "27日" , "28日" , "29日" , "30日" , "31日" ] ;
const weatherlist = [ "小雨" , "小雨" , "阴" , "小雨" , "多云" , "小雨" , "小雨" ] ;
let style = weatherlist. map ( ( i ) => { return { backgroundColor : { image : imglist[ i] } , height : 40 , width : 40 }
} ) ; let rich = { }
style. forEach ( ( i, index ) => { rich[ index] = i;
} ) ;
rich. b = { fontSize : 12 , lineHeight : 30 , height : 20
} ; option = { backgroundColor : "#fff" , title : { text : "7天天气预报" , left : "5%" , show : false } , tooltip : { trigger : "axis" , axisPointer : { type : "shadow" , shadowStyle : { color : "rgba(99,166,253,0.1)" } , shadowBlur : 10 } , formatter : function ( params ) { let str = weekday[ params[ 0 ] . dataIndex] + "," + params[ 0 ] . name + "<br />" ; params. forEach ( ( item, index ) => { console. log ( item) ; str += ` ${ item. marker} ${ item. seriesName} : ${ item. data} <br /> ` ; if ( index == params. length - 1 ) { str += ` ${ item. marker} 天气: ${ weatherlist[ item. dataIndex] } <br /> ` ; } } ) ; return str; } } , legend : { show : false } , grid : { show : true , backgroundColor : "transparent" , opacity : 0.3 , borderWidth : "0" , top : "20%" , bottom : "20%" } , toolbox : { show : false , right : "5%" , feature : { magicType : { type : [ "line" , "bar" , "stack" ] } , dataZoom : { yAxisIndex : "none" } , restore : { } , saveAsImage : { } } } , xAxis : [ { type : "category" , boundaryGap : false , position : "top" , offset : - 50 , zlevel : 100 , axisLine : { show : false } , axisTick : { show : false } , axisLabel : { interval : 0 , formatter : [ "{a|{value}}" ] . join ( "\n" ) , rich : { a : { fontSize : 18 } } } , nameTextStyle : { } , data : daylist} , { type : "category" , position : "bottom" , offset : - 50 , boundaryGap : false , zlevel : 100 , axisLine : { show : false } , axisTick : { show : false } , axisLabel : { interval : 0 , formatter : [ "{a|{value}}" ] . join ( "\n" ) , rich : { a : { fontSize : 14 } } } , nameTextStyle : { fontWeight : "bold" , fontSize : 19 } , data : weekday} , { type : "category" , boundaryGap : false , position : "top" , offset : - 120 , zlevel : 100 , axisLine : { show : false } , axisTick : { show : false } , axisLabel : { interval : 0 , formatter : function ( value, index ) { return "{k|}\n{" + index + "| }\n{b|" + value + "}" ; } , rich} , nameTextStyle : { fontWeight : "bold" , fontSize : 19 } , data : weatherlist} ] , yAxis : { show : false , type : "value" , axisLabel : { formatter : "{value}" + "℃" } , max : function ( value ) { return value. max + 20 ; } , min : function ( value ) { return value. min - 20 ; } } , series : [ { name : "最高温度" , type : "line" , data : maxTemp, symbol : "emptyCircle" , symbolSize : 10 , showSymbol : true , smooth : true , } , { name : "最低温度" , type : "line" , data : minTemp, symbol : "emptyCircle" , symbolSize : 10 , showSymbol : true , smooth : true , } ]
}