效果
这个折线图的背景是一张自定义的图片（并非在echart外的盒子设置背景图）：位置，开头定义图片然后在options的backgroundColor引用定义好的背景图片，
x轴的也是图片+文字：位置在，xAxis.axisLabel.formatter设置x轴显示格式，然后在xAxis.axisLabel.rich定义坐标轴用到的所有图片
直接上代码，先上车，有空再解释
getEchartData1() {
//背景图，先定义一个图片，这个就是你要设置的背景图
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返回的类目项
var maxLength = 5;//每项显示文字个数
var valLength = value.length;//X轴类目项的文字个数
var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
if (rowN > 1)//如果类目项的文字大于3,
{
var tmp = value.substring(0,8);
for (var i = 0; i < rowN; i++) {
var temp = "";//每次截取的字符串
var start = i * maxLength;//开始截取的位置
var end = start + maxLength;//结束截取的位置
//这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
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=='扬沙.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=='夜晚扬沙.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
},
//比较麻烦，要给每一张图片都要加一个定义
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/扬沙.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/夜晚扬沙.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', //改变折线点的颜色
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', //改变折线点的颜色
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);
}
}
