效果
這個(gè)折線圖的背景是一張自定義的圖片（并非在echart外的盒子設(shè)置背景圖）：位置，開(kāi)頭定義圖片然后在options的backgroundColor引用定義好的背景圖片，
x軸的也是圖片+文字：位置在戳护，xAxis.axisLabel.formatter設(shè)置x軸顯示格式匹颤，然后在xAxis.axisLabel.rich定義坐標(biāo)軸用到的所有圖片
直接上代碼楚堤，先上車或油，有空再解釋
getEchartData1() {
//背景圖族操，先定義一個(gè)圖片锐峭，這個(gè)就是你要設(shè)置的背景圖
var img = new Image();
img.src = '../../../static/img/tendaybg.png';
// img.width = '300px';
// img.height="500px";
// img.height ='100%';
//顯示容器
// this.open=true;
// 加載圖表
const chart1 = this.$refs.chart1;
if (chart1) {
const myChart = this.$echarts.init(document.getElementById("chart-part1"));
const option = {
//引用背景圖片
backgroundColor: {
image:img,
repeat:'no-repeat'
},
grid:{
y:'45%'
},
tooltip: {
show:false,
trigger: 'axis',
formatter: function (data) {
return (
data[0].name.substring(0,8)+"<br/>"+
"<p style='color:#c23531;border-radius:50%;width:10px;height:10px;'></p>最高溫："+data[0].data+"℃<br/>"+
"最低溫："+data[1].data+"℃"
)
}
},
xAxis: {
type: 'category',
show:true,
boundaryGap: false,
position:"top",
data:this.chartDate,
nameGap:10,
axisLine:{
lineStyle:{
// color:'#fff',
},
show:false
},
axisTick:{
show:false
},
axisLabel: {
textStyle: {
fontSize: 20,
color: '#fff',
shadowColor:"#666",
shadowBlur:1,
// shadowOffsetX:20
// show:false
},
interval: 0,
formatter:function(value){
var ret = "";//拼接加\n返回的類目項(xiàng)
var maxLength = 5;//每項(xiàng)顯示文字個(gè)數(shù)
var valLength = value.length;//X軸類目項(xiàng)的文字個(gè)數(shù)
var rowN = Math.ceil(valLength / maxLength); //類目項(xiàng)需要換行的行數(shù)
if (rowN > 1)//如果類目項(xiàng)的文字大于3,
{
var tmp = value.substring(0,8);
for (var i = 0; i < rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//開(kāi)始截取的位置
var end = start + maxLength;//結(jié)束截取的位置
//這里也可以加一個(gè)是否是最后一行的判斷停忿，但是不加也沒(méi)有影響驾讲，那就不加吧
temp = tmp.substring(start, end) + "\n";
ret += temp; //憑借最終的字符串
}
ret=ret.substring(0,10);
// console.log(ret);
value=value.substring(30);
// console.log(value);
if(value=='晴.png'){
return '{a|'+ret+'}{img1|}';
}else if(value=='暴雨.png'){
return '{a|'+ret+'}{img2|}';
}else if(value=='大暴雨.png'){
return '{a|'+ret+'}{img3|}';
}else if(value=='多云.png'){
return '{a|'+ret+'}{img4|}';
}else if(value=='浮塵.png'){
return '{a|'+ret+'}{img5|}';
}else if(value=='雷陣雨.png'){
return '{a|'+ret+'}{img6|}';
}else if(value=='雷陣雨伴有冰雹.png'){
return '{a|'+ret+'}{img7|}';
}else if(value=='特大暴雨.png'){
return '{a|'+ret+'}{img8|}';
}else if(value=='霧.png'){
return '{a|'+ret+'}{img9|}';
}else if(value=='霧霾.png'){
return '{a|'+ret+'}{img10|}';
}else if(value=='小雨.png'){
return '{a|'+ret+'}{img11|}';
}else if(value=='小雨伴有冰雹.png'){
return '{a|'+ret+'}{img12|}';
}else if(value=='陰.png'){
return '{a|'+ret+'}{img13|}';
}else if(value=='陣雨.png'){
return '{a|'+ret+'}{img14|}';
}else if(value=='中雨.png'){
return '{a|'+ret+'}{img15|}';
}else if(value=='大雨.png'){
return '{a|'+ret+'}{img16|}';
}else if(value=='暴雪.png'){
return '{a|'+ret+'}{img17|}';
}else if(value=='大雪.png'){
return '{a|'+ret+'}{img18|}';
}else if(value=='凍雨.png'){
return '{a|'+ret+'}{img19|}';
}else if(value=='雷陣雪.png'){
return '{a|'+ret+'}{img20|}';
}else if(value=='沙塵暴.png'){
return '{a|'+ret+'}{img21|}';
}else if(value=='小雪.png'){
return '{a|'+ret+'}{img22|}';
}else if(value=='揚(yáng)沙.png'){
return '{a|'+ret+'}{img23|}';
}else if(value=='夜晚多云.png'){
return '{a|'+ret+'}{img24|}';
}else if(value=='夜晚晴.png'){
return '{a|'+ret+'}{img25|}';
}else if(value=='夜晚沙塵暴.png'){
return '{a|'+ret+'}{img26|}';
}else if(value=='夜晚霧.png'){
return '{a|'+ret+'}{img27|}';
}else if(value=='夜晚?yè)P(yáng)沙.png'){
return '{a|'+ret+'}{img28|}';
}else if(value=='夜晚陣雪.png'){
return '{a|'+ret+'}{img29|}';
}else if(value=='夜晚陣雨.png'){
return '{a|'+ret+'}{img30|}';
}else if(value=='雨夾雪.png'){
return '{a|'+ret+'}{img31|}';
}else if(value=='陣雪.png'){
return '{a|'+ret+'}{img32|}';
}else if(value=='中雪.png'){
return '{a|'+ret+'}{img33|}';
}else{
return '{a|'+ret+'}';
}
}
else {
console.log(value);
return '{a|'+value+'}{img1|}';
}
},
rich:{
a:{
fontSize: 14,
lineHeight: 20
},
//比較麻煩，要給每一張圖片都要加一個(gè)定義
img1: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/晴.png'
},
height:32,
// width:35
//處理圖片的寬高
},
img2: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/暴雨.png'
},
height:32,
// width:35
},
img3: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/大暴雨.png'
},
height:32,
// width:35
},
img4: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/多云.png'
},
height:32,
// width:35
},
img5: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/浮塵.png'
},
height:32,
// width:35
},
img6: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/雷陣雨.png'
},
height:32,
// width:35
},
img7: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/雷陣雨伴有冰雹.png'
},
height:32,
// width:35
},
img8: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/特大暴雨.png'
},
height:32,
// width:35
},
img9: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/霧.png'
},
height:32,
// width:35
},
img10: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/霧靄.png'
},
height:32,
// width:35
},
img11: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/小雨.png'
},
height:32,
// width:35
},
img12: {
//引入圖片
backgroundColor: {
image: './static/img/colorIcon/小雨伴有冰雹.png'
},
height:32,
// width:35
},
img13: {
backgroundColor: {
image: './static/img/colorIcon/陰.png'
},
height:32,
// width:38
},
img14: {
backgroundColor: {
image: './static/img/colorIcon/陣雨.png'
},
height:32,
// width:35
},
img15: {
backgroundColor: {
image: './static/img/colorIcon/中雨.png'
},
height:32,
// width:35
},
img16: {
backgroundColor: {
image: './static/img/colorIcon/大雨.png'
},
height:32,
// width:35
},
img17: {
backgroundColor: {
image: './static/img/colorIcon/暴雪.png'
},
height:32,
// width:35
},
img18: {
backgroundColor: {
image: './static/img/colorIcon/大雪.png'
},
height:32,
// width:35
},
img19: {
backgroundColor: {
image: './static/img/colorIcon/凍雨.png'
},
height:32,
// width:35
},
img20: {
backgroundColor: {
image: './static/img/colorIcon/雷陣雪.png'
},
height:32,
// width:35
},
img21: {
backgroundColor: {
image: './static/img/colorIcon/沙塵暴.png'
},
height:32,
// width:35
},
img22: {
backgroundColor: {
image: './static/img/colorIcon/小雪.png'
},
height:32,
// width:35
},
img23: {
backgroundColor: {
image: './static/img/colorIcon/揚(yáng)沙.png'
},
height:32,
// width:35
},
img24: {
backgroundColor: {
image: './static/img/colorIcon/夜晚多云.png'
},
height:32,
// width:35
},
img25: {
backgroundColor: {
image: './static/img/colorIcon/夜晚晴.png'
},
height:32,
// width:35
},
img26: {
backgroundColor: {
image: './static/img/colorIcon/夜晚沙塵暴.png'
},
height:32,
// width:35
},
img27: {
backgroundColor: {
image: './static/img/colorIcon/夜晚霧.png'
},
height:32,
// width:35
},
img28: {
backgroundColor: {
image: './static/img/colorIcon/夜晚?yè)P(yáng)沙.png'
},
height:32,
// width:35
},
img29: {
backgroundColor: {
image: './static/img/colorIcon/夜晚陣雪.png'
},
height:32,
// width:35
},
img30: {
backgroundColor: {
image: './static/img/colorIcon/夜晚陣雨.png'
},
height:32,
// width:35
},
img31: {
backgroundColor: {
image: './static/img/colorIcon/雨夾雪.png'
},
height:32,
// width:35
},
img32: {
backgroundColor: {
image: './static/img/colorIcon/陣雪.png'
},
height:32,
// width:35
},
img33: {
backgroundColor: {
image: './static/img/colorIcon/中雪.png'
},
height:32,
// width:35
},
}
}
},
yAxis: {
type: 'value',
name:"氣溫",
show:false,
axisLabel: {
formatter: '{value} °C',
show:false
},
axisLine:{
show:false
},
axisTick:{
show:false
},
},
series: [{
name:'最高氣溫',
type:'line',
data:this.maxTemp,
animation: false,
// legendHoverLink:true,
smooth: false,
itemStyle: {
color: '#000',
normal: {
color: '#ff0000', //改變折線點(diǎn)的顏色
borderColor:"#c26767",
borderType:"solid",
borderWidth:1,
shadowColor: '#fff',
shadowBlur: 5,
lineStyle: {
color: '#ff0000', //改變折線顏色
borderWidth:2,
shadowBlur: 2,
shadowColor: '#6f0000',
opacity:0.92,
shadowOffsetX: 0,
shadowOffsetY: 1
},
label:{show:true,fontSize:14,color:"#fff"}
}
}
},
{
name:'最低氣溫',
type:'line',
animation: false,
smooth: false,
data:this.minTemp,
itemStyle: {
normal: {
color: '#00ff42', //改變折線點(diǎn)的顏色
borderColor:"#00ff42",
borderType:"solid",
borderWidth:1,
shadowColor: '#fff',
shadowBlur: 5,
lineStyle: {
color: '#00ff42', //改變折線顏色
borderWidth:2,
shadowBlur: 2,
shadowColor: '#000000',
shadowOffsetX: 0,
shadowOffsetY: 1
},
label:{show:true,fontSize:14,color:"#fff"}
}
}
}]
};
myChart.setOption(option);
//將echart截圖并且生成base64格式
var picInfo = myChart.getDataURL();
this.dataURL=picInfo;
this.$nextTick(()=>{
setTimeout(()=>{
this.toImage();
},1000);
});
window.addEventListener("resize", function() {
myChart.resize();
});
// this.downloadImpByChart("chart-part1",img);
}
}
