echarts图表基本属性基本配置

最新推荐文章于 2024-04-18 19:10:21 发布
最新推荐文章于 2024-04-18 19:10:21 发布
阅读量380 收藏 2
点赞数
分类专栏： 前端 文章标签： echarts html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40861618/article/details/120203552
版权

echarts基本属性基本配置

theme = {
// 全图默认背景 
// backgroundColor: ‘rgba(0,0,0,0)’,
 
// 默认色板
color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
	'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
	'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
	'#6699FF', '#ff6666', '#3cb371', '#b8860b', '#30e0e0'],
 
// 图表标题
title: {
	x: 'left',                 // 水平安放位置，默认为左对齐，可选为：
							   // 'center' ¦ 'left' ¦ 'right'
							   // ¦ {number}（x坐标，单位px）
	y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
							   // 'top' ¦ 'bottom' ¦ 'center'
							   // ¦ {number}（y坐标，单位px）
	//textAlign: null          // 水平对齐方式，默认根据x设置自动调整
	backgroundColor: 'rgba(0,0,0,0)',
	borderColor: '#ccc',       // 标题边框颜色
	borderWidth: 0,            // 标题边框线宽，单位px，默认为0（无边框）
	padding: 5,                // 标题内边距，单位px，默认各方向内边距为5，
							   // 接受数组分别设定上右下左边距，同css
	itemGap: 10,               // 主副标题纵向间隔，单位px，默认为10，
	textStyle: {
		fontSize: 18,
		fontWeight: 'bolder',
		color: '#333'          // 主标题文字颜色
	},
	subtextStyle: {
		color: '#aaa'          // 副标题文字颜色
	}
},
 
// 图例
legend: {
	orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
							   // 'horizontal' ¦ 'vertical'
	x: 'center',               // 水平安放位置，默认为全图居中，可选为：
							   // 'center' ¦ 'left' ¦ 'right'
							   // ¦ {number}（x坐标，单位px）
	y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
							   // 'top' ¦ 'bottom' ¦ 'center'
							   // ¦ {number}（y坐标，单位px）
	backgroundColor: 'rgba(0,0,0,0)',
	borderColor: '#ccc',       // 图例边框颜色
	borderWidth: 0,            // 图例边框线宽，单位px，默认为0（无边框）
	padding: 5,                // 图例内边距，单位px，默认各方向内边距为5，
							   // 接受数组分别设定上右下左边距，同css
	itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
							   // 横向布局时为水平间隔，纵向布局时为纵向间隔
	itemWidth: 20,             // 图例图形宽度
	itemHeight: 14,            // 图例图形高度
	textStyle: {
		color: '#333'          // 图例文字颜色
	}
},
 
// 值域
dataRange: {
	orient: 'vertical',        // 布局方式，默认为垂直布局，可选为：
							   // 'horizontal' ¦ 'vertical'
	x: 'left',                 // 水平安放位置，默认为全图左对齐，可选为：
							   // 'center' ¦ 'left' ¦ 'right'
							   // ¦ {number}（x坐标，单位px）
	y: 'bottom',               // 垂直安放位置，默认为全图底部，可选为：
							   // 'top' ¦ 'bottom' ¦ 'center'
							   // ¦ {number}（y坐标，单位px）
	backgroundColor: 'rgba(0,0,0,0)',
	borderColor: '#ccc',       // 值域边框颜色
	borderWidth: 0,            // 值域边框线宽，单位px，默认为0（无边框）
	padding: 5,                // 值域内边距，单位px，默认各方向内边距为5，
							   // 接受数组分别设定上右下左边距，同css
	itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
							   // 横向布局时为水平间隔，纵向布局时为纵向间隔
	itemWidth: 20,             // 值域图形宽度，线性渐变水平布局宽度为该值 * 10
	itemHeight: 14,            // 值域图形高度，线性渐变垂直布局高度为该值 * 10
	splitNumber: 5,            // 分割段数，默认为5，为0时为线性渐变
	color: ['#1e90ff', '#f0ffff'],//颜色 
	//text:['高','低'],         // 文本，默认为数值文本
	textStyle: {
		color: '#333'          // 值域文字颜色
	}
},
 
toolbox: {
	orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
							   // 'horizontal' ¦ 'vertical'
	x: 'right',                // 水平安放位置，默认为全图右对齐，可选为：
							   // 'center' ¦ 'left' ¦ 'right'
							   // ¦ {number}（x坐标，单位px）
	y: 'top',                  // 垂直安放位置，默认为全图顶端，可选为：
							   // 'top' ¦ 'bottom' ¦ 'center'
							   // ¦ {number}（y坐标，单位px）
	color: ['#1e90ff', '#22bb22', '#4b0082', '#d2691e'],
	backgroundColor: 'rgba(0,0,0,0)', // 工具箱背景颜色
	borderColor: '#ccc',       // 工具箱边框颜色
	borderWidth: 0,            // 工具箱边框线宽，单位px，默认为0（无边框）
	padding: 5,                // 工具箱内边距，单位px，默认各方向内边距为5，
							   // 接受数组分别设定上右下左边距，同css
	itemGap: 10,               // 各个item之间的间隔，单位px，默认为10，
							   // 横向布局时为水平间隔，纵向布局时为纵向间隔
	itemSize: 16,              // 工具箱图形宽度
	featureImageIcon: {},     // 自定义图片icon
	featureTitle: {
		mark: '辅助线开关',
		markUndo: '删除辅助线',
		markClear: '清空辅助线',
		dataZoom: '区域缩放',
		dataZoomReset: '区域缩放后退',
		dataView: '数据视图',
		lineChart: '折线图切换',
		barChart: '柱形图切换',
		restore: '还原',
		saveAsImage: '保存为图片'
	}
},
 
// 提示框
tooltip: {
	trigger: 'item',           // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
	showDelay: 20,             // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
	hideDelay: 100,            // 隐藏延迟，单位ms
	transitionDuration: 0.4,  // 动画变换时间，单位s
	backgroundColor: 'rgba(0,0,0,0.7)',     // 提示背景颜色，默认为透明度为0.7的黑色
	borderColor: '#333',       // 提示边框颜色
	borderRadius: 4,           // 提示边框圆角，单位px，默认为4
	borderWidth: 0,            // 提示边框线宽，单位px，默认为0（无边框）
	padding: 5,                // 提示内边距，单位px，默认各方向内边距为5，
							   // 接受数组分别设定上右下左边距，同css
	axisPointer: {            // 坐标轴指示器，坐标轴触发有效
		type: 'line',         // 默认为直线，可选为：'line' | 'shadow'
		lineStyle: {          // 直线指示器样式设置
			color: '#48b',
			width: 2,
			type: 'solid'
		},
		shadowStyle: {                       // 阴影指示器样式设置
			width: 'auto',                   // 阴影大小
			color: 'rgba(150,150,150,0.3)'  // 阴影颜色
		}
	},
	textStyle: {
		color: '#fff'
	}
},
 
// 区域缩放控制器
dataZoom: {
	orient: 'horizontal',      // 布局方式，默认为水平布局，可选为：
							   // 'horizontal' ¦ 'vertical'
	// x: {number},            // 水平安放位置，默认为根据grid参数适配，可选为：
	// {number}（x坐标，单位px）
	// y: {number},            // 垂直安放位置，默认为根据grid参数适配，可选为：
	// {number}（y坐标，单位px）
	// width: {number},        // 指定宽度，横向布局时默认为根据grid参数适配
	// height: {number},       // 指定高度，纵向布局时默认为根据grid参数适配
	backgroundColor: 'rgba(0,0,0,0)',       // 背景颜色
	dataBackgroundColor: '#eee',            // 数据背景颜色
	fillerColor: 'rgba(144,197,237,0.2)',   // 填充颜色
	handleColor: 'rgba(70,130,180,0.8)'     // 手柄颜色
},
 
// 网格
grid: {
	x: 80,
	y: 60,
	x2: 80,
	y2: 60,
	// width: {totalWidth} - x - x2,
	// height: {totalHeight} - y - y2,
	backgroundColor: 'rgba(0,0,0,0)',
	borderWidth: 1,
	borderColor: '#ccc'
},
 
// 类目轴
categoryAxis: {
	position: 'bottom',    // 位置
	nameLocation: 'end',   // 坐标轴名字位置，支持'start' | 'end'
	boundaryGap: true,     // 类目起始和结束两端空白策略
	axisLine: {            // 坐标轴线
		show: true,        // 默认显示，属性show控制显示与否
		lineStyle: {       // 属性lineStyle控制线条样式
			color: '#48b',
			width: 2,
			type: 'solid'
		}
	},
	axisTick: {            // 坐标轴小标记
		show: true,       // 属性show控制显示与否，默认不显示
		interval: 'auto',
		// onGap: null,
		inside: false,    // 控制小标记是否在grid里 
		length: 5,         // 属性length控制线长
		lineStyle: {       // 属性lineStyle控制线条样式
			color: '#333',
			width: 1
		}
	},
	axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
		show: true,
		interval: 'auto',
		rotate: 0,
		margin: 8,
		// formatter: null,
		textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			color: '#333'
		}
	},
	splitLine: {           // 分隔线
		show: true,        // 默认显示，属性show控制显示与否
		// onGap: null,
		lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
			color: ['#ccc'],
			width: 1,
			type: 'solid'
		}
	},
	splitArea: {           // 分隔区域
		show: false,       // 默认不显示，属性show控制显示与否
		// onGap: null,
		areaStyle: {       // 属性areaStyle（详见areaStyle）控制区域样式
			color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
		}
	}
},
 
// 数值型坐标轴默认参数
valueAxis: {
	position: 'left',      // 位置
	nameLocation: 'end',   // 坐标轴名字位置，支持'start' | 'end'
	nameTextStyle: {},     // 坐标轴文字样式，默认取全局样式
	boundaryGap: [0, 0],   // 数值起始和结束两端空白策略
	splitNumber: 5,        // 分割段数，默认为5
	axisLine: {            // 坐标轴线
		show: true,        // 默认显示，属性show控制显示与否
		lineStyle: {       // 属性lineStyle控制线条样式
			color: '#48b',
			width: 2,
			type: 'solid'
		}
	},
	axisTick: {            // 坐标轴小标记
		show: false,       // 属性show控制显示与否，默认不显示
		inside: false,    // 控制小标记是否在grid里 
		length: 5,         // 属性length控制线长
		lineStyle: {       // 属性lineStyle控制线条样式
			color: '#333',
			width: 1
		}
	},
	axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
		show: true,
		rotate: 0,
		margin: 8,
		// formatter: null,
		textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			color: '#333'
		}
	},
	splitLine: {           // 分隔线
		show: true,        // 默认显示，属性show控制显示与否
		lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
			color: ['#ccc'],
			width: 1,
			type: 'solid'
		}
	},
	splitArea: {           // 分隔区域
		show: false,       // 默认不显示，属性show控制显示与否
		areaStyle: {       // 属性areaStyle（详见areaStyle）控制区域样式
			color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
		}
	}
},
 
polar: {
	center: ['50%', '50%'],    // 默认全局居中
	radius: '75%',
	startAngle: 90,
	splitNumber: 5,
	name: {
		show: true,
		textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			color: '#333'
		}
	},
	axisLine: {            // 坐标轴线
		show: true,        // 默认显示，属性show控制显示与否
		lineStyle: {       // 属性lineStyle控制线条样式
			color: '#ccc',
			width: 1,
			type: 'solid'
		}
	},
	axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
		show: false,
		textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			color: '#333'
		}
	},
	splitArea: {
		show: true,
		areaStyle: {
			color: ['rgba(250,250,250,0.3)', 'rgba(200,200,200,0.3)']
		}
	},
	splitLine: {
		show: true,
		lineStyle: {
			width: 1,
			color: '#ccc'
		}
	}
},
 
// 柱形图默认参数
bar: {
	barMinHeight: 0,          // 最小高度改为0
	// barWidth: null,        // 默认自适应
	barGap: '30%',            // 柱间距离，默认为柱形宽度的30%，可设固定值
	barCategoryGap: '20%',   // 类目间柱形距离，默认为类目间距的20%，可设固定值
	itemStyle: {
		normal: {
			// color: '各异',
			barBorderColor: '#fff',       // 柱条边线
			barBorderRadius: 0,           // 柱条边线圆角，单位px，默认为0
			barBorderWidth: 1,            // 柱条边线线宽，单位px，默认为1
			label: {
				show: false
				// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
				//           'inside'|'left'|'right'|'top'|'bottom'
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			}
		},
		emphasis: {
			// color: '各异',
			barBorderColor: 'rgba(0,0,0,0)',   // 柱条边线
			barBorderRadius: 0,                // 柱条边线圆角，单位px，默认为0
			barBorderWidth: 1,                 // 柱条边线线宽，单位px，默认为1
			label: {
				show: false
				// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
				//           'inside'|'left'|'right'|'top'|'bottom'
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			}
		}
	}
},
 
// 折线图默认参数
line: {
	itemStyle: {
		normal: {
			// color: 各异,
			label: {
				show: false
				// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
				//           'inside'|'left'|'right'|'top'|'bottom'
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			},
			lineStyle: {
				width: 2,
				type: 'solid',
				shadowColor: 'rgba(0,0,0,0)', //默认透明
				shadowBlur: 5,
				shadowOffsetX: 3,
				shadowOffsetY: 3
			}
		},
		emphasis: {
			// color: 各异,
			label: {
				show: false
				// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
				//           'inside'|'left'|'right'|'top'|'bottom'
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			}
		}
	},
	//smooth : false,
	//symbol: null,         // 拐点图形类型
	symbolSize: 2,          // 拐点图形大小
	//symbolRotate : null,  // 拐点图形旋转控制
	showAllSymbol: false    // 标志图形默认只有主轴显示（随主轴标签间隔隐藏策略）
},
 
// K线图默认参数
k: {
	// barWidth : null          // 默认自适应
	// barMaxWidth : null       // 默认自适应 
	itemStyle: {
		normal: {
			color: '#fff',          // 阳线填充颜色
			color0: '#00aa11',      // 阴线填充颜色
			lineStyle: {
				width: 1,
				color: '#ff3200',   // 阳线边框颜色
				color0: '#00aa11'   // 阴线边框颜色
			}
		},
		emphasis: {
			// color: 各异,
			// color0: 各异
		}
	}
},
 
// 散点图默认参数
scatter: {
	//symbol: null,      // 图形类型
	symbolSize: 4,       // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
	//symbolRotate : null,  // 图形旋转控制
	large: false,        // 大规模散点图
	largeThreshold: 2000,// 大规模阀值，large为true且数据量>largeThreshold才启用大规模模式
	itemStyle: {
		normal: {
			// color: 各异,
			label: {
				show: false
				// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
				//           'inside'|'left'|'right'|'top'|'bottom'
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			}
		},
		emphasis: {
			// color: '各异'
			label: {
				show: false
				// position: 默认自适应，水平布局为'top'，垂直布局为'right'，可选为
				//           'inside'|'left'|'right'|'top'|'bottom'
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			}
		}
	}
},
 
// 雷达图默认参数
radar: {
	itemStyle: {
		normal: {
			// color: 各异,
			label: {
				show: false
			},
			lineStyle: {
				width: 2,
				type: 'solid'
			}
		},
		emphasis: {
			// color: 各异,
			label: {
				show: false
			}
		}
	},
	//symbol: null,         // 拐点图形类型
	symbolSize: 2           // 可计算特性参数，空数据拖拽提示图形大小
	//symbolRotate : null,  // 图形旋转控制
},
 
// 饼图默认参数
pie: {
	center: ['50%', '50%'],    // 默认全局居中
	radius: [0, '75%'],
	clockWise: false,          // 默认逆时针
	startAngle: 90,
	minAngle: 0,                // 最小角度改为0
	selectedOffset: 10,         // 选中是扇区偏移量
	itemStyle: {
		normal: {
			// color: 各异,
			borderColor: '#fff',
			borderWidth: 1,
			label: {
				show: true,
				position: 'outer'
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			},
			labelLine: {
				show: true,
				length: 20,
				lineStyle: {
					// color: 各异,
					width: 1,
					type: 'solid'
				}
			}
		},
		emphasis: {
			// color: 各异,
			borderColor: 'rgba(0,0,0,0)',
			borderWidth: 1,
			label: {
				show: false,
                textStyle: {
                      fontSize: '12',
                      fontWeight: 'bold'
                    }
				// position: 'outer'
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			},
			labelLine: {
				show: false,
				length: 20,
				lineStyle: {
					// color: 各异,
					width: 1,
					type: 'solid'
				}
			}
		}
	}
},
 
map: {
	mapType: 'china',   // 各省的mapType暂时都用中文
	mapLocation: {
		x: 'center',
		y: 'center'
		// width    // 自适应
		// height   // 自适应
	},
	showLegendSymbol: true,       // 显示图例颜色标识（系列标识的小圆点），存在legend时生效
	itemStyle: {
		normal: {
			// color: 各异,
			borderColor: '#fff',
			borderWidth: 1,
			areaStyle: {
				color: '#ccc'//rgba(135,206,250,0.8)
			},
			label: {
				show: false,
				textStyle: {
					color: 'rgba(139,69,19,1)'
				}
			}
		},
		emphasis: {                 // 也是选中样式
			// color: 各异,
			borderColor: 'rgba(0,0,0,0)',
			borderWidth: 1,
			areaStyle: {
				color: 'rgba(255,215,0,0.8)'
			},
			label: {
				show: false,
				textStyle: {
					color: 'rgba(139,69,19,1)'
				}
			}
		}
	}
},
 
force: {
	// 数据map到圆的半径的最小值和最大值
	minRadius: 10,
	maxRadius: 20,
	density: 1.0,
	attractiveness: 1.0,
	// 初始化的随机大小位置
	initSize: 300,
	// 向心力因子，越大向心力越大
	centripetal: 1,
	// 冷却因子
	coolDown: 0.99,
	// 分类里如果有样式会覆盖节点默认样式
	itemStyle: {
		normal: {
			// color: 各异,
			label: {
				show: false
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			},
			nodeStyle: {
				brushType: 'both',
				color: '#f08c2e',
				strokeColor: '#5182ab'
			},
			linkStyle: {
				strokeColor: '#5182ab'
			}
		},
		emphasis: {
			// color: 各异,
			label: {
				show: false
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			},
			nodeStyle: {},
			linkStyle: {}
		}
	}
},
 
chord: {
	radius: ['65%', '75%'],
	center: ['50%', '50%'],
	padding: 2,
	sort: 'none', // can be 'none', 'ascending', 'descending'
	sortSub: 'none', // can be 'none', 'ascending', 'descending'
	startAngle: 90,
	clockWise: false,
	showScale: false,
	showScaleText: false,
	itemStyle: {
		normal: {
			label: {
				show: true
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			},
			lineStyle: {
				width: 0,
				color: '#000'
			},
			chordStyle: {
				lineStyle: {
					width: 1,
					color: '#666'
				}
			}
		},
		emphasis: {
			lineStyle: {
				width: 0,
				color: '#000'
			},
			chordStyle: {
				lineStyle: {
					width: 2,
					color: '#333'
				}
			}
		}
	}
},
 
island: {
	r: 15,
	calculateStep: 0.1  // 滚轮可计算步长 0.1 = 10%
},
 
markPoint: {
	symbol: 'pin',         // 标注类型
	symbolSize: 10,        // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
	//symbolRotate : null, // 标注旋转控制
	itemStyle: {
		normal: {
			// color: 各异，
			// borderColor: 各异,     // 标注边线颜色，优先于color 
			borderWidth: 2,            // 标注边线线宽，单位px，默认为1
			label: {
				show: true,
				position: 'inside' // 可选为'left'|'right'|'top'|'bottom'
				// textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
			}
		},
		emphasis: {
			// color: 各异
			label: {
				show: true
				// position: 'inside'  // 'left'|'right'|'top'|'bottom'
				// textStyle: null     // 默认使用全局文本样式，详见TEXTSTYLE
			}
		}
	}
},
 
markLine: {
	// 标线起始和结束的symbol介绍类型，如果都一样，可以直接传string
	symbol: ['circle', 'arrow'],
	// 标线起始和结束的symbol大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
	symbolSize: [2, 4],
	// 标线起始和结束的symbol旋转控制
	//symbolRotate : null,
	itemStyle: {
		normal: {
			// color: 各异,           // 标线主色，线色，symbol主色
			// borderColor: 随color,     // 标线symbol边框颜色，优先于color 
			borderWidth: 2,          // 标线symbol边框线宽，单位px，默认为2
			label: {
				show: false,
				// 可选为 'start'|'end'|'left'|'right'|'top'|'bottom'
				position: 'inside',
				textStyle: {         // 默认使用全局文本样式，详见TEXTSTYLE
					color: '#333'
				}
			},
			lineStyle: {
				// color: 随borderColor, // 主色，线色，优先级高于borderColor和color
				// width: 随borderWidth, // 优先于borderWidth
				type: 'solid',
				shadowColor: 'rgba(0,0,0,0)', //默认透明
				shadowBlur: 5,
				shadowOffsetX: 3,
				shadowOffsetY: 3
			}
		},
		emphasis: {
			// color: 各异
			label: {
				show: false
				// position: 'inside' // 'left'|'right'|'top'|'bottom'
				// textStyle: null    // 默认使用全局文本样式，详见TEXTSTYLE
			},
			lineStyle: {}
		}
	}
},
 
textStyle: {
	decoration: 'none',
	fontFamily: 'Arial, Verdana, sans-serif',
	fontFamily2: '微软雅黑',    // IE8- 字体模糊并且不支持不同字体混排，额外指定一份
	fontSize: 12,
	fontStyle: 'normal',
	fontWeight: 'normal'
},
 
// 默认标志图形类型列表
symbolList: [
	'circle', 'rectangle', 'triangle', 'diamond',
	'emptyCircle', 'emptyRectangle', 'emptyTriangle', 'emptyDiamond'
],
loadingText: 'Loading...',
// 可计算特性配置，孤岛，提示颜色
	calculable: false,              // 默认关闭可计算特性
	calculableColor: 'rgba(255,165,0,0.6)',       // 拖拽提示边框颜色
	calculableHolderColor: '#ccc', // 可计算占位提示颜色
	nameConnector: ' & ',
	valueConnector: ' : ',
	animation: true,
	animationThreshold: 2500,       // 动画元素阀值，产生的图形原素超过2500不出动画
	addDataAnimation: true,         // 动态数据接口是否开启动画效果
	animationDuration: 2000,
	animationEasing: 'ExponentialOut'    //BounceOut
};
ninglx_xxx
关注
专栏目录
echarts属性详解
weixin_30832143的博客
07-27 1147
// 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','#ff63...
Echarts中Option属性设置
被基金支配的打工人
09-11 6698
一、title--标题组件 标题组件，包含主标题和副标题。 复制title:{ x:"left", // 'left' | 'right' | 'center' | '100px' y:"4%", // 'top' | 'bottom' | 'center' | '100px' // 标题 show: true, //是否显示 text: "标题内容", textStyle: { color: "#fff", // 主标题文字的颜色。
【 echarts 属性详解】
qq_43142023的博客
04-11 6708
数据系列，包括折线图、柱状图、散点图、饼图等，可以设置系列的类型、数据、样式和标注等属性。图例组件，用于展示数据系列的标识和名称，支持点击切换系列的显示状态。: 网格组件右侧位置，同样可以设置为像素值、百分比或预设的字符串值。: 网格组件顶部位置，同样可以设置为像素值、百分比或预设的字符串值。:网格组件底部位置，同样可以设置为像素值、百分比或预设的字符串值。: 网格组件左侧位置，可以设置为像素值、百分比或预设的字符串值。: 网格的边框颜色，可以设置为颜色值。: 网格的边框宽度，可以设置为像素值。
echarts基本属性大全
weixin_46518533的博客
07-06 9807
echarts基本属性大全 // 全图默认背景  //backgroundColor:"#fff000",        //设置背景颜色,注意是逗号 backgroundColor:“rgba(0,0,0,0.1)”,  // 第四个参数是设置透明度 // 图表标题 title: {  text:“图表标题”,  // 标题内容     x: ‘left’,        // 水平安放位置，默认为左对齐，可选为：                       // ‘center’ ¦ ‘left’ ¦ 
echarts属性的设置（完整大全）
weixin_41669668的博客
12-26 1525
echarts属性的设置（完整大全） // 全图默认背景 // backgroundColor: ‘rgba(0,0,0,0)’, // 默认色板 color: [’#ff7f50’,’#87cefa’,’#da70d6’,’#32cd32’,’#6495ed’, ‘#ff69b4’,’#ba55d3’,’#cd5c5c’,’#ffa500’,’#40e0d0’, ‘#1e90ff’,’#ff63...
微信小程序Echarts图表组件使用方法详解
10-16
如上述内容所示，需要在wxml文件中通过标签引入Echarts组件，其中id和canvas-id属性指定了组件的id，而ec属性则是一个js对象，用于配置Echarts图表组件。 在js文件中，需要对Echarts组件进行初始化，如上述内容展示...
1小时快速学会Echarts图表
06-30
在这个"1小时快速学会Echarts图表"的课程中，你将学习如何在实际工作中高效地运用Echarts来呈现数据。 首先，我们要了解Echarts的基本结构和配置项。Echarts通过JSON格式的配置项来定制图表，包括数据、图表类型、...
解决百度Echarts图表坐标轴越界的方法
10-17
总之，解决Echarts图表坐标轴越界的问题，关键在于合理设置`xAxis`和`yAxis`的`min`、`max`属性，以及有效地利用数据缩放和采样策略。同时，动态调整坐标轴范围以适应数据变化也是防止越界的重要手段。通过对Echarts...
在Vue 中实现循环渲染多个相同echarts图表
10-15
在Vue.js应用中，循环渲染多个相同的Echarts图表是一项常见的需求，这通常涉及到数据驱动视图的概念，即根据数据动态生成多个组件。以下是一个详细解释如何实现这一功能的方法： 首先，确保你已经在项目中安装了...
ECharts属性设置
weixin_30276935的博客
01-03 76
ECharts属性设置 转载于:https://www.cnblogs.com/macT/p/10212684.html
echarts 属性详解
最新发布
weixin_42575814的博客
04-18 1348
14）LabelLine：饼图的标签线样式，是一个 JavaScript 对象，可以设置线条颜色、宽度、类型等样式属性.label:饼图的标签样式，同样是一个 JavaScript 对象，可以设置字体大小、颜色、字体粗细等样式属性。6）axisLine：坐标轴轴线的样式，是一个 JavaScript 对象，可以设置线条颜色、宽度、类型等样式属性axisTick:坐标轴刻度线的样式，也是一个 JavaScript 对象，可以设置线条颜色、宽度、长度等样式属性。也可以过设置回调函数来自定义触发方式。
ECharts属性知识
weixin_48082595的博客
04-09 847
ECharts属性配置项说明
echarts常用属性
weixin_56848461的博客
01-13 1406
echarts基本常用属性
echarts主题属性设置
热门推荐
flitrue的博客
10-17 1万+
theme = { // 全图默认背景 backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d6','#32cd32','#6495ed', '#ff69b4','#ba55d3','#cd5c5c','#ffa500','#40e0d0', '#1e90ff','
ECharts属性详解：深入了解并优化你的图表
qq_22841387的博客
09-21 1万+
在本文中，我们详细解析了ECharts的核心属性，并通过实例代码展示了如何使用这些属性。希望这些内容能帮助你更好地理解ECharts，并在实际项目中运用它来创建更加丰富和互动的数据可视化效果。参考文档ECharts官方文档ECharts实例演示5 分钟上手 ECharts通过本文的学习，你应该对ECharts的使用有了更深入的了解。接下来，你可以尝试将这些知识应用到你的项目中，创造出更专业和美观的数据可视化图表。
echarts参数详细介绍
夜空孤狼啸的博客
09-13 5726
echarts详细参数介绍
echarts 折线图 设置y轴最小刻度_Echarts适用小技巧：适用参数详细说明及示例
weixin_39576149的博客
11-20 2193
点击右上方红色按钮关注“web秀”，让你真正秀起来前言前面有文章，讲述了Vue中封装Echarts组件，但都是直接上代码，没有具体对代码进行讲述。今天我们就来看看，如何使Echarts图表更美观，都是那部分属性使其更惊艳的。前期文章：Vue + Echarts封装出好用又好看的图表组件如何使你的Echarts图表更具有观赏性和实用性？如何隐藏坐标轴Echarts中options对象有xAxis、y...
Echarts 属性详解
janyfayer的专栏
12-18 244
总结 Echarts各个属性详细功能使用
Echarts 图表属性详细解析
在ECharts中，每个图表都有许多可配置的属性，这些属性可以控制图表的外观和行为。 1. **主题（Theme）** - `backgroundColor`: 定义图表背景色，默认设置为透明。 - `color`: 颜色数组，用于设置默认的颜色序列...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值