未来一周天气变化(最高温度和最低温度)（图表以及详细的注释）

Posted 2022-08-14 huchong-bk

#未来一周天气变化(最高温度和最低温度)

<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>