Highcharts在Vue3+Typescript中使用

根据官方文档，Highcharts支持typescript，但是从JavaScript转到typescript版本的Highcharts需要修改一下地方。

第一步：安装typescript的highcharts

npm install highcharts@latest @types/highcharts@latest

第二步：前端注册画图区域

<div id="container"></div>

 

第三步：定义二维数组数据、初始化图标

注：

zoomtype目前可以在highcharts的typescript版本中使用，但是会提示错误。

必须先创建Options类型的对象，再用Highcharts.chart('container', options);进行绘制，否则会报错。

在JavaScript线条颜色为lineColor，typescript中线条颜色为color

const currentChatData = ref<number[][]>([
  [0, 316], [1, 320]
  ]);

// 初始化 Highcharts 图表
import type { Options } from 'highcharts';
const initHighCharts = () => {
  const options: Options = {
    accessibility: {
      enabled: false
    },
    tooltip: {
      enabled: false
    },
    chart: {
      // zoomType: 'x',
      backgroundColor: 'rgba(0,0,0,0)',
      animation: false,
    },
    plotOptions: {
      series: {
        animation: false
      }
    },
    title: {
      text: undefined
    },
    xAxis: {
      min: currentChatData.value[0][0],
      max: currentChatData.value[currentChatData.value.length - 1][0],
      labels: {
        enabled: false
      },
      visible: false, // 如果有问题，可以改为 enabled: false
    },
    yAxis: {
      title: {
        text: null
      },
      labels: {
        enabled: false
      },
      visible: false, // 如果有问题，可以改为 enabled: false
    },
    credits: {
      enabled: false
    },
    legend: {
      enabled: false
    },
    series: [{
      type: 'line',
      color: 'red', // 使用 color 代替 lineColor
      data: currentChatData.value,
      lineWidth: 1,
      marker: {
        symbol: 'triangle',
        radius: 2,
      },
    }]
  };
  Highcharts.chart('container', options);
}

以下是JavaScript版本

  initHighCharts(){
      (async () => {
        HighchartsVue.chart('container', {
          //用户可以通过鼠标悬浮查看详情
          tooltip: {
            enabled: false // 禁用提示框
          },
          //用户可以通过拖动鼠标进行选择
          chart: {
            zoomType: 'x',
            backgroundColor: 'rgba(0,0,0,0)'
          },
          plotOptions: {
            series: {
              animation: false  // 禁用系列动画
            }
          },
          title: null, // 将标题设置为 null，完全移除标题
          xAxis: {
            min: this.currentChatData[0][0], // 设置X轴开始于当前数据集的第一个元素的索引
            max: this.currentChatData[this.currentChatData.length - 1][0], // 设置X轴结束于当前数据集的最后一个元素的索引
            visible: true , // 隐藏 X 轴
            labels: {
              enabled: false // 隐藏 X 轴标签
            }
          },
          yAxis: {
            min:-300,
            max:500,
            title: {
              text: null // 将Y轴标题设置为null，隐藏它
            },
            visible: true, // 隐藏 Y 轴
            labels: {
              enabled: false // 隐藏 Y 轴标签
            },
            tickInterval: 200, // 设置标签间隔为 100
          },
          credits: {
            enabled: false // 禁用 Highcharts 链接
          },
          legend: {
            enabled: false
          },
          series: [
            {
              lineColor: 'blue',
              data: this.currentChatData,
              lineWidth: 1, // 设置线条粗细为 3 像素
              marker: {
                symbol: 'triangle',
                radius: 2, // 三角形的大小，根据需要进行调整
              },
            },
          ]
        });
      })();
    },