Echart-条状图bar

在这里插入图片描述

chartBar_industry: function (docm) {
        let myColor = ["#008ce3", "#06d7de"];
        let option = {
          color: myColor,
          legend: {
            data: ["2019营收额", "2020营收额"],
            textStyle: {
              color: "#fff"
            },
            bottom: "20"
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow"
            }
          },
          grid: {
            top: "30",
            left: "10",
            right: "10",
            bottom: "50",
            containLabel: true
          },
          xAxis: {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "#ccc",
                fontSize: "10"
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#023643"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#023643"
              }
            }
          },
          yAxis: {
            type: "category",
            name: "单位(亿元)",
            nameLocation: "end",
            nameTextStyle: {
              color: "#fff",
              fontSize: 10,
              align: "left",
              padding: [0, 0, -8, -60]
            },
            // inverse: true, // 是否是反向坐标轴
            data: ["金融保险业", "教育", "制造业", "租赁和商务服务业", "住宿餐饮业", "建筑业", "房地产业", "信息传输、计算机服务和软件业", "批发和零售业", "交通运输、仓储业和邮政业"],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              textStyle: {
                color: "#fff",
                fontSize: "10"
              },
              // align: "right",
              // lineHeight: 14,
              padding: 0,
              margin: 2,
              showMinLabel: true,
              showMaxLabel: true,
              formatter: function(value) {
                let ret = "";
                let maxLength = 4;
                let valLength = value.length;
                let rowN = Math.ceil(valLength / maxLength);
                // 如果类目项的文字大于5
                if (rowN > 1) {
                  for (let i = 0; i < rowN; i++) {
                    let temp = ""; // 每次截取的字符串
                    let start = i * maxLength; // 开始截取的位置
                    let end = start + maxLength; // 结束截取的位置
                    // 这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
                    temp = value.substring(start, end) + "\n";
                    ret += temp; // 凭借最终的字符串
                  }
                  console.log(ret);
                  return ret;
                }else {
                  console.log(value);
                  return value;
                }
              }
            }
          },
          series: [{
            name: "2019营收额",
            type: "bar",
            data: [10, 52, 200, 334, 390, 330, 220, 390, 330, 220],
            label: {
              normal: {
                show: true,
                position: "right"
              }
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: function (params) {
                  return myColor[0];
                }
              }
            }
          }, {
            name: "2020营收额",
            type: "bar",
            data: [10, 52, 200, 334, 390, 330, 220, 390, 330, 220],
            label: {
              normal: {
                show: true,
                position: "right",
                color: "#a29008"
              }
            },
            barWidth: 10,
            itemStyle: {
              normal: {
                color: function (params) {
                  return myColor[1];
                }
              }
            }
          }]
        };
        let myChart = this.$echarts.init(docm);
        myChart.setOption(option);
      },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值