小方格形式的柱状图绘制

代码如下

let colors = [{one: "#39C9F6",two: "#39C9F6",},{one: "#85F7E7",two: "#85F7E7",},];let echartData = [{name: "已规范法人决策主体",value: 320,},{name: "未规范法人决策主体",value: 380,},// {// name: "化工",// value: 3900,// },// {// name: "运输",// value: 1800,// },// {// name: "水电",// value: 6289,// },// {// name: "新能源",// value: 8288,// },// {// name: "火电",// value: 3100,// },// {// name: "煤炭",// value: ,// },];let xAxisData = echartData.map((v) => v.name);let yAxisData = echartData.map((v) => v.value);option = {// backgroundColor:"#000",grid: {// show: true,left: "15%",// top: "20%",right: "8%",bottom: "20%",},xAxis: {type: "category",data: xAxisData,axisLine: {// 轴线show: true,lineStyle: {color: "#268C8C",},},axisLabel: {color: "#268C8C",fontSize: "14",interval: 0,},axisTick: {show: false,},},yAxis: {name: "单位：次",nameTextStyle: {color: "#268C8C",fontSize: 12,padding: [0, 0, 10, -30], //name文字位置 对应 上右下左},type: "value",max: 500,// y轴线axisLine: {show: false,},// 轴文字axisLabel: {color: "#268C8C",fontSize: 12,},// 网格线splitLine: {show: true,lineStyle: {type: "dashed", //dotted：虚线 solid:实线width: 1,color: "#268C8C",},},},series: [{name: "集团各板块资产负债率",type: "bar", //设置类型为象形柱状图barWidth: "100", //柱图宽度itemStyle: {normal: {color: function (params) {let odd = params.dataIndex % 2;return {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: colors[odd].one, // 0% 处的颜色},{offset: 1,color: colors[odd].two, // 100% 处的颜色},],};},// color:'#39C9F6',label: {show: true,position: "top",formatter: function (params) {//设置柱状图上文本的颜色不同// 索引// console.log(params.dataIndex);if (params.dataIndex % 2 == 0) {return "{a|" + yAxisData[params.dataIndex] + "}";} else {return "{b|" + yAxisData[params.dataIndex] + "}";}},rich: {a: {// color: "#0EFCFF",color: "#fff",},b: {// color: "#6947FF",color: "#fff",},},// color:'#39C9F6'},},},z: 10,zlevel: 0,data: yAxisData,},{type: "pictorialBar", //设置类型为象形柱状图symbol: "rect", //图形类型，带圆角的矩形symbolMargin: "2", //图形垂直间隔symbolRepeat: true, //图形是否重复// 分隔itemStyle: {normal: {color: "#0F375F",},},symbolRepeat: "fixed",symbolClip: true,symbolSize: [100, 2],symbolPosition: "start",symbolOffset: [0, -1],// symbolBoundingData: this.total,width: "100%",z: 0,zlevel: 1,data: yAxisData,},],};

这里说一个问题

这里x轴上的文字没有显示的原因是x轴长度不够

这里看的就比较明显了，第一个文字太长，导致第二个文字隐藏了

解决这个问题的方式有三种；1.强制显示 （interval: 0,）

还有文字换行 和 角度倾斜

放一个别的作者的链接我这个是转载echarts中x轴文字太长换行的几种方式的跳转链接