完整的數據大屏柱狀圖要從哪些方面考慮

1.x軸要考慮那些？

1. 標簽文字要不要

2.刻度要不要

3.x軸的顏色要不要

例子三要素

代碼對應的是我上面最終的樣式

xAxis: [{type: "category",data:XLabel,axisTick: {// 軸刻度show: false,},axisLabel: {// 軸文字show:false,color: "#A0B2D3",fontSize: 12,},axisLine: {// 軸線show: true,color:'#268C8C',},},],

2.y軸要考慮那些？

1.字體顏色、字體大小

2.單位 單位和字體不一樣單位的配置有三種方式

放一個單位配置的文檔你要用哪個 這個是segmentfault的作者寫的我只是借鑒參考https://segmentfault.com/a/1190000040213263

3.網格線的type是否是虛線

4.網格線的間距(這個我不需要，需要的百度一下很方便的)

yAxis: [{type: "value",name: "單位：個",nameTextStyle: {color: "#268C8C",fontSize: 12,padding: [0, 0, 10, -30], //name文字位置 對應 上右下左},axisTick: {// 軸刻度show: false,},splitLine: {// 網格線show: true,lineStyle: { //分割線color: "#268C8C",width: 1,type: "dashed" //dotted：虛線 solid:實線}},axisLine: {// 軸線show: false,},axisLabel: {// 軸文字color: "#268C8C",fontSize: 12,},},],

3.柱子要考慮那些？

1.顏色

2.寬度

3.間距（這里我強調一下 我的柱子與圖例對應，用的是不同的series，如果用同一系列柱子，那么圖例只有一個。想要多個圖例與其對應，需要設置多個柱子）

然后自己將其抽取出來 map、函數都行

4.柱子上的背景顏色

5.柱子上的數字

4.圖例要考慮那些？

圖例的配置自己看一下我的 和這里的方法------>別人的博客

大約就這些，將例子放在對應的option上，就可以實現效果

let datas = [{ value: 390, name: "黨委(黨組)會" },{ value: 435, name: "懂事會" },{ value: 380, name: "職代會" },{ value: 284, name: "股東會" },{ value: 180, name: "經理層辦公室" },{ value: 260, name: "其他" },];let seriesArr= [];//serieslet XLabel = [];//x軸數據datas.map((item, index) => {XLabel.push(item.name);let obj = {};obj.name = item.name;obj.type = "bar";obj.barWidth = 15;obj.stack = "廣告";obj.showBackground = true;// obj.backgroundStyle.color = rgba(2, 253, 253, 0.27);// obj.backgroundStyle.color = 'rgba(2, 253, 253, 0.27)';obj.data = [];for (var i = 0; i <= index; i++) {if (i != index) {obj.data.push(0);} else {obj.data.push(item.value);}}seriesArr.push(obj);});var option = {color: ["#02FDFD", "#DAA12E", "#0593D4", "#035DDC", "#7668E9", "#E6D54A"],legend: [{align: "left",bottom: "3%",left: "center",itemGap: 29,itemWidth: 13,itemHeight: 13, //圖例寬高textStyle: {color: "#A0B2D3",fontSize: 12,// padding:[5, 10 ]},data:['股東會', '經理層辦公室', '其他']},{align: "left",bottom: "7%",left: "center",itemGap: 25,itemWidth: 13,itemHeight: 13, //圖例寬高textStyle: {color: "#A0B2D3",fontSize: 12,// padding:[5, 10 ]},data:[ '懂事會', '職代會' ,'黨委(黨組)會']},],grid: {// show:true,left: "5%",right: "5%",bottom: "15%",containLabel: true,},tooltip: {//trigger: 'axis', //顯示其他分類axisPointer: {// 坐標軸指示器，坐標軸觸發有效type: "shadow", // 默認為直線，可選為：'line' | 'shadow'},// formatter: function (params) {// return (// '<span style="font-size:20px">' +// params.name +// "<br/>" +// params.marker +// '<span style="color:' +// params.color +// ';font-size:20px;">' +// params.value +// "個" +// "</span>" +// "</span>"// );// },},xAxis: [{type: "category",data:XLabel,axisTick: {// 軸刻度show: false,},axisLabel: {// 軸文字show:false,color: "#A0B2D3",fontSize: 12,},axisLine: {// 軸線show: true,color:'#268C8C',},},],yAxis: [{type: "value",name: "單位：個",nameTextStyle: {color: "#268C8C",fontSize: 12,padding: [0, 0, 10, -30], //name文字位置 對應 上右下左},axisTick: {// 軸刻度show: false,},splitLine: {// 網格線show: true,lineStyle: { //分割線color: "#268C8C",width: 1,type: "dashed" //dotted：虛線 solid:實線}},axisLine: {// 軸線show: false,},axisLabel: {// 軸文字color: "#268C8C",fontSize: 12,},},],//series:[// {// name: "直接訪問",// type: "bar",// barWidth: 25,// stack: "廣告",// data: [320],// },// {// name: "郵件營銷",// type: "bar",// barWidth: 25,// stack: "廣告",// data: [0, 132],// },// {// name: "聯盟廣告",// type: "bar",// stack: "廣告",// barWidth: 25,// data: [0, 0, 191],// },// {// name: "視頻廣告",// type: "bar",// barWidth: 25,// stack: "廣告",// data: [0, 0, 0, 154],// },series: seriesArr,};

我是從這里拷貝的出來的，大家直接放到這里就可以看
下面再放幾個例子的網站

網址

網址

網址

總結

以上是生活随笔為你收集整理的echarts柱状图的x轴（刻度、标签名、刻度线），y轴（单位、刻度线样式（虚线、实线、）、字体样式（颜色、大小），图例排列 、柱状宽度、颜色，柱状背景）完整的柱状图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。