echarts 中主要的几个配置项功能,简易版

以下是用到的几个主要的配置项和简单的介绍
一:tooltip,当鼠标移到图表时触发显示,类似hover效果

tooltip: {
				trigger: 'axis',  //  显示触发类型
				axisPointer: { // 坐标轴指示器,坐标轴触发有效
				type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
				  }
		  },

二:grid ,当前图表的相对位置,设置成距离顶部距离,或左边距离等

grid:{
				top:0,
				left:0,
				containLabel: true
			},

三:xAxis 图表中x轴坐标

xAxis: {
				type: 'value',
				position: 'top',    //这里可以配置X轴的位置,可以在最上面或最下面
				data: ['0','20%','40%','60%','80%','100%'],  //显示在x轴上的数据
				axisLabel: {   //坐标轴刻度标签的相关设置
					show: true,
					textStyle: {
						color: "#aaaaaa"
					}
				},
				axisLine: {   //坐标轴轴线相关设置。
					lineStyle: {
						color: "#aaaaaa"
					}
				},
				splitLine: {  //坐标轴在 grid 区域中的分隔线相关设置
					// show: false
					lineStyle: {
						// width: 4,
						color: "#efefef",
						type: "solid" //'dotted'虚线 'solid'实线
					}
				}
			},

四:yAxis 图表中Y轴坐标,配置和xAxis差不多
五:series 图表中我认为最主要的配置项

series: [{
			name: '地区覆盖度(100%)',   
				type: 'bar',   //图表类型
				label: {     
					show: true,
					position: 'right',
					color: "#000"
				},
				data: []    //图表中主要数据展示
			},
			{
				name: '人口覆盖度(100%)',
				type: 'bar',
				label: {
					show: true,
					position: 'right',
					color: "#000"
				},
				data: []
			},
		]

以上只是工作中个人理解,并不包含完全意思

echarts地址:https://echarts.apache.org/zh/option.html#title

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值