<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="gdpBar" style="width: 350px; height: 280px;"></div>
<script>
let yDatas = [],
datas = [],
ColorList = []; // 置空
gdps.forEach((gdp, index) => {
if (index == curIndex) {
let states = gdp.states;
states.forEach(state => {
yDatas.push(state.name);
datas.push(state.gdp);
if (state.name == "中国") {
ColorList.push("rgba(178,8,1)");
} else {
ColorList.push("rgb(38,104,202)");
}
})
}
})
// // 基于准备好的dom,初始化echarts实例
let myChart = echarts.init(document.getElementById('gdpBar'));
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01],
axisLabel: {
show: true,
textStyle: {
fontSize: 11,
color: "#262522"
}
}
},
yAxis: {
type: 'category',
splitLine: {
show: false
}, //改设置不显示坐标区域内的y轴分割线
// data: ["美国", "英国", "法国", "中国", "日本", "加拿大", "意大利", "印度", "澳大利亚", "巴西", "瑞典", "土耳其"]
data: yDatas,
splitNumber: 1,
axisLabel: {
show: true,
textStyle: {
fontSize: 11,
color: "#262522"
}
}
},
series: [{
type: 'bar',
barWidth: 12, // 柱子宽度
data: datas,
//配置样式
itemStyle: {
//通常情况下:
normal: {
color: function (params) {
let colorList = ColorList;
return colorList[params.dataIndex];
}
},
//鼠标悬停时:
emphasis: {
color: 'rgba(178,8,1)'
}
}
}],
grid: {
top: 15,
x: 65,
x2: 30,
y2: 30
}
};
// 使用配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
效果展示: