Echarts折线图属性设置⼤全 1 // 全图默认背景
2
3 // backgroundColor: ‘rgba(0,0,0,0)’,
4 // 默认⾊板
5 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed',
6 '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0',
7 '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
8 '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'],
9
10 // 图表标题
11 title: {
12 x: 'left', // ⽔平安放位置，默认为左对齐，可选为：
13 // 'center' ¦ 'left' ¦ 'right'
14 // ¦ {number}（x坐标，单位px）
15 y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
16 // 'top' ¦ 'bottom' ¦ 'center'
17 // ¦ {number}（y坐标，单位px）
18 //textAlign: null // ⽔平对齐⽅式，默认根据x设置⾃动调整
19 backgroundColor: 'rgba(0,0,0,0)',
20 borderColor: '#ccc', // 标题边框颜⾊
21 borderWidth: 0, // 标题边框线宽，单位px，默认为0（⽆边框）
22 padding: 5, // 标题内边距，单位px，默认各⽅向内边距为5，
23 // 接受数组分别设定上右下左边距，同css
24 itemGap: 10, // 主副标题纵向间隔，单位px，默认为10，
25 textStyle: {
26 fontSize: 18,
27 fontWeight: 'bolder',
28 color: '#333' // 主标题⽂字颜⾊
29 },
30 subtextStyle: {
31 color: '#aaa' // 副标题⽂字颜⾊
32 }
33 },
34
35 // 图例
36 legend: {
37 orient: 'horizontal', // 布局⽅式，默认为⽔平布局，可选为：
38 // 'horizontal' ¦ 'vertical'
39 x: 'center', // ⽔平安放位置，默认为全图居中，可选为：
40 // 'center' ¦ 'left' ¦ 'right'
41 // ¦ {number}（x坐标，单位px）
42 y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
43 // 'top' ¦ 'bottom' ¦ 'center'
44 // ¦ {number}（y坐标，单位px）
rotate属性
45 backgroundColor: 'rgba(0,0,0,0)',
46 borderColor: '#ccc', // 图例边框颜⾊
47 borderWidth: 0, // 图例边框线宽，单位px，默认为0（⽆边框）
48 padding: 5, // 图例内边距，单位px，默认各⽅向内边距为5，
49 // 接受数组分别设定上右下左边距，同css
50 itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
51 // 横向布局时为⽔平间隔，纵向布局时为纵向间隔
52 itemWidth: 20, // 图例图形宽度
53 itemHeight: 14, // 图例图形⾼度
54 textStyle: {
55 color: '#333' // 图例⽂字颜⾊
56 }
57 },
58
59 // 值域
60 dataRange: {
61 orient: 'vertical', // 布局⽅式，默认为垂直布局，可选为：
62 // 'horizontal' ¦ 'vertical'
63 x: 'left', // ⽔平安放位置，默认为全图左对齐，可选为：
64 // 'center' ¦ 'left' ¦ 'right'
65 // ¦ {number}（x坐标，单位px）
66 y: 'bottom', // 垂直安放位置，默认为全图底部，可选为：
67 // 'top' ¦ 'bottom' ¦ 'center'
68 // ¦ {number}（y坐标，单位px）
69 backgroundColor: 'rgba(0,0,0,0)',
70 borderColor: '#ccc', // 值域边框颜⾊
71 borderWidth: 0, // 值域边框线宽，单位px，默认为0（⽆边框）
72 padding: 5, // 值域内边距，单位px，默认各⽅向内边距为5，
73 // 接受数组分别设定上右下左边距，同css
74 itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
75 // 横向布局时为⽔平间隔，纵向布局时为纵向间隔
76 itemWidth: 20, // 值域图形宽度，线性渐变⽔平布局宽度为该值 * 10
77 itemHeight: 14, // 值域图形⾼度，线性渐变垂直布局⾼度为该值 * 10
78 splitNumber: 5, // 分割段数，默认为5，为0时为线性渐变
79 color:['#1e90ff','#f0ffff'],//颜⾊
80 //text:['⾼','低'], // ⽂本，默认为数值⽂本
81 textStyle: {
82 color: '#333' // 值域⽂字颜⾊
83 }
84 },
85
86 toolbox: {
87 orient: 'horizontal', // 布局⽅式，默认为⽔平布局，可选为：
88 // 'horizontal' ¦ 'vertical'
89 x: 'right', // ⽔平安放位置，默认为全图右对齐，可选为：
90 // 'center' ¦ 'left' ¦ 'right'
91 // ¦ {number}（x坐标，单位px）
92 y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
93 // 'top' ¦ 'bottom' ¦ 'center'
94 // ¦ {number}（y坐标，单位px）
95 color : ['#1e90ff','#22bb22','#4b0082','#d2691e'],
96 backgroundColor: 'rgba(0,0,0,0)', // ⼯具箱背景颜⾊
97 borderColor: '#ccc', // ⼯具箱边框颜⾊
98 borderWidth: 0, // ⼯具箱边框线宽，单位px，默认为0（⽆边框）
99 padding: 5, // ⼯具箱内边距，单位px，默认各⽅向内边距为5，100 // 接受数组分别设定上右下左边距，同css
101 itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
102 // 横向布局时为⽔平间隔，纵向布局时为纵向间隔
103 itemSize: 16, // ⼯具箱图形宽度
104 featureImageIcon : {}, // ⾃定义图⽚icon
105 featureTitle : {
106 mark : '辅助线开关',
107 markUndo : '删除辅助线',
108 markClear : '清空辅助线',
109 dataZoom : '区域缩放',
110 dataZoomReset : '区域缩放后退',
111 dataView : '数据视图',
112 lineChart : '折线图切换',
113 barChart : '柱形图切换',
114 restore : '还原',
115 saveAsImage : '保存为图⽚'
116 }
117 },
118
119 // 提⽰框
120 tooltip: {
121 trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis' 122 showDelay: 20, // 显⽰延迟，添加显⽰延迟可以避免频繁切换，单位ms 123 hideDelay: 100, // 隐藏延迟，单位ms
124 transitionDuration : 0.4, // 动画变换时间，单位s
125 backgroundColor: 'rgba(0,0,0,0.7)', // 提⽰背景颜⾊，默认为透明度为0.7的⿊⾊126 borderColor: '#333', // 提⽰边框颜⾊
127 borderRadius: 4, // 提⽰边框圆⾓，单位px，默认为4
128 borderWidth: 0, // 提⽰边框线宽，单位px，默认为0（⽆边框）
129 padding: 5, // 提⽰内边距，单位px，默认各⽅向内边距为5，
130 // 接受数组分别设定上右下左边距，同css
131 axisPointer : { // 坐标轴指⽰器，坐标轴触发有效
132 type : 'line', // 默认为直线，可选为：'line' | 'shadow'
133 lineStyle : { // 直线指⽰器样式设置
134 color: '#48b',
135 width: 2,
136 type: 'solid'
137 },
138 shadowStyle : { // 阴影指⽰器样式设置
139 width: 'auto', // 阴影⼤⼩
140 color: 'rgba(150,150,150,0.3)' // 阴影颜⾊
141 }
142 },
143 textStyle: {
144 color: '#fff'
145 }
146 },
147
148 // 区域缩放控制器
149 dataZoom: {
150 orient: 'horizontal', // 布局⽅式，默认为⽔平布局，可选为：
151 // 'horizontal' ¦ 'vertical'
152 // x: {number}, // ⽔平安放位置，默认为根据grid参数适配，可选为：153 // {number}（x坐标，单位px）
154 // y: {number}, // 垂直安放位置，默认为根据grid参数适配，可选为：155 // {number}（y坐标，单位px）
156 // width: {number}, // 指定宽度，横向布局时默认为根据grid参数适配
157 // height: {number}, // 指定⾼度，纵向布局时默认为根据grid参数适配158 backgroundColor: 'rgba(0,0,0,0)', // 背景颜⾊
159 dataBackgroundColor: '#eee', // 数据背景颜⾊
160 fillerColor: 'rgba(144,197,237,0.2)', // 填充颜⾊
161 handleColor: 'rgba(70,130,180,0.8)' // ⼿柄颜⾊
162 },
163
164 // ⽹格
165 grid: {
166 x: 80,
167 y: 60,
168 x2: 80,
169 y2: 60,
170 // width: {totalWidth} - x - x2,
171 // height: {totalHeight} - y - y2,
172 backgroundColor: 'rgba(0,0,0,0)',
173 borderWidth: 1,
174 borderColor: '#ccc'
175 },
176
177 // 类⽬轴
178 categoryAxis: {
179 position: 'bottom', // 位置
180 nameLocation: 'end', // 坐标轴名字位置，⽀持'start' | 'end'
181 boundaryGap: true, // 类⽬起始和结束两端空⽩策略
182 axisLine: { // 坐标轴线
183 show: true, // 默认显⽰，属性show控制显⽰与否
184 lineStyle: { // 属性lineStyle控制线条样式
185 color: '#48b',
186 width: 2,
187 type: 'solid'
188 }
189 },
190 axisTick: { // 坐标轴⼩标记
191 show: true, // 属性show控制显⽰与否，默认不显⽰
192 interval: 'auto',
193 // onGap: null,
194 inside : false, // 控制⼩标记是否在grid⾥
195 length :5, // 属性length控制线长
196 lineStyle: { // 属性lineStyle控制线条样式
197 color: '#333',
198 width: 1
199 }
200 },
201 axisLabel: { // 坐标轴⽂本标签，详见axis.axisLabel
202 show: true,
203 interval: 'auto',
204 rotate: 0,
205 margin: 8,
206 // formatter: null,
207 textStyle: { // 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE 208 color: '#333'
209 }
210 },
211 splitLine: { // 分隔线
212 show: true, // 默认显⽰，属性show控制显⽰与否
213 // onGap: null,
214 lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
215 color: ['#ccc'],
216 width: 1,
217 type: 'solid'
218 }
219 },
220 splitArea: { // 分隔区域
221 show: false, // 默认不显⽰，属性show控制显⽰与否
222 // onGap: null,
223 areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式224 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
225 }
226 }
227 },
228
229 // 数值型坐标轴默认参数
230 valueAxis: {
231 position: 'left', // 位置
232 nameLocation: 'end', // 坐标轴名字位置，⽀持'start' | 'end'
233 nameTextStyle: {}, // 坐标轴⽂字样式，默认取全局样式
234 boundaryGap: [0, 0], // 数值起始和结束两端空⽩策略
235 splitNumber: 5, // 分割段数，默认为5
236 axisLine: { // 坐标轴线
237 show: true, // 默认显⽰，属性show控制显⽰与否
238 lineStyle: { // 属性lineStyle控制线条样式
239 color: '#48b',
240 width: 2,
241 type: 'solid'
242 }
243 },
244 axisTick: { // 坐标轴⼩标记
245 show: false, // 属性show控制显⽰与否，默认不显⽰
246 inside : false, // 控制⼩标记是否在grid⾥
247 length :5, // 属性length控制线长
248 lineStyle: { // 属性lineStyle控制线条样式
249 color: '#333',
250 width: 1
251 }
252 },
253 axisLabel: { // 坐标轴⽂本标签，详见axis.axisLabel
254 show: true,
255 rotate: 0,
256 margin: 8,
257 // formatter: null,
258 textStyle: { // 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE
259 color: '#333'
260 }
261 },
262 splitLine: { // 分隔线
263 show: true, // 默认显⽰，属性show控制显⽰与否
264 lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
265 color: ['#ccc'],
266 width: 1,
267 type: 'solid'
268 }
269 },
270 splitArea: { // 分隔区域
271 show: false, // 默认不显⽰，属性show控制显⽰与否
272 areaStyle: { // 属性areaStyle（详见areaStyle）控制区域样式
273 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
274 }
275 }
276 },
277
278 polar : {
279 center : ['50%', '50%'], // 默认全局居中
280 radius : '75%',
281 startAngle : 90,
282 splitNumber : 5,
283 name : {
284 show: true,
285 textStyle: { // 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE
286 color: '#333'
287 }
288 },
289 axisLine: { // 坐标轴线
290 show: true, // 默认显⽰，属性show控制显⽰与否
291 lineStyle: { // 属性lineStyle控制线条样式
292 color: '#ccc',
293 width: 1,
294 type: 'solid'
295 }
296 },
297 axisLabel: { // 坐标轴⽂本标签，详见axis.axisLabel
298 show: false,
299 textStyle: { // 其余属性默认使⽤全局⽂本样式，详见TEXTSTYLE
300 color: '#333'
301 }
302 },
303 splitArea : {
304 show : true,
305 areaStyle : {
306 color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)']
307 }
308 },
309 splitLine : {
310 show : true,
311 lineStyle : {
312 width : 1,
313 color : '#ccc'
314 }
315 }
316 },
317
318 // 柱形图默认参数
319 bar: {
320 barMinHeight: 0, // 最⼩⾼度改为0
321 // barWidth: null, // 默认⾃适应
322 barGap: '30%', // 柱间距离，默认为柱形宽度的30%，可设固定值
323 barCategoryGap : '20%', // 类⽬间柱形距离，默认为类⽬间距的20%，可设固定值
324 itemStyle: {
325 normal: {
326 // color: '各异',
327 barBorderColor: '#fff', // 柱条边线
328 barBorderRadius: 0, // 柱条边线圆⾓，单位px，默认为0
329 barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
330 label: {
331 show: false
332 // position: 默认⾃适应，⽔平布局为'top'，垂直布局为'right'，可选为
333 // 'inside'|'left'|'right'|'top'|'bottom'
334 // textStyle: null // 默认使⽤全局⽂本样式，详见TEXTSTYLE
335 }
336 },
337 emphasis: {
338 // color: '各异',
339 barBorderColor: 'rgba(0,0,0,0)', // 柱条边线
340 barBorderRadius: 0, // 柱条边线圆⾓，单位px，默认为0
341 barBorderWidth: 1, // 柱条边线线宽，单位px，默认为1
342 label: {
343 show: false
344 // position: 默认⾃适应，⽔平布局为'top'，垂直布局为'right'，可选为
345 // 'inside'|'left'|'right'|'top'|'bottom'
346 // textStyle: null // 默认使⽤全局⽂本样式，详见TEXTSTYLE
347 }
348 }
349 }
350 },
351
352 // 折线图默认参数
353 line: {
354 itemStyle: {
355 normal: {
356 // color: 各异,
357 label: {
358 show: false
359 // position: 默认⾃适应，⽔平布局为'top'，垂直布局为'right'，可选为
360 // 'inside'|'left'|'right'|'top'|'bottom'
361 // textStyle: null // 默认使⽤全局⽂本样式，详见TEXTSTYLE
362 },
363 lineStyle: {
364 width: 2,
365 type: 'solid',
366 shadowColor : 'rgba(0,0,0,0)', //默认透明
367 shadowBlur: 5,
368 shadowOffsetX: 3,
369 shadowOffsetY: 3
370 }
371 },
372 emphasis: {
373 // color: 各异,
374 label: {
375 show: false
376 // position: 默认⾃适应，⽔平布局为'top'，垂直布局为'right'，可选为
377 // 'inside'|'left'|'right'|'top'|'bottom'
378 // textStyle: null // 默认使⽤全局⽂本样式，详见TEXTSTYLE
379 }
380 }
381 },
382 //smooth : false,
383 //symbol: null, // 拐点图形类型
384 symbolSize: 2, // 拐点图形⼤⼩
385 //symbolRotate : null, // 拐点图形旋转控制
386 showAllSymbol: false // 标志图形默认只有主轴显⽰（随主轴标签间隔隐藏策略）
387 },
388
389 // K线图默认参数
390 k: {
391 // barWidth : null // 默认⾃适应
392 // barMaxWidth : null // 默认⾃适应
393 itemStyle: {
394 normal: {
395 color: '#fff', // 阳线填充颜⾊
396 color0: '#00aa11', // 阴线填充颜⾊
397 lineStyle: {
398 width: 1,
399 color: '#ff3200', // 阳线边框颜⾊
400 color0: '#00aa11' // 阴线边框颜⾊
401 }
402 },
403 emphasis: {
404 // color: 各异,
405 // color0: 各异
406 }
407 }
408 },
409
410 // 散点图默认参数
411 scatter: {
412 //symbol: null, // 图形类型
413 symbolSize: 4, // 图形⼤⼩，半宽（半径）参数，当图形为⽅向或菱形则总宽度为symbolSize * 2 414 //symbolRotate : null, // 图形旋转控制
415 large: false, // ⼤规模散点图
416 largeThreshold: 2000, // ⼤规模阀值，large为true且数据量>largeThreshold才启⽤⼤规模模式
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论