vue3 HighCharts自定义封装之径向条形图的实战过程

Vue3 HighCharts自定义封装之径向条形图的实战过程

介绍

径向条形图（Radial bar chart）是一种基于极坐标系的柱状图，也称为玫瑰图（Rose chart）或雷达图（Radar chart）。它是非常适合于展现多个变量之间的差异，并且可以在一张图表中显示这些进度条的完成情况。

在本文中，我们将介绍如何使用Vue3和HighCharts库来进一步封装径向条形图，并创建一个自定义高度和不同颜色的径向条形图。

前置条件

在继续操作之前，请确保你已经安装了Vue.js和HighCharts，并且你熟悉使用Vue.js和HighCharts的基本语法。

创建组件

首先，我们将创建一个组件来展示径向条形图，并在组件中引入HighCharts库。

<template>
  <div ref="container"></div>
</template>

<script>
import Highcharts from "highcharts";
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(Highcharts);

export default {
  name: "RadialBarChart",
  props: {
    chartOptions: {
      type: Object,
      required: true
    }
  },
  mounted() {
    Highcharts.chart(this.$refs.container, this.chartOptions);
  }
};
</script>

组件的功能非常简单，只是在内部使用了一个div元素来显示径向条形图。chartOptions是我们的props，我们将在其中传递 HighCharts 的配置。

高度自定义

对于径向条形图，我们可以非常简单地覆盖HighCharts默认的径向条形图尺寸。在我们的props中添加一个自定义的height属性：

<template>
  <div ref="container"></div>
</template>

<script>
import Highcharts from "highcharts";
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(Highcharts);

export default {
  name: "RadialBarChart",
  props: {
    chartOptions: {
      type: Object,
      required: true
    },
    height: {
      type: Number,
      default: 400
    }
  },
  mounted() {
    Highcharts.chart(this.$refs.container, {
      ...this.chartOptions,
      chart: {
        ...this.chartOptions.chart,
        height: this.height
      }
    });
  }
};
</script>

如你所见，我们非常简单地使用了chartProps来重写高度。

颜色可定制

有时，在径向条形图中，我们需要自定义单个进度条的颜色以更好地反映实际情况。

<template>
  <div ref="container"></div>
</template>

<script>
import Highcharts from "highcharts";
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(Highcharts);

export default {
  name: "RadialBarChart",
  props: {
    chartOptions: {
      type: Object,
      required: true
    },
    height: {
      type: Number,
      default: 400
    },
    colors: {
      type: Array
    }
  },
  mounted() {
    // 如果colors未定义，则使用默认颜色
    const { colors = [] } = this;
    Highcharts.chart(this.$refs.container, {
      ...this.chartOptions,
      plotOptions: {
        ...this.chartOptions.plotOptions,
        radialBar: {
          dataLabels: {
            ...this.chartOptions.plotOptions.radialBar.dataLabels,
            color: "#ffffff"
          },
          colors,
          track: {
            background: "#c8d1e0"
          }
        }
      },
      chart: {
        ...this.chartOptions.chart,
        height: this.height
      }
    });
  }
};
</script>

在这个例子中，我们添加了一个名为colors的prop，在数据中为每个进度条指定一个颜色。注意，如果没有colors传递给我们的组件，我们将使用HighCharts默认的径向条形图颜色。

示例

现在，我们将使用上面讲到的组件并传递一些数据来创建一个实际的径向条形图示例：

<template>
  <RadialBarChart :chartOptions="chartOptions" :height="400" />
</template>

<script>
import RadialBarChart from "@/components/RadialBarChart.vue";

export default {
  name: "Example",
  components: {
    RadialBarChart
  },
  data() {
    return {
      chartOptions: {
        chart: {
          type: "column",
          polar: true,
          style: {
            fontFamily: "Roboto"
          }
        },
        title: {
          text: "2006 数据"
        },
        subtitle: {
          text: "Source: WorldClimate.com"
        },
        xAxis: {
          categories: [
            "北京",
            "上海",
            "天津",
            "重庆",
            "海南",
            "广东",
            "深圳",
            "武汉",
            "成都"
          ],
          tickmarkPlacement: "on",
          lineWidth: 0
        },
        yAxis: {
          gridLineInterpolation: "polygon",
          lineWidth: 0,
          min: 0
        },
        tooltip: {
          shared: true,
          pointFormat: "<span style='color:{series.color}'>{series.name}: <b>{point.y:,.0f}</b><br/>"
        },
        legend: {
          align: "right",
          verticalAlign: "top",
          y: 70,
          layout: "vertical"
        },
        series: [
          {
            // 进度条
            name: "市场占有率",
            data: [502, 635, 809, 947, 1402, 3634, 5268, 1441, 1760],
            pointPlacement: "on"
          }
        ]
      }
    };
  }
};
</script>

以上示例中，我们引入了我们的RadialBarChart组件并传递了一些数据。该图表采用极坐标系，使用默认颜色进行绘制，没有自定义宽度和颜色。

但是，由于我们创建了一个可定制的组件，我们可以很容易地传递任何数据。

现在你已经可以创建和定制自己的径向条形图了。