echarts柱状图的x轴（刻度、标签名、刻度线），y轴（单位、刻度线样式（虚线、实线、）、字体样式（颜色、大小），图例排列 、柱状宽度、颜色，柱状背景）完整的柱状图_echarts柱状图y轴刻度

完整的数据大屏柱状图要从哪些方面考虑

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',
            },
          },
        ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

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,
            },
          },
        ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

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= [];//series
      let 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,
      };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180

我是从这里拷贝的出来的，大家直接放到这里就可以看
下面再放几个例子的网站

网址

网址

网址