ECharts x轴显示正负极

一、问题

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

二、经过

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

三、结果

// 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]。