Highchart实现条状图bar 1

在这里插入图片描述

chartBar2_industry: function (docm) {
        let self = this;
        let myColors = ["#008ce3", "#06d7de"];
        let fontColors = ["#43eee8", "#ab9700"];
        let chartsInfo = self.industry;
        let seriesData = [];
        for (let i = 0; i < chartsInfo.names.length; i++) {
          let data = {
            name: chartsInfo.names[i],
            color: myColors[i],
            data: chartsInfo.value[i],
            dataLabels: {
              style: {
                color: fontColors[i]
              }
            }
          };
          seriesData.push(data);
        }
        this.chartBar2Industry = Highcharts.chart(docm, {
          chart: {
            type: 'bar',
            backgroundColor: null,
            spacing: [10, 10, 10, 10]
          },
          // colors: myColors,
          title: {
            text: ''
          },
          tooltip: {
            // pointFormat: '<span style="color:{point.color}">\u25CF</span>{series.name}: <b>{point.y}</b><br/>' // 默认
          },
          legend: {
            align: "center",
            itemMarginBottom: 0,
            itemStyle: {
              color: "#fff",
              fontWeight: "400",
              fontSize: 12
            },
            itemHoverStyle: {
              color: "#fff"
            },
            squareSymbol: false,
            symbolRadius: 0,
            symbolWidth: 20
          },
          xAxis: {
            reversed: true,
            gridLineWidth: 0,
            lineColor: "#21658a",
            categories: chartsInfo.categories,
            labels: {
              style: {
                color: "#a9b0ba",
                fontSize: 10
              },
              autoRotation: false,
              useHTML: true,
              formatter: function () {
                // return '<a href="' + categoryLinks[this.value] + '">' +
                //   this.value + '</a>';
                // 获取到刻度值
                let labelVal = this.value;
                // 实际返回的刻度值
                let reallyVal = labelVal;
                // 判断刻度值的长度
                if (labelVal.length > 6) {
                  // 截取刻度值
                  reallyVal = labelVal.substr(0, 6) + "<br/>" + labelVal.substring(6, labelVal.length - 1);
                }
                return reallyVal;
              }
            }
          },
          yAxis: {
            title: {
              text: ''
            },
            gridLineColor: "#21658a",
            lineColor: "#21658a",
            lineWidth: 1,
            labels: {
              style: {
                color: "#a9b0ba",
                fontSize: 10
              }
            }
          },
          plotOptions: {
            bar: {
              dataLabels: {
                allowOverlap: true,
                enabled: true,
                // distance: -70,
                style: {
                  textOutline: "0px 0px contrast",
                  color: "#fff",
                  fontSize: 10
                },
                format: '{y}'
              }
            },
            series: {
              // colorByPoint: true,
              showInLegend: true,
              borderWidth: 0,
              pointWidth: 6
            }
          },
          series: seriesData
        });
      },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值