Echarts利用多X轴实现七天天气预报效果的示例代码
作者：fenccc 发布时间：2024-03-11 10:33:05
标签：Echarts,多X轴,天气预报
UI设计图
Echarts示例效果
前言
对于UI给出的设计图，各个气象网站都有类似的效果，实现方式大可归为两种：
网格布局+图表框架绘制温度曲线；
网格布局+canvas自绘温度曲线；
这两种实现方式的共同点都是将曲线和上面的描述文字拆分开来，这样做难点是要实现日期图标部分和气温曲线部分的自适应对齐。因为我CSS经验相对比较薄弱，并且使用Echarts图表框架相对较多，所以决定尝试使用Echarts（版本：4.6.0）来实现上面的效果。查看文档后发现Echarts支持多X轴和富文本显示，可以通过调整X轴偏移量来控制显示位置，同时富文本支持设置背景图标，可以用来显示天气图标。一番测试后得到下面的示例代码。
示例代码
下面这段代码可以考入Echarts直接运行：
var option = {
grid: {
show: true,
backgroundColor: 'transparent',
opacity: 0.3,
borderWidth: '0',
top: '180',
bottom: '0'
},
tooltip: {
trigger: 'axis'
},
legend: {
show: false
},
xAxis: [
// 日期
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 130,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
formatter: [
'{a|{value}}'
].join('\n'),
rich: {
a: {
// color: 'white',
fontSize: 18
}
}
},
nameTextStyle: {
},
data: ["25日","26日","27日","28日","29日","30日","31日"]
},
// 星期
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 110,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
formatter: [
'{a|{value}}'
].join('\n'),
rich: {
a: {
// color: 'white',
fontSize: 14
}
}
},
nameTextStyle: {
fontWeight: 'bold',
fontSize: 19
},
data: ["周一","周二","周三","周四","周五","周六","周日"]
},
// 天气图标
{
type: 'category',
boundaryGap: false,
position: 'top',
offset: 20,
zlevel: 100,
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
interval: 0,
formatter: function(value, index) {
return '{' + index + '| }\n{b|' + value + '}'
},
rich: {
0: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[0]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png'
},
height: 40,
width: 40
},
1: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[1]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png'
},
height: 40,
width: 40
},
2: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[2]] + '.png')
image: 'https://d.scggqx.com/forecast/img/阴.png'
},
height: 40,
width: 40
},
3: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[3]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png'
},
height: 40,
width: 40
},
4: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[4]] + '.png')
image: 'https://d.scggqx.com/forecast/img/多云.png'
},
height: 40,
width: 40
},
5: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[5]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png'
},
height: 40,
width: 40
},
6: {
backgroundColor: {
// image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[6]] + '.png')
image: 'https://d.scggqx.com/forecast/img/小雨.png'
},
height: 40,
width: 40
},
b: {
// color: 'white',
fontSize: 12,
lineHeight: 30,
height: 20
}
}
},
nameTextStyle: {
fontWeight: 'bold',
fontSize: 19
},
// data: this.weatherdata.weather
data: ["小雨","小雨","阴","小雨","多云","小雨","小雨"]
}
],
yAxis: {
type: 'value',
show: false,
axisLabel: {
formatter: '{value} °C',
color: 'white'
}
},
series: [
{
name: '最高气温',
type: 'line',
data: ["16.3","16.2","17.6","14.2","17.6","15.7","14.3"],
symbol: 'emptyCircle',
symbolSize: 10,
showSymbol: true,
smooth: true,
itemStyle: {
normal: {
color: '#C95843'
}
},
label: {
show: true,
position: 'top',
// color: 'white',
formatter: '{c} °C'
},
lineStyle: {
width: 1,
// color: 'white'
},
areaStyle: {
opacity: 1,
color: 'transparent'
}
},
{
name: '最低气温',
type: 'line',
data: ["13.4","12.8","13.5","12.5","12.4","13.2","13"],
symbol: 'emptyCircle',
symbolSize: 10,
showSymbol: true,
smooth: true,
itemStyle: {
normal: {
color: 'blue'
}
},
label: {
show: true,
position: 'bottom',
// color: 'white',
formatter: '{c} °C'
},
lineStyle: {
width: 1,
// color: 'white'
},
areaStyle: {
opacity: 1,
color: 'transparent'
}
}
]
}
上面的代码，最难的部分就是天气图标的设置，由于axisLabel的formatter方法中的value值没法在富文本中使用，所以这里在formatter方法中将value的下标设置成了富文本中的css名，然后在设置天气图标时使用下标获取需要显示的图标名称。
// axisLabel的formatter方法
formatter: function(value, index) {
return '{' + index + '| }\n{b|' + value + '}'
}
// axisLabel的rich方法
rich: {
index: {
backgroundColor: {
image: require('@/assets/weather_icon/' + this.weatherIconDic[this.weatherdata.weather[index]] + '.png')
},
height: 40,
width: 40
}
}
注：
1、this.weatherIconDic是我本地定义的一个天气图标的数据字典。（如：{ ‘晴': ‘a00', ‘多云': ‘a01', ‘阴': ‘a02', ‘阵雨': ‘a03', ‘雷阵雨': ‘a04', ‘冰雹': ‘a05', ‘雨夹雪': ‘a06', ‘小雨': ‘a07', ‘中雨': ‘a08', ‘大雨': ‘a09', ‘暴雨': ‘a10', ‘大暴雨': ‘a11', ‘特大暴雨': ‘a12', ‘阵雪': ‘a13', ‘小雪': ‘a14', ‘中雪': ‘a15', ‘大雪': ‘a16', ‘暴雪': ‘a17', ‘雾': ‘a18', ‘冻雨': ‘a19', ‘沙尘暴': ‘a20', ‘小到中雨': ‘a21', ‘中雨-大雨': ‘a22', ‘大雨-暴雨': ‘a23', ‘暴雨-大暴雨': ‘a24', ‘大暴雨-特大暴雨': ‘a25', ‘小雪-中雪': ‘a26', ‘中雪-大雪': ‘a27', ‘大雪-暴雪': ‘a28', ‘浮尘': ‘a29', ‘扬沙': ‘a30', ‘强沙尘暴': ‘a31' }）
2、this.weatherdata.weather是后端传回来的天气类型。（如：[“小雨”,“小雨”,“阴”,“小雨”,“多云”,“小雨”,“小雨”]）
最终效果
来源：https://blog.csdn.net/FengChSvip/article/details/120950731
0
投稿猜你喜欢
XML文档对象模型（DOM）是什么？可扩展标记语言XML的基础是 DOM。XML 文档具有一个称为节点的信息单元层次结构；DOM 是描述那些- Golang 是一门非常适合编写网络爬虫的语言，它有着高效的并发处理能力和丰富的网络编程库。下面是一个简单的 Golang 网络爬虫示例：p
- 固定路由的面包屑导航我们在配置router的时候，可以将面包屑数据配置在meta中，例如路由配置：{ path: '/p
- 大数据预测是大数据最核心的应用，是它将传统意义的预测拓展到“现测”。大数据预测的优势体现在，它把一个非常困难的预测问题，转化为一个相对简单的
- Django默认Path转换器str：匹配任何非空字符串，但不含斜杠/，如果你没有专门指定转换器，那么这个是默认使用的；int：匹配0和正整
- 如果有了解过python中的列表和元组，你可能会知道相对于列表，元组是不可变的，也就是说元组中的数据不能随意更改。除了列表是用中括号表示而元
- SQL Server正常连接时，若不需要远程操控其他电脑，可以用Windows身份验证模式，但是涉及到远程处理时，需要通过SQL Serve
- 一、为何使用Tkinter而非PyQt众所周知，在Python中创建图形界面程序有很多种的选择，其中PyQt和wxPython都是很热门的模
- defineExpose要在变量和方法声明定义之后再使用，否则浏览器的控制台会输出很多警告，并且最终将该页面卡死。[Vue3] define
- XHTML结构： <div id="myFocus-wrap"> <div id="myFo
- 本文实例为大家分享了Python实现简单的2048小游戏的具体代码，供大家参考，具体内容如下运行效果：1.项目结构2.代码configs.p
- 本文实例讲述了Selenium定位元素操作。分享给大家供大家参考，具体如下：Selenium是一个用于Web应用程序测试的工具。Seleni
- 一、php中pcntl_fork函数概述pcntl_fork()函数是php中用于创建子进程的一个函数，返回创建的子进程的pid。该函数创建
- Photoshop Express,也就是传说中的web版photoshop,来了。和想象中的web photoshop相比，这个Photo
- 1、使用dict()函数，通过其他映射（比如其他字典）或者键，值对的序列建立字典。dict1 = dict(a='a', b
- 铃铃铃…… 上课了老师在黑板写着这么一个标题 《Python: 你所不知道的星号 * 用法》同学A： 呃，星号不就
- 1.背景在python运行一些，计算复杂度比较高的函数时，服务器端单核CPU的情况比较耗时，因此需要多CPU使用多进程加快速度2.函数要求笔
- Mako是一个高性能的Python模板库，它的语法和API借鉴了很多其他的模板库，如Django、Jinja2等等。基本用法创建模板并渲染它
- 使用 substring()或者slice() 函数：split() 功能：使用一个指定的分隔符把一个字符串分割存储到数组 例子： str=
- 问题重现Installing golang.org/x/tools/cmd/guru FAILED Installing golang.or
