完整的数据大屏柱状图要从哪些方面考虑
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的作者写的我只是借鉴参考/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轴（单位 刻度线样式（虚线 实线 ） 字体样式（颜色 大小） 图例排列 柱状宽度 颜色 柱状背景）完整的柱状图
