未来一周天气变化(最高温度和最低温度)(图表以及详细的注释)
Posted huchong-bk
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了未来一周天气变化(最高温度和最低温度)(图表以及详细的注释)相关的知识,希望对你有一定的参考价值。
#未来一周天气变化(最高温度和最低温度)
<template>
<div id="main" :style="width:‘1000px‘,height:‘700px‘"></div>
</template>
<script>
export default
name: "demo7",
data()
return ;
,
mounted()
let Mychart = this.$echarts.init(
document.getElementById("main"),
"macarons"
);
Mychart.setOption(
//标题,每个图表最多仅有一个标题控件,每个标题控件可设主副标题
title:
//主标题
text: "未来一周气温变化",
//副标题
subtext: "纯属虚构"
,
//提示框,鼠标悬浮交互时的信息提示
tooltip:
//坐标轴触发
trigger: "axis"
,
//图例
legend:
data: ["最高气温", "最低气温"]
,
//工具箱
toolbox:
//true为展示
show: true,
////启用功能,目前支持feature,工具箱自定义功能回调处理
feature:
//dataZoom,框选区域缩放,自动与存在的dataZoom控件同步,分别是启用,缩放后退
dataZoom:
//加上这个属性以后缩放的时候Y轴不管选多少都会全选
yAxisIndex: "none"
,
//数据视图,打开数据视图,可设置更多属性,readOnly 默认数据视图为只读(即值为true),可指定readOnly为false打开编辑功能
//此处为可编辑的数据视图
dataView: readOnly: false ,
//magicType,动态类型切换,支持直角系下的折线图、柱状图、堆积、平铺转换
magicType: type: ["line", "bar"] ,
//restore,还原,复位原始图表
restore: ,
//下载保存图片,一般默认来说格式为png
saveAsImage:
,
xAxis:
//类目轴
//坐标轴类型,横轴默认为类目型‘category‘
type: "category",
//坐标轴两边留白策略,boolean, Array
boundaryGap: false,
data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
,
yAxis:
//坐标轴类型。‘value‘ 数值轴,适用于连续数据
type: "value",
//坐标轴刻度标签的相关设置。
axisLabel:
//刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
//使用字符串模板,模板变量为刻度默认标签 value
formatter: "value °C"
,
//sereis的数据: 用于设置图表数据之用。series是一个对象嵌套的结构;对象内包含对象
series: [
//系列名称,用于tooltip的显示,legend 的图例筛选,在 setOption 更新数据和配置项时用于指定对应的系列。
name: "最高气温",
//折线类型图
type: "line",
//系列中的数据内容数组。数组项通常为具体的数据项。
//注意,如果系列没有指定 data,并且 option 有 dataset,那么默认使用第一个 dataset。如果指定了 data,则不会再使用 dataset。
data: [11, 11, 15, 13, 12, 13, 10],
//图表标注。
markPoint:
//直接用 type 属性标注系列中的最大值,最小值。这时候可以使用 valueIndex 指定是在哪个维度上的最大值、最小值、平均值。或者可以使用 valueDim 指定在哪个维度上的最大值、最小值、平均值。
data: [
type: "max", name: "最大值" ,
type: "min", name: "最小值"
]
,
//图表标线。
markLine:
//线型,平均值
data: [ type: "average", name: "平均值" ]
,
name: "最低气温",
type: "line",
data: [1, -2, 2, 5, 3, 2, 0],
markPoint:
//通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。
data: [ name: "周最低", value: -2, xAxis: 1, yAxis: -1.5 ]
,
markLine:
data: [
type: "average", name: "平均值" ,
[
//标线两端的标记类型,可以是一个数组分别指定两端,也可以是单个统一指定
symbol: "none",
x: "90%",
yAxis: "max"
,
//起点标记的图形。
//ECharts 提供的标记类型包括 ‘circle‘, ‘rect‘, ‘roundRect‘, ‘triangle‘, ‘diamond‘, ‘pin‘, ‘arrow‘, ‘none‘
symbol: "circle",
//该数据项标签的样式,起点和终点项的 label会合并到一起。
label:
normal:
//position string
//[ default: ‘end‘ ]
//标签位置,可选:
//‘start‘ 线的起始点。
//‘middle‘ 线的中点。
//‘end‘ 线的结束点。
position: "start",
formatter: "最大值"
,
type: "max",
name: "最高点"
]
]
]
);
;
</script>
以上是关于未来一周天气变化(最高温度和最低温度)(图表以及详细的注释)的主要内容,如果未能解决你的问题,请参考以下文章