介绍

vue3-highcharts是一个针对Vue3框架设计并包装highcharts.js的Vue组件包，目的是为了更加方便的在Vue3中使用highcharts，使用Vue3的组合式API进行图表开发。

Github

https://github.com/smithalan92/vue3-highcharts

安装使用

• 依赖包安装

npm i --save vue3-highcharts

或者使用你喜欢的包管理工具进行安装 比如

yarn add vue3-highcharts

• 组件注册

分为全局注册和按需注册

//全局注册
import { createApp } from 'vue';
import VueHighcharts from 'vue3-highcharts';

const app = createApp(..options);
app.use(VueHighcharts);

//按需注册
import VueHighcharts from 'vue3-highcharts';

export default {
  name: 'MyChart',
  components: {
    VueHighcharts,
  },
};

推荐使用按需注册以减少打包后的文件体积

• 简单的示例

<template>
  <vue-highcharts
    type="chart"
    :options="chartOptions"
    :redrawOnUpdate="true"
    :oneToOneUpdate="false"
    :animateOnUpdate="true"
    @rendered="onRender"/>
</template>
<script>
  import VueHighcharts from 'vue3-highcharts';

  export default {
    name: 'SimpleChart',

    components: {
      VueHighcharts,
    },

    setup() {
      const seriesData = ref([25, 39, 30, 15]);
      const categories = ref(['Jun', 'Jul', 'Aug', 'Sept']);

      const chartOptions = computed(() => ({
        chart: {
          type: 'line',
        },
        title: {
          text: 'Number of project stars',
        },
        xAxis: {
          categories: categories.value,
        },
        yAxis: {
          title: {
            text: 'Number of stars',
          },
        },
        series: [{
          name: 'New project stars',
          data: seriesData.value,
        }],
      }));

      const onRender = () => {
        console.log('Chart rendered');
      };

      return {
        chartOptions,
        onRender,
      };
    },
  };
</script>

这是最简单的一个折线图

• 股票图表示例

<template>
  <vue-highcharts
    type="stockChart"
    :options="chartOptions"
    :redrawOnUpdate="true"
    :oneToOneUpdate="false"
    :animateOnUpdate="true"
    @updated="onUpdated"/>
</template>
<script>
  import VueHighcharts from 'vue3-highcharts';
  import HighCharts from 'highcharts';
  import StockCharts from 'highcharts/modules/stock';

  StockCharts(HighCharts);

  export default {
    name: 'StockChart',

    components: {
      VueHighcharts,
    },

    setup() {
      const chartOptions = {
        rangeSelector: {
          selected: 1,
        },

        title: {
          text: 'Stock Prices',
        },
        series: [
          {
            name: 'MyStock',
            data: [
              [1537795800000, 55.2],
              [1537882200000, 55.55],
              [1537968600000, 55.1],
              [1538055000000, 56.24],
              [1538141400000, 56.44],
              [1538400600000, 56.81],
              [1538487000000, 57.32],
              [1538573400000, 58.02],
              [1538659800000, 57]],
          },
        ],
      };

      return {
        chartOptions,
        codeSample,
      };
    },
  };
</script>

极坐标图示例：

<template>
  <vue-highcharts
    type="chart"
    :options="chartOptions"
    :redrawOnUpdate="true"
    :oneToOneUpdate="false"
    :animateOnUpdate="true"/>
</template>
<script>
import VueHighcharts from 'vue3-highcharts';
import HighCharts from 'highcharts';
import HighchartsMore from 'highcharts/highcharts-more';

HighchartsMore(HighCharts);

export default {
  name: 'PolarChart',

  components: {
    VueHighcharts,
    CodeBlock,
  },

  setup() {
    const chartOptions = {
      chart: {
        polar: true,
      },
      title: {
        text: 'Highcharts Polar Chart',
      },
      pane: {
        startAngle: 0,
        endAngle: 360,
      },
      xAxis: {
        tickInterval: 45,
        min: 0,
        max: 360,
        labels: {
          format: '{value}°',
        },
      },
      yAxis: {
        min: 0,
      },
      plotOptions: {
        series: {
          pointStart: 0,
          pointInterval: 45,
        },
        column: {
          pointPadding: 0,
          groupPadding: 0,
        },
      },
      series: [{
        type: 'column',
        name: 'Column',
        data: [8, 7, 6, 5, 4, 3, 2, 1],
        pointPlacement: 'between',
      }, {
        type: 'line',
        name: 'Line',
        data: [1, 2, 3, 4, 5, 6, 7, 8],
      }, {
        type: 'area',
        name: 'Area',
        data: [1, 8, 2, 7, 3, 6, 4, 5],
      }],
    };

    return {
      chartOptions,
      codeSample,
    };
  },
};
</script>

总结

本文只是简单地介绍几个例子，实际上更多的功能需要自身去挖掘，vue3-highcharts也只是对highcharts进行了一层包装，更多功能还得看highcharts本身！