echarts如何将柱形图的柱子分割成一小块一小块，也就是象形柱图
关键点：series.type: “pictorialBar”,
<div class="cl-top-content" id="deviceOee" style="width:500px;height:200px"></div>
mounted() {
this.barChart();
},
//设备OEE
barChart() {
let myChart = this.$echarts.init(document.getElementById("deviceOee"));
let option = {
xAxis: {
splitLine: {
show: false,
},
axisLine: {
show: false,
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
},
grid: {
left: 80,
top: 20, // 设置条形图的边距
right: 80,
bottom: 20,
},
yAxis: [
{
type: "category",
show: true,
inverse: false,
data: ["80%以上", "50%-80%", "50%以下"],
axisLine: {
show: false,
},
axisTick: {
show: false,
},
axisLabel: {
// 坐标轴刻度标签的相关设置
show: true,
margin: 15,
textStyle: {
fontSize: 16,
color: function (value) {
return value == "80%以上"
? "#81D3F8"
: value == "50%-80%"
? "#FF6600"
: "#FF004D";
},
},
interval: 0,
},
inverse: true,
},
],
series: [
{
// 内
type: "bar",
barWidth: 10,
legendHoverLink: false,
silent: true,
itemStyle: {
normal: {
// barBorderRadius: [4, 4, 4, 4],
color: function (params) {
var colorlist = ["#81D3F8", "#FF6600", "#FF004D"];
return colorlist[params.dataIndex];
},
},
},
label: {
normal: {
show: true,
position: "right",
distance: 20, //距离柱形的距离
// formatter: "{b}",
textStyle: {
color: "inherit", //映射颜色
fontSize: 36,
},
},
},
data: [
{
name: "80%以上",
value: 5,
},
{
name: "50%-80%",
value: 18,
},
{
name: "50%以下",
value: 7,
},
],
z: 1,
animationEasing: "elasticOut",
},
{
// 分隔
type: "pictorialBar",
itemStyle: {
normal: {
color: "#000",
},
},
symbolRepeat: "fixed",
symbolMargin: 5, //图形的两边间隔
symbol: "rect",
symbolClip: true, //是否裁剪图形
symbolSize: [2, 20],
symbolPosition: "start", //图形的定位位置。
symbolOffset: [-2, 0], //图形相对于原本位置的偏移。
data: [
{
name: "80%以上",
value: 5,
},
{
name: "50%-80%",
value: 18,
},
{
name: "50%以下",
value: 7,
},
],
z: 2,
animationEasing: "elasticOut",
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//若盒子宽度设为百分比，这里做自适应
window.addEventListener("resize", () => {
if (myChart) {
myChart.resize();
}
});
},
},