一、問題

要求顯示的柱狀圖有正負值，如圖效果：

二、經過

找官網上關於正負極的例子，再通過查詢配置選項，美化為客戶需要的樣式。

三、結果

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