echarts_3() {
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById("echart3"));
var xdata = this.PlanNumByAirport.map((item) => {
return item.departureairport;
});
xdata = this.renderAirport(xdata);
var colorList = [
["#40D0FD", "#40D0FD", "#00FFF6 "],
["#C83526", "#C83526", "#F25849"],
["#B2ACFD", "#B2ACFD", "#CF7BFB"],
["#FFC13F", "#FFE824", "#FFD7AC"],
["#C83526", "#F25849", "#C83526"],
["#40D0FD", "#40D0FD", "#00FFF6 "],
["#C83526", "#C83526", "#F25849"],
["#B2ACFD", "#B2ACFD", "#CF7BFB"],
["#FFC13F", "#FFE824", "#FFD7AC"],
["#C83526", "#F25849", "#C83526"],
["#40D0FD", "#40D0FD", "#00FFF6 "],
];
var data = this.PlanNumByAirport.map((item) => {
return item.counts;
});
var maxArr = [100, 100, 100, 100, 100];
var option = {
tooltip: {
trigger: "axis",
borderRadius: 5,
borderColor: "#fff",
borderWidth: 1,
formatter: function (params) {
// 滑动每一条数据对应的数据 params
return (
params[0].axisValue + "<br>" + "计划数量 :" + params[0].value
);
},
},
grid: {
left: 20,
right: "2%",
bottom: 20,
top: "15%",
containLabel: true,
},
xAxis: {
data: xdata,
triggerEvent: true,
axisTick: {
// 刻度线
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: true,
rotate: 40,
interval: 0,
textStyle: {
color: "#fff",
},
},
},
yAxis: {
nameLocation: "middle",
triggerEvent: true,
nameTextStyle: {
padding: 30,
fontSize: 14,
color: "#fff",
},
splitLine: {
show: true,
lineStyle: {
color: "#e5e5e5",
opacity: 0.2,
},
},
axisTick: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
// y轴线
show: true,
textStyle: {
color: "#4d6b87",
fontSize: 12,
},
},
},
series: [
{
name: "hill",
barMinHeight: 10,
type: "pictorialBar",
barCategoryGap: "60%",
symbol:
"path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
itemStyle: {
normal: {
// 渐变色
color: function (params) {
var index = params.dataIndex;
if (params.dataIndex >= colorList.length) {
index = params.dataIndex - colorList.length;
}
return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: colorList[index][0],
},
{
offset: 0.5,
color: colorList[index][1],
},
{
offset: 1,
color: colorList[index][2],
},
]);
},
},
},
label: {
// 数据上方显示数值
show: false,
position: "top",
textStyle: {
color: "#fff",
fontSize: 12,
},
},
data: data,
z: 10,
},
{
// 阴影部分
name: "hill",
type: "bar",
barWidth: "20%",
symbol:
"path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
itemStyle: {
normal: {
color: "rgba(11,47,68,.8)",
},
},
data: maxArr,
z: 9,
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
},
示例: