Echarts实践：实现一个未来七天天气预报，图表轮播效果及插入svg或img图标

七天效果图

轮播效果图

轮播效果实现

   <el-button class="button" icon="el-icon-arrow-left" @click="backChart"></el-button><v-chart :options="echartsOption" ref="rainChart" autoresize style="width:90%;" /><el-button class="button" icon="el-icon-arrow-right" @click="goChart"></el-button>

通过echarts配置项，设置数据缩放，并将缩放条隐藏

    echartsOption: {dataZoom: {show: false,startValue: 0,endValue: 6},}

 data() {return {chartData: [],startValue: 0,endValue: 6,}

当点击轮播按钮时，通过修改data中的轮播索引，来调整缩放数据的区域从而实现数据滚动的效果

 goChart() {this.startValue++this.endValue++if (this.endValue > this.chartData.length - 1) {this.startValue = this.chartData.length - 7this.endValue = this.chartData.length - 1} else if (this.startValue < 1) {this.startValue = 0this.endValue = 6}this.$nextTick(() => {this.init()})},backChart() {this.startValue--this.endValue--if (this.startValue < 1) {this.startValue = 0this.endValue = 6}this.$nextTick(() => {this.init()})},

插入svg图标或img图片

这里我使用的时和风天气的图标，下载到本地的svg
想要插入多个本地图标这里只能通过rich的方式去引入，但是因为我的这里的图标是动态的因此不能提前声明

   series: [{data: [],type: 'line',label: {normal: {show: true,//预留rich对象rich: {},formatter: function(param) {var res = ''res += `{img${param.data.icon}|}` + '\n ' + (param.data.text.length > 1 ? param.data.text : ' ' + param.data.text) + '\n' + param.value + '°C'return res},}}}]

我们通过接口返回的icon数值去设置不同的img名称

  this.echartsOption.series[0].label.normal.rich[`img${this.chartData[i].icon}`] = {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 ' + (param.data.text.length > 1 ? param.data.text : ' ' + param.data.text) + '\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 })this.echartsOption.series[2].label.normal.rich[`img${this.chartData[i].iconDay}`] = {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轴长度始终固定，防止图表变形或偏移

  this.echartsOption.yAxis.max = Math.max(...max)this.echartsOption.yAxis.min = Math.min(...min)if (this.echartsOption.yAxis.max - this.echartsOption.yAxis.min != 50) {this.echartsOption.yAxis.max = (50 - (this.echartsOption.yAxis.max - this.echartsOption.yAxis.min)) + this.echartsOption.yAxis.max}

最后添加今天明天的判断实现最终效果

  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' + param.data.textDay} else if (param.dataIndex === 1) {res += '明天' + '\n' + param.data.fxDate + '\n' + '\n' + `{img${param.data.iconDay}|}` + '\n' + param.data.textDay} else {res += weekDay[myDate.getDay()] + '\n' + param.data.fxDate + '\n' + '\n' + `{img${param.data.iconDay}|}` + '\n' + param.data.textDay}return res},

Echarts实践：实现一个未来七天天气预报，图表轮播效果及插入svg或img图标相关推荐

利用 Python 得到未来七天天气预报
因为自己平时都不看手机上的天气 app,因此都是出门之后"冷暖自知",而在秦皇岛晚上总是会被冻得瑟瑟发抖,因此想写一个小脚本可以查询未来几天的天气,让自己选择合适的衣服. 经过查询 ...
用JQ去实现一个轮播效果
前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body><div class="pic"><div cl ...
十五分钟用JavaScript基础写一个图片轮播效果
十五分钟用JavaScript基础写一个图片轮播效果前言这次也是一个适合JavaScript初学者的小练手,用JavaScript的基本知识去写一个轮播图,其实轮播图有很多方法去实现,像用一些框架 ...
echarts饼图轮播效果
echarts饼图轮播效果 echarts提供的dispatchAction方法可以控制饼图某一段"highlight"'高亮,或"downplay"取消高亮. ...
用html css JavaScript写一个功能全面的王者荣耀轮播图（仿淘宝京东轮播图）通俗易懂
首先分析一下案例需求: 1.鼠标经过就显示隐藏左右按钮 2.动态生成小圆圈有几张图片,就生成几个小圆圈 3.点击小圆圈,移动图片当然移动的是 ul(大盒子) 4.点击左右按钮, 图片滚动 ...
一个很Nice的Android Banner轮播图库
Android萌新一枚,最近项目中有一个轮播图的需求,网上搜了很多资料,也看了多开源库,但不是bug多就是库不维护.后来在GitHub上找到一个很棒的轮播图–BannerViewPager库推荐个大家 ...
android 炫酷轮播图,一个很Nice的Android Banner轮播图库
Android小白一枚,最近项目中有一个轮播图的需求,网上搜了很多资料,也看了多开源库,但不是bug多就是库不维护.后来在GitHub上找到一个很棒的轮播图–BannerViewPager库推荐个大家 ...
制作一个含文字和图片的轮播图
非原生JS制作轮播图有一定的参考价值,但是不能保证不出错,还请大佬门自己多多尝试实现3个功能: 1.自动轮播 2.鼠标放上去停止轮播 3.鼠标放在小圆点上实现轮播原理一个盒子(div)放置图片 ...
echarts 地图轮播效果
轮播方法,通过设置定时器,并使用echarts中dispatchAction方法即可. 其他设置如鼠标移到或移出地图,echarts用on方法监听事件,这个例子用了鼠标移出事件mouseout,鼠标移 ...

Echarts实践：实现一个未来七天天气预报，图表轮播效果及插入svg或img图标

轮播效果实现

插入svg图标或img图片

这里我使用的时和风天气的图标，下载到本地的svg
想要插入多个本地图标这里只能通过rich的方式去引入，但是因为我的这里的图标是动态的因此不能提前声明

未来七天效果

未来七天的实现重点在于顶部的图标和内容信息如何实现
这里我通过声明一个空的柱状图，并将他的提示内容向上偏移了-450像素，从而让文字达到图表顶端

Echarts实践：实现一个未来七天天气预报，图表轮播效果及插入svg或img图标相关推荐

最新文章

热门文章

Echarts实践：实现一个未来七天天气预报，图表轮播效果及插入svg或img图标

轮播效果实现

插入svg图标或img图片

这里我使用的时和风天气的图标，下载到本地的svg 想要插入多个本地图标这里只能通过rich的方式去引入，但是因为我的这里的图标是动态的因此不能提前声明

未来七天效果

未来七天的实现重点在于 顶部的图标和内容信息如何实现 这里我通过声明一个空的柱状图，并将他的提示内容向上偏移了-450像素，从而让文字达到图表顶端

Echarts实践：实现一个未来七天天气预报，图表轮播效果及插入svg或img图标相关推荐

最新文章

热门文章

这里我使用的时和风天气的图标，下载到本地的svg
想要插入多个本地图标这里只能通过rich的方式去引入，但是因为我的这里的图标是动态的因此不能提前声明

未来七天的实现重点在于顶部的图标和内容信息如何实现
这里我通过声明一个空的柱状图，并将他的提示内容向上偏移了-450像素，从而让文字达到图表顶端