-
Notifications
You must be signed in to change notification settings - Fork 1
/
2.折线图.html
139 lines (127 loc) · 6.12 KB
/
2.折线图.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 1 导入vue包 -->
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
</head>
<body>
<div id="app">
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:400px;width: 1250px;"></div>
</div>
<script>
// 使用
var myChart = echarts.init(document.getElementById('main'));
var option = {
// graphic 是原生图形元素组件。可以支持的图形元素包括：
// image, text, circle, sector, ring, polygon, polyline, rect, line, bezierCurve, arc, group,
graphic: [
{
//自定义添加水印
// 旋转 1/4个圆
rotation: Math.PI / 4,
//'all'：（默认） 表示用自身以及子节点整体的经过 transform 后的包围盒进行定位。 这种方式易于使整体都限制在父元素范围中。
// 'raw'： 表示仅仅用自身（不包括子节点）的没经过 tranform 的包围盒进行定位。 这种方式易于内容超出父元素范围的定位方式。
bounding: 'raw',
right: 2,
bottom: 20,
type: 'text',
style: {
fill: '#DDD',
text: 'github wang125631',
font: 'bold 26px Microsoft YaHei'
}
}
]
,
//标题，每个图表最多仅有一个标题控件，每个标题控件可设主副标题。
title: {
text: '一级标题',
link:'https://github.com/wang125631',
subtext: '子标题',
sublink: 'https://github.com/wang125631/vue-js'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最高气温', '最低气温','图例用于说明图与数据的关系']
},
// 工具箱，每个图表最多仅有一个工具箱
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
// 是否启用拖拽重计算特性，默认关闭
calculable: true,
xAxis: [
{
type: 'category',
//坐标轴两端空白策略，数组内数值代表百分比，[原始数据最小值与最终最小值之间的差额，原始数据最大值与最终最大值之间的差额]
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [
{
type: 'value',
// 坐标轴文本标签
axisLabel: {
formatter: '{value} 度 (格式化数据)'
}
}
],
series: [
{
name: '最高气温',
type: 'line',
data: [11, 11, 15, 13, 12, 13, 10],
// 标记点
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
//标记线
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name: '最低气温',
type: 'line',
data: [1, -2, 2, 5, 3, 2, 0],
markPoint: {
data: [
{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
{
name:'图例用于说明图与数据的关系',
type: 'line',
data: [24,14,25,16,7,9,6]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
</html>