欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Highchart实现条状图bar 1

程序员文章站 2022-06-09 23:29:51
...

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
        });
      },
相关标签: Highcharts