ECharts x轴显示正负极

一时失言乱红尘 2021-09-16 19:56 434阅读 0赞

# 一、问题 #

> 要求显示的柱状图有正负值，如图效果：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]

# 二、经过 #

> 找官网上关于正负极的例子，再通过查找配置选项，美化为客户需要的样式。

# 三、结果 #

// FDIOption
     let FDIOption = { 
    	color: ['#004a79', '#007879'], // 设置图表主色调
    	tooltip: { 
    		trigger: 'axis',
    		axisPointer: { 
    			type: 'shadow'
    		}
    	},
    	grid: { 
    		left: '10%',
    		right: '2%',
    		bottom: '3%',
    		containLabel: true
    	},
    	xAxis: { 
    		type: 'value',
    		axisLine: { 
    			lineStyle: { 
    				color: '#ccc'
    			}
    		},
    		axisTick: { 
    			show: false
    		},
    		// 由于x轴数值太大，会出现value重叠的情况 ———— 坐标值倾斜显示
    		axisLabel: {  
    			interval: 0,
    			rotate: 70
    		},
    		splitLine: {  // 分割线
    			show: false, // 若为true，分割线显示
    			lineStyle: { type: 'dashed'}
    		}
    	},
    	yAxis： { 
    		type: 'category',
    		position: 'right',
    		axisLine: { 
    			lineStyle: { color: '#ccc'}
    		},
    		axisTick: { show: false},
    		splitLine: { show: false},
    		data: ["2017", "2016", "2015"]
    	},
    	series: [
    		{ 
    			data: ["4.310", "2.973", "2.050"],
    			barGap: 0,
    			label: { 
    				normal: { show: false}
    			},
    			barWidth: '16px',
    			type: 'bar'
    		},{ 
    			data: ["39037", "-54966", "59286"],
    			barGap: 0,
    			label: { 
    				normal: { show: false}
    			},
    			barWidth: '16px',
    			type: 'bar'
    		}
    	]
     }
     // 获取数据并添加到FDIOption
     FDIOption.yAxis.data = []
     FDIOption.series[0].data = []
     FDIOption.series[1].data = []
     res.map((item, index) => { 
    	FDIOption.yAxis.data.push(item.year)
    	FDIOption.series[0].data.push(item.value1)
    	FDIOption.series[1].data.push(item.value2)
     })

# 四、特别提示 #

> FDIOption.yAxis.data与FDIOption.series中两个data的值，都是给出的例子，后面用map遍历的，才是动态添加的数值。  
> 这个栗子显示2种类型的柱状图，如果只要一种柱状图，需要去除FDIOption.series\[1\]。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbjI2MzM2NA_size_16_color_FFFFFF_t_70]: /images/20210724/9e5dbdeb9e7c45aea63d08a6e131b1e7.png