var data = [123, 60, 25, 18, 12];
let xdata = ["缺料", "冷隔", "拉膜", "气孔", "不白"]
var colorList = [
{
color0: 'rgba(82, 98, 253, 0)',
color1: 'rgba(82, 98, 253, 0.5)'
},
{
color0: 'rgba(80, 186, 226, 0)',
color1: 'rgba(80, 186, 226, 0.5)'
},
{
color0: 'rgba(77, 255, 148, 0)',
color1: 'rgba(77, 255, 148, 0.5)'
},
{
color0: 'rgba(255, 170, 49, 0)',
color1: 'rgba(255, 170, 49, 0.5)'
},
{
color0: 'rgba(255, 84, 31, 0)',
color1: 'rgba(255, 84, 31, 0.5)'
},
];
let option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "none",
},
formatter: function (params) {
return params[0].name + ": " + params[0].value + "个";
},
},
grid: {
top: "15%",
bottom: "0%",
right: "0%",
left: "0%",
containLabel: true, //grid 区域是否包含坐标轴的刻度标签。false可能溢出，默认为false
},
xAxis: {
data: xdata,
axisTick: { show: false },
axisLine: { show: false },
axisLabel: {
interval: 0,
color: "#333333",
fontSize: 14,
lineHeight: 16,
formatter: function (value, index) {
if (value !== undefined) {
if (value.length > 4) {
// 超出5个字符显示省略号
return value.slice(0, 4) + "\n" + value.slice(4);
}
return value;
}
},
},
},
yAxis: {
splitLine: { show: false },
axisTick: { show: false },
axisLine: { show: false },
offset: 30,
axisLabel: { show: false },
},
color: ["#41C8D6"],
series: [
{
name: "hill",
type: "pictorialBar",
barCategoryGap: "20",
symbolClip: true,
symbol:
"path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
emphasis: {
itemStyle: {
opacity: 1,
},
},
itemStyle: {
color: function (params) {
return {
type: "linear",
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: colorList[params.dataIndex % 5].color0,
},
{
offset: 1,
color: colorList[params.dataIndex % 5].color1,
},
],
global: false, // 缺省为 false
};
},
},
label: {
show: true,
position: "top",
textStyle: {
color: "#969a9d",
fontSize: 14,
},
formatter: function (params) {
return params.value + "个";
},
},
data,
z: 10,
},
],
};