Highchart实现条状图bar 2

最新推荐文章于 2023-05-31 20:15:15 发布

jianghaha2011

最新推荐文章于 2023-05-31 20:15:15 发布

阅读量223

点赞数

分类专栏： Highcharts

本文链接：https://blog.youkuaiyun.com/jianghaha2011/article/details/105676319

版权

Highcharts 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用Highcharts库绘制带有渐变色效果的条形图的方法，详细展示了如何设置图表的颜色渐变、布局调整及数据标签样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

特点：文字与条状并列排，颜色渐变
在这里插入图片描述

chart_UnitMatters: function(docm) {
      // let myColors = ["#06a786", "#0480c6", "#0375e8"];
      let myColors = [{
        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
        stops: [[0, 'rgb(81, 254, 208)'], [1, 'rgb(81, 196, 253)']]
      }];
      Highcharts.chart(docm, {
        chart: {
          type: 'bar',
          backgroundColor: null,
          spacing: [30, 10, 10, 20]
        },
        colors: myColors,
        title: {
          text: ''
        },
        tooltip: {
          pointFormat: '{series.name}: <b>{point.y}</b><br/>'
        },
        xAxis: {
          reversed: true,
          gridLineWidth: 0,
          lineWidth: 0,
          categories: this.UnitMatters.listX,
          labels: {
            style: {
              color: "#fff",
              fontSize: 14
            },
            align: 'left',
            x: 0,
            y: -18,
            autoRotation: false
          }
        },
        yAxis: [{
          title: {
            text: ''
          },
          lineWidth: 0,
          gridLineWidth: 0,
          labels: {
            style: {
              color: "#fff",
              fontSize: 14
            }
          },
          visible: false,
          max: 700000
        }],
        plotOptions: {
          bar: {
            showInLegend: false,
            dataLabels: {
              allowOverlap: true,
              enabled: true,
              // distance: -70,
              style: {
                textOutline: "0px 0px contrast",
                color: "#01e6ec",
                fontSize: 12
              },
              format: '{y}'
            }
          },
          series: {
            colorByPoint: true,
            borderWidth: 0,
            pointWidth: 12
            // borderRadius: 4
          }
        },
        series: [{
          name: '单位事项数',
          colorByPoint: true,
          data: this.UnitMatters.listY
        }]
      });
    },