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

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

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