#未来一周天气变化(最高温度和最低温度)
<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>
转载于:https://www.cnblogs.com/huchong-bk/p/11395460.html
相关资源：JAVA上百实例源码以及开源项目
