Echarts实践：实现⼀个未来七天天⽓预报，图表轮播效果及
插⼊svg或img图标
七天效果图
轮播效果图
轮播效果实现
<el-button class="button" icon="el-icon-arrow-left" @click="backChart"></el-button>
<v-chart :options="echartsOption" ref="rainChart" autoresize />
<el-button class="button" icon="el-icon-arrow-right" @click="goChart"></el-button>
通过echarts配置项，设置数据缩放，并将缩放条隐藏
echartsOption: {
dataZoom: {
show: false,
startValue: 0,
endValue: 6
},
}
endValue: 6,
}
当点击轮播按钮时，通过修改data中的轮播索引，来调整缩放数据的区域从⽽实现数据滚动的效果
goChart() {
this.startValue++
if (dValue > this.chartData.length - 1) {
this.startValue = this.chartData.length - 7
} else if (this.startValue < 1) {
this.startValue = 0
}
this.$nextTick(() => {
this.init()
})
},
backChart() {
this.startValue--
if (this.startValue < 1) {
this.startValue = 0
}
this.$nextTick(() => {
this.init()
})
},
插⼊svg图标或img图⽚
这⾥我使⽤的时和风天⽓的图标，下载到本地的svg
想要插⼊多个本地图标这⾥只能通过rich的⽅式去引⼊，但是因为我的这⾥的图标是动态的因此不能提前声明
label: {
normal: {
show: true,
//预留rich对象
rich: {},
formatter: function(param) {
var res = ''
res += `{img${param.data.icon}|}` + '\n ' + (length > 1 ? : ' ' + ) + '\n' + param.value + '°C'                  return res
},
}
}
}
]
我们通过接⼝返回的icon数值去设置不同的img名称
color: '#1890ff',
backgroundColor: {
image: require(`../../assets/icons/${this.chartData[i].icon}.svg`)
},
width: 40,
align: 'center',
height: 40
}
重点！！因为data正常为数组，因此不能在formater中识别icon内容，这⾥我们通过对象的形式传⼊，value默认为data渲染的值
series.push({ value: this.chartData[i].temp, text: this.chartData[i].text, icon: this.chartData[i].icon })
这样，我们可以通过param的data对象来获取我们传⼊的想要的数据值，使echarts数据使⽤更灵活
formatter: function(param) {
var res = ''
res += `{img${param.data.icon}|}` + '\n ' + (length > 1 ? : ' ' + ) + '\n' + param.value + '°C'                  return res
},
未来七天效果
未来七天的实现重点在于顶部的图标和内容信息如何实现
这⾥我通过声明⼀个空的柱状图，并将他的提⽰内容向上偏移了-450像素，从⽽让⽂字达到图表顶端
{
type: 'bar',
name: '柱状图',
label: {
normal: {
align: 'center',
color: '#fff',
// 偏移柱状图
offset: [0, -450],
show: true,
rich: {}，
textStyle: {
fontSize: '18'
}
}
},
但是柱状图会始终存在，我偷了个懒将柱状图设置为背景⾊从⽽隐藏柱状图的显⽰
itemStyle: {
normal: {
color: '#246EAD'
}
}
最后仍然通过修改rich和传⼊data对象，来实现顶部信息的格式化
for (let i = 0; i < this.chartData.length; i++) {
series0.push(this.chartData[i].tempMax)
series1.push(this.chartData[i].tempMin)
// xAxis.push(moment( this.chartData[i].tm).format('HH:mm'))
xAxis.push(this.chartData[i].fxDate)
bar.push({ value: 9, textDay: this.chartData[i].textDay, iconDay: this.chartData[i].iconDay, fxDate: this.chartData[i].fxDate })
color: '#1890ff',
align: 'center',
backgroundColor: {
image: require(`../../assets/icons/${this.chartData[i].iconDay}.svg`)
},
width: 40,
height: 40
}
max.push(this.chartData[i]['tempMax'])
min.push(this.chartData[i]['tempMin'])
}
注意保证Y轴长度始终固定，防⽌图表变形或偏移
if (hartsOption.yAxis.max - hartsOption.yAxis.min != 50) {
最后添加今天明天的判断实现最终效果
formatter: function(param) {
var res = ''
var weekDay = ['周⼀', '周⼆', '周三', '周四', '周五', '周六', '周⽇']
var myDate = new Date(Date.parse(param.data.fxDate))
if (param.dataIndex === 0) {
res += '今天' + '\n' + param.data.fxDate + '\n' + '\n' + `{img${param.data.iconDay}|}` + '\n' + Day
} else if (param.dataIndex === 1) {
res += '明天' + '\n' + param.data.fxDate + '\n' + '\n' + `{img${param.data.iconDay}|}` + '\n' + Day
} else {
res += Day()] + '\n' + param.data.fxDate + '\n' + '\n' + `{img${param.data.iconDay}|}` + '\n' + Day                  }
svg图
return res
},

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。