highcharts官网学习

第一次写技术博客，先就凑合写一下，以为最近项目中用到highchart进行学习并进行了总结。 首先是去官网了解一下highcharts，附上官网demo链接

highcharts和echarts比较

技术选型比较

我们在做项目的时候会技术选型（如果老板或者甲方指定用哪个那就没办法），目前国内好像最流行的可视化图表工具就echarts和highcharts，也能满足大部分需求。echarts底层为canvas，highcharts底层为svg。

highcharts优点： 1.轻量级，移动端使用比较流畅，毕竟小 2.基于svg，对于动态的增删节点数据非常灵活，不需要重新绘图 3.兼容性好，官方说兼容到IE6。

缺点： 1.第一次上手有点困难 2.商业需要收费 3.官网阅读起来并不友好 highcharts官网地址。

echarts优点： 1.不收费 2.国人开发，便于开发和阅读文档。 3.功能丰富，可以满足大部分开发。

缺点： 1.移动端明显卡顿（不建议使用，会吃掉数据，切不美观） 2.节点多的话生成的图标会很模糊（放大） 3.文档有些地方不够详细。 echarts官网地址，

底层比较

echarts底层用cavan，也就是cavan底层有优缺点1.依赖分辨率 不支持事件处理器 2.弱的文本渲染能力 3.能够以.jpg、.png格式保存结果图像 4.最适合图像密集型的游戏，其中的许多对象会被频繁重绘

同理，highcharts底层用svg，1.不依赖分辨率 2.支持事件处理器 3.最适合带有大型渲染区域的应用程序（如谷歌地图） 4.复杂度高会减慢渲染速度（任何过度使用DOM的应用都不快） 5.不适合游戏应用

总结

如果你需要一个功能强大、外观精美、交互性强的图表库，那么Highcharts可能更适合你。Highcharts的图表类型丰富，支持多种数据格式，可以满足大部分数据可视化的需求。此外，Highcharts还提供了丰富的API和事件处理机制，方便开发者进行二次开发和定制。
如果你需要一个开源、可定制性强的图表库，那么ECharts可能更适合你。ECharts的图表类型和配置项丰富，支持多种数据格式，可以满足各种数据可视化的需求。此外，ECharts还提供了丰富的文档和示例代码，方便开发者学习和使用。
当然，除了Highcharts和ECharts之外，还有其他的JavaScript图表库可供选择，如D3.js、Chart.js等。这些库各有优缺点，具体选择要根据实际需求和项目要求来决定。
总的来说，选择一个好用的数据可视化图表库需要考虑多个因素，包括功能、外观、交互性、可定制性、社区支持等。因此，在选择之前建议仔细比较不同库的优缺点和适用场景，以便找到最适合自己的数据可视化图表库。

以上纯粹是借鉴别人的话，其实随便看看了解一下就行了，一般技术选型都订好了。

highcharts在项目中的使用

我是直接用vue-highcharts插件直接用在vue3+vite+ts项目中，附上vue-highcharts插件链接，里面有详细的插件安装和注册方法，就不一一说明了。算了，还是说明一下吧

第一、安装

//安装
npm install highcharts-vue

第二步、注册

//全局注册
import Vue from 'vue'
import HighchartsVue from 'highcharts-vue'
//其他项目代码省略
//vue2用
Vue.use(HighchartsVue)
//vue3用
app.use(HighchartsVue)

//局部注册的话就需要引入指定的组件当中
//若仅用于特定组件，请使用局部注册方法。首先，您应该从组件文件中的 Highcharts-Vue 包中导入 Chart 组件对象：
import {Chart} from 'highcharts-vue'
//然后，您需要在 Vue 实例配置中注册它，即在 components 部分中
{
    components: {
        highcharts: Chart
    }
}

第三步、配置

1.在自己的vue项目中需要用到图表的vue文件添加<highcharts> 元素，并且必须通过它的 :options 参数传递图表配置对象

<highcharts :options="chartOptions" ></highcharts>

js代码

//这是vue2中
new Vue({
    data() {
        return {
            chartOptions: {
                series: [{
                    data: [1, 2, 3] // sample data
                }]
            }
        }
    }
})
//这是vue3中
import { ref } from "vue"
const chartOptions = ref({
    chart: {
        type: 'spline',
        backgroundColor: '#0b1c2e',
        // width:400,
        height: 220
    },
    title: {
        text: null
    },
    xAxis: {},
    yAxis: {},
    plotOptions: {},
    tooltip: {},
    legend: {},
    credits: {
        enabled: false
    },
    series: []
})

第四步、自己在使用过程中遇到的一些问题或者小坑

我们在使用图表的时候可以查看官方文档deno，基本的图表都是可以直接用vue-highcharts插件实现的，但是使用其他额外的图表或者地图的时候需要额外引入第三方库，例如我就是在使用金字塔三角pyramid和可变半径饼图variablepie的时候额外引入了第三方库，如下示例，（这个是要看官方demo示例那边的js代码引入什么库我们这边就引入什么库）

import { createApp } from 'vue'
import App from './App.vue'
//引入highcharts
import HighchartsVue from 'highcharts-vue';
import Highcharts from "highcharts"; 
// 引用所需外部资源
import Highcharts3d from "highcharts/highcharts-3d";
import exporting from "highcharts/modules/exporting";
import funnel from "highcharts/modules/funnel";
import variablepie from 'highcharts/modules/variable-pie'
import funnel3d from "highcharts/modules/funnel3d";
import cylinder from "highcharts/modules/cylinder";
import pyramid3d from "highcharts/modules/pyramid3d";
import exportingInit from 'highcharts/modules/exporting' 
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsDrilldown from 'highcharts/modules/drilldown';

并且个人在项目过程中遇到一个问题，是有关于npm和pnpm的问题，因为我是vue3+vie安装的项目，所有用的包管理器也是pnpm，用npm安装的时候安装vue-highcharts可以直接安装vue-highcharts和highcharts两个插件的，但是用pnpm的话只能安装vue-highcharts一个插件，后续引入第三方库是要从highcharts插件中引入的，所以需要自己手动安装highcharts组件。

highcharts的一些基本概念和项目中的配置（重要）

基本概念和配置

首先我们要了解highcharts的一些基本常用的几大属性

一般情况下，Highcharts 包含标题（Title）、坐标轴（Axis）、数据列（Series）、数据提示框（Tooltip）、图例（Legend）、版权标签（Credits）等，另外还可以包括导出功能按钮（Exporting）、标示线（PlotLines）、标示区域（PlotBands）、数据标签（dataLabels）等。

title（标题配置）

标题其实不用多说，就是图表的标题没啥很细的东西，文档里面也有

charts（图表配置）

charts里面最重要的是type，它指定了图表的类型是折线图还是曲线图还是柱状图还是饼图,然后可以给图表设置样式，宽高，背景颜色等等,图表样式属性包括 border、backgroundColor、margin、spacing、style等,注意这些是同一级别，width，height不写在style里面

• 边框：包括 borderColor、borderRadius、borderWidth
• 背景：包括 backgroundColor
• 外边距：包括 margin、marginTop、marginRight、marginBottom、marginLeft
• 内边距：包括 spacing、spacingTop、spacingRight、spacingBottom、spacingLeft
• 其他样式：其他属性例如字体等属性，示例代码

chart: {
    type: 'spline',
    backgroundColor: '#0b1c2e',
    width:400,
    height: 220
    style: {
        fontFamily: "",
        fontSize: '12px',
        fontWeight: 'bold',
        color: '#006cee'
    }
}

Axis(坐标轴配置)

笛卡尔图表（普通的二维数据图）都有X轴和Y轴，默认情况下，x轴显示在图表的底部，y轴显示在左侧（多个y轴时可以是显示在左右两侧），通过设置chart.inverted = true 可以让x，y轴显示位置对调。 坐标轴主要有categories（里面是坐标轴数据）、title（坐标轴标题）、labels（坐标轴刻度标签）、 crosshair（十字准星）、gridLine（坐标轴网格线）。

label又是比较重要的，有很多属性，enable可以设置true和false（默认true显示），当为false时，x轴和y轴上的刻度文子就不会显示，当为true时可以设置文字的样式用style对象设置，还有rotation属性可以调节坐标刻度上面字体的倾斜度，tickInterval属性可以调整刻度值间隔

crosshair十字准星是鼠标放到表格上去的话，会有一条柱状体，用于看数据更加容易(我在项目配置的时候发现，一般只要开启即可，不用做过多的配置），如果想改变样式可以参考文章juejin.cn/post/720363…

min、max、tickInterval可以搭配使用，这三个属性一般用来设置刻度，设置你最小和最大以及每个刻度间隔多少，这样x轴和y轴上的刻度就是平均的了

gridLineWidth、gridLineColor、gridLineDashStyle这三个是设置坐标轴网格线样式的，gridLineDashStyle设置网格线线条样式，和Css border-style类似，常用的有：Solid、Dot、Dash。gridLineWidth、gridLineColor分别设置网格线宽度和颜色 坐标轴配置示例代码

 xAxis: {
        categories: ['今日', '本月', '本季度', '上季度', '全年'],
        title: {
            text: null
        },
        crosshair:true,
        
       crosshairs: true          // 启用竖直方向准星线

      crosshairs: [true, true]  // 同时启用竖直及水平准星线

      crosshairs: [{            // 设置准星线样式
         width: 3,
        color: 'green'
        }, {
        width: 1,
        color: "#006cee",
        dashStyle: 'longdashdot',
        zIndex: 100 
       }]

        labels: {
            style: {
                color: '#919191',
                fontSize: "12px"
            }
        }
    },

    yAxis: {
        categories: ['0', '200', '400', '600', '800', '1000'],
        title: {
            text: null
        },
        labels: {
            // enabled: false,
            style: {
                color: '#919191',
                fontSize: "12px"
            }
        },
        gridLineDashStyle: 'ShortDash',//网格线样式
        gridLineColor:'rgb(64,64,64)',
        min:0 ,//最小值
		tickInterval:200, //间隔
		max:1000 //最大值
    },

tooltip（数据提示框配置）

数据提示框指的当鼠标悬停在某点上时，以框的形式提示该点的数据，比如该点的值、数据单位等。数据提示框内提示的信息完全可以通过格式化函数动态指定；通过设置 tooltip.enabled = false 即可不启用提示框。

数据提示框有以下属性backgroundColor、borderColor、borderRadius、 borderWidth、 shadow、animation以上分别是设置提示框背景颜色、边框颜色、边框圆角、边框宽度、是否有阴影、是否开启动画，在项目中发现给边框设置宽高没用，还有一个属性padding，我们可以通过改变padding的大小从而改变数据提示框宽高。

还有两个属性也比较重要，pointFormat和headerFormat，可以设置单个点的格式化字符串和数据提示框头部格式化字符，这两个属性也可以直接使用函数pointFormatter实现，对比下 pointFormatter 和 pointFormat 我们可以知道两两种方式的差别：

• pointFormat 更简单，适用于简单的内容格式化
• pointFormatter 更灵活，适用于相对复杂的自定义内容

上述两个观点也就是格式化函数和格式化字符串的优缺点，在使用的时候，请灵活运用。我个人喜欢用字符串，字符串里面可以用html模板

当我们在一个图表中特别是柱状图中有可能要显示两个或多个柱子进行对比，这个时候要把两个数据显示在一个提示框中方便对比也更加美观，可以设置shared属性，默认为false，设置为true时，两条数据或多条数据就在以亲显示了，并且我们可以通过pointFormat设置显示的样式。示例代码

 tooltip: {
        // enable:false,
        shared: true,
        padding:16,
        headerFormat: '{point.key}<br>',
        style: {
            color: 'rgb(124,124,124)',
          
        },
        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {series.name}</b>&nbsp&nbsp&nbsp&nbsp {point.y} <br>'
    },

legend（图例配置）

图例是图表中用不同形状、颜色、文字等 标示不同数据列，通过点击标示可以显示或隐藏该数据列；通过设置 legend.enabled = true | false 来打开或关闭图例。

图例有以下属性layout、align、verticalAlign这三个分别表示如下，layout表示图例的布局方式，有horizontal（水平）和vertical（垂直）；align表示图例在选择垂直或水平布局之后的对齐方式，有left（左侧对齐）、center（中间对齐）、right（右侧对齐）；verticalAlign表示在设置垂直排列之后，图例整体垂直对齐方式，有top、middle、bottom。图例整体还有很多样式可以配置（一般不需要）如backgroundColor、borderColor、shadow、width等等 可以给每一项设置样式用itemStyle，里面有color、cursor，我们一般就给图例设置文字颜色用color示例代码

legend: {
        enabled:true,
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
        symbolHeight:14,
        symbolWidth:20,
        symbolRadius:0,
        itemStyle:{'color':'#FFFFFF'}
    },

plotOptions（数据点配置）

plotOption好像有两种写法，一种是写series对象，里面写属性，另一种是，写具体某种图表类型然后写属性，我一般是写第二种，写图表类型里面写属性，属性有dataLabels，dataLabels可以设置数据点，用enable可以控制显示与隐藏、用color设置字体颜色、用style设置字体样式。

此外还有borderRadius、borderColor、groupPadding这三个属性可以设置边框的圆角、边框颜色、每个边框内边距，我们一般用于柱状图的设置，设置borderColor为空的话外边框的白色阴影就会被去掉。示例代码

//图表类型写法
 plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,   //是否在图表上各个数据点显示对应数据
                color: 'rgb(63,149,166)',
                style: {
                    fontSize: "12px",
                }
            },
            borderRadius: '0',
            borderColor: '',//去边框
            groupPadding: 0.1
        },
    },
//series数据列写法
series: {
            marker: {
                enabled: true   //是否显示折线图上的点（折线图配置）
            },
            dataLabels: {
                enabled: false,  //是否在图表上各个数据点显示对应数据
                color: 'rgb(63,149,166)',
                formatter: function () {//格式化
                    return this.y;
                }
            },
            borderRadius: '0',
            borderColor: '',//去边框
            groupPadding: 0.1
        },

series（数据列）

数据列是一组数据集合，例如一条线，一组柱形等。图表中所有点的数据都来自数据列对象，数据列的基本构造是：

series : [{
    name : '',
    data : []
}] 

提示：数据列配置是个数组，也就是数据配置可以包含多个数据列。

数据列中的 name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中。 在数据列的 data 属性中，我们可以定义图表的数据数组，通常有三种定义方式（一般都用第三种）：

1、数值数组。在这种情况下，配置数组中的数值代表 Y 值，X 值则根据 X 轴的配置，要么自动计算，要么从 0 起自增，或者是根据 pointStart 及 pointInterval 自增；在分类轴中， X 值就是 categoies 配置，数值数组配置实例如下：

data : [1, 4, 6, 9, 10] 

2、包含两个值的数组集合。在这种情况下，集合中数组的第一个值代表 X， 第二个值代表 Y；如果第一个值是字符串，则代表该点的名字，并且 X 值会如 1 中所说的情况决定。数组集合的实例：

data ： [ [5, 2], [6,3], [8,2] ]

3、数据点对象集合。在这种情况下，集合中元素都是数据点对象，对象中可以配置数据见 plotOptions.series 或 plotOptions.{图表类型} 所列。示例代码

//柱状图和折线图
  series: [{
        type:'column',
        name: '数据一',
        data: [100,140,200,100,130],
        color: 'rgb(80,135,236)',
        pointPadding: 0.1,
        groupPadding: 0.2,
        // borderRadiusTopLeft: 100,
        // borderRadiusTopRight: 100,

    }, {
        type:'line',
        name: '数据二',
        data: [150,100,230,140,130],
        color: 'rgb(114,205,215)',
    }
    ]
    
//饼图
  data: [{
            name: '数据一',
            y: 40,
            z: 220,
            color: 'rgb(88,148,255)',
        }, {
            name: '数据二',
            y: 32,
            z: 130,
            color: 'rgb(114,205,215)',
        }, {
            name: '数据三',
            y: 28,
            z: 100,
            color: 'rgb(88,165,92)',
        }],

其实我们把一些配置写在plotOptions里面的话，这里配置就比较简单了

credits（版权信息）和exporting（导出按钮）

这两个不用多说，版权信息一般设置false，导出按钮也设置false，不设置的话默认显示

个人项目中图表配置示例代码

1.折线图

<script setup>
import { ref } from "vue"
const chartOptions = ref({
    chart: {
        type: 'spline',
        backgroundColor: '#0b1c2e',
        // width:400,
        height: 220
    },
    title: {
        text: null
    },
    
    xAxis: {
        categories: ['今日', '本月', '本季度', '上季度', '全年'],
        title: {
            text: null
        },
        crosshair:true,
        labels: {
            style: {
                color: '#919191',
                fontSize: "12px"
            }
        }
    },

    yAxis: {
        categories: ['0', '200', '400', '600', '800', '1000'],
        title: {
            text: null
        },
        labels: {
            // enabled: false,
            style: {
                color: '#919191',
                fontSize: "12px"
            }
        },
        gridLineDashStyle: 'ShortDash',//网格线样式
        gridLineColor:'rgb(64,64,64)',
        min:0 ,//最小值
		tickInterval:200, //间隔
		max:1000 //最大值
    },
    plotOptions: {
        line: {
            dataLabels: {
                enabled: true
            },
            enableMouseTracking: false
        }
    },
    legend: {
        enabled:true,
        layout: 'horizontal',
        align: 'center',
        verticalAlign: 'top',
        // symbolHeight:14,
        // symbolWidth:20,
        // symbolRadius:5,
        itemStyle:{'color':'#FFFFFF'}
    },
    tooltip: {
        // enable:false,
        shared: true,
        padding:16,  //修改tooltip浮窗的padding从而达到修改浮窗宽高的目的
        headerFormat: '{point.key}<br>',
        style: {
            color: 'rgb(124,124,124)',
          
        },
        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {series.name}</b>&nbsp&nbsp&nbsp&nbsp {point.y} <br>'
    },
    credits: {
        enabled: false
    },
    exporting: {enabled: false},
    series: [{
        name: '识别次数',
        lineColor: 'rgb(215,117,91)',

        data: [88, 156, 222, 567, 994]
    }, {
        name: '鸟类种数',
        data: [55, 88, 156, 253, 312],
        color: 'rgb( 250,215,130)'

    }]
})
</script>

2.柱状图

<script setup>
import { ref, reactive } from "vue"

const chartOptions = ref({
    chart: {
        type: 'column',
        backgroundColor: '#0b1c2e',
        width: 480,
        height: 220
    },
    title: {
        text: null
    },
    xAxis: {

        categories: ['1月', '2月', '3月', '4月', '5月'],
        title: {
            text: null
        },
        crosshair: true,
        // gridLineWidth: 1,
        lineWidth: 0,
        labels: {
            enabled: false,
            style: {
                color: '#919191',
                fontSize: "12px"
            }
        },

    },
    yAxis: {
        // categories: ['0', '100', '200', '300','400','500','600'],
        //   min: 0,
        title: {
            text: null,
        },
        labels: {
            enabled: false,
            overflow: 'justify',
            style: {
                color: '#919191',
                fontSize: "12px"
            }
        },
        gridLineWidth: 2,
        // gridLineDashStyle: 'ShortDash',//网格线样式
        gridLineColor: 'rgb(93,102,112)',
        min: 0,//最小值
        tickInterval: 200, //间隔
        max: 1000 //最大值
    },
    plotOptions: {
        column: {
            borderRadius: '0',
            dataLabels: {
                enabled: false
            },
            borderColor: '',//去边框
            shadow: false,		//去阴影
            groupPadding: 0.1,
            // color:'red'
        },
        // area:{
        //     shadow:{
        //         color:'rgba(0,0,0,0.5)',
        //         offsetX:0,
        //         offsetY:2,
        //         opacity:0.5,
        //         width:5
        //     }
        // }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        // enable:false,
        shared: true,
        padding: 16,
        headerFormat: '{point.key}<br>',
        style: {
            color: 'rgb(124,124,124)',

        },
        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {series.name}</b>&nbsp&nbsp&nbsp&nbsp {point.y} <br>'
    },
    credits: {
        enabled: false
    },
    exporting: { enabled: false },
    series: [{
        name: '增加值',
        data: [600, 900, 400, 600, 500],
        color: 'rgb(80,135,236)',
        pointPadding: 0,
        groupPadding: 0.2,
        borderRadiusTopLeft: 100,
        borderRadiusTopRight: 100,
    }
        // }, {
        //     name: '减少值',
        //     data: [150, 100, 200, 140, 100],
        //     color: 'rgb(104,187,196)',
        //     pointPadding: 0,
        //     groupPadding: 0.2
        // }
    ]
})

</script>

3.条形图柱状图结合

<script setup>
import { ref, reactive } from "vue"

const chartOptions = ref({
    chart: {
        type: 'column',
        backgroundColor: '#0b1c2e',
        width:500,
        height: 260
    },
    title: {
        text: null
    },
    xAxis: {

        categories: ['北京', '上海', '深圳', '广州', '杭州','厦门','珠海'],
        title: {
            text: null
        },
        // gridLineWidth: 1,
        lineWidth: 0,
        labels: {
            enabled: true,
            style: {
                color: '#919191',
                fontSize: "12px"
            }
        },

    },
    yAxis: {
        // categories: ['0', '100', '200', '300','400','500','600'],
        //   min: 0,
        title: {
            text: null,
        },
        labels: {
            enabled: true,
            overflow: 'justify',
            style: {
                color: '#919191',
                fontSize: "12px"
            }
        },
        // gridLineWidth: 0,
        // gridLineDashStyle: 'ShortDash',//网格线样式
        gridLineColor: 'rgb(64,64,64)',
        min: 0,//最小值
        tickInterval: 1000, //间隔
        max: 6000 //最大值
    },
    plotOptions: {
        column: {
            borderRadius: '50',
            dataLabels: {
                enabled: true,
                color:'rgb(255,204,0)'
            },
            borderColor:'',//去边框
            shadow: false,		//去阴影
            groupPadding: 0.1,
            // color:'red'
        },
        // area:{
        //     shadow:{
        //         color:'rgba(0,0,0,0.5)',
        //         offsetX:0,
        //         offsetY:2,
        //         opacity:0.5,
        //         width:5
        //     }
        // }
    },
    legend: {
        enabled: false
    },
    credits: {
        enabled: false
    },
    exporting: {enabled: false},
    series: [{
        type:'column',
        name: '数据一',
        data: [4950,5768,3421,5887,4655,5490,2907],
        color: 'rgb(74,77,240)',
        pointPadding: 0.3,
        groupPadding: 0.2,
        // borderRadiusTopLeft: 100,
        // borderRadiusTopRight: 100,

    }, {
        type:'line',
        name: '数据二',
        data: [4950,5768,3421,5887,4655,5490,2907],
        color: 'rgb(173,68,114)',
        pointPadding: 0,
        groupPadding: 0.2
    }
    ]
})

</script>

4.饼图

<script setup>
import { ref, reactive } from "vue"
const chartOptions = ref({
    chart: {
        type: 'variablepie',
        backgroundColor: '#0b1c2e',
        // width:400,
        height: 240
    },
    title: {
        text: null,
        align: 'left'
    },
    plotOptions: {
        variablepie: {
            allowPointSelect: true,
            cursor: 'pointer',
            borderColor: '',//去边框
            shadow: false,		//去阴影
            groupPadding: 0.1,
            innerSize: '20%',
            zMin: 0,
            dataLabels: {
                enabled: false,
            }
        }
    },
    tooltip: {
        enable: false,
        headerFormat: '',
        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b>: {point.y}'

    },
    credits: {
        enabled: false
    },
    exporting: { enabled: false },
    series: [{
        // type: "pie",
        // minPointSize: 10,
       
        // borderRadius: 3,
        // itemStyle: {
        //     normal: {
        //         borderColor: '#fff',
        //         borderWidth: '0'
        //     },
        //     emphasis: {
        //         borderColor: '#fff',
        //         borderWidth: '0'
        //     }
        // },
        data: [{
            name: '数据一',
            y: 40,
            z: 220,
            color: 'rgb(88,148,255)',
        }, {
            name: '数据二',
            y: 32,
            z: 130,
            color: 'rgb(114,205,215)',
        }, {
            name: '数据三',
            y: 28,
            z: 100,
            color: 'rgb(88,165,92)',
        }, {
            name: '数据四',
            y: 25,
            z: 70,
            color: 'rgb(242,189,66)',
        }, {
            name: '数据五',
            y: 18,
            z: 40,
            color: 'rgb(238,117,47)',
        }],
        // colors: [
        //     'rgb(88,148,255)',
        //     'rgb(114,205,215)',
        //     'rgb(88,165,92)',
        //     'rgb(242,189,66)',
        //     'rgb(238,117,47)',
        // ]
    }]
})
</script>

5.金字塔

<script setup>
import { ref, reactive } from "vue"
const chartOptions = reactive({
    chart: {
        type: 'pyramid',
        marginRight: 100,
        // width:460,
        height: 260,
        backgroundColor: '#0b1c2e',
    },
    title: {
        text:null,
        x: -50
    },
    plotOptions: {
        series: {
            borderColor:'',//去边框
            shadow: false,		//去阴影
            reversed: false,
            dataLabels: {
                enabled: false,
                format: '<b>{point.name}</b> ({point.y:,.0f})',
                // color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
                softConnector: true
            }
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        enable:false,
        headerFormat: '',
        pointFormat: '<span style="color:{point.color}">\u25CF</span> <b> {point.name}</b>: {point.y} '
    },
    credits: {
        enabled: false
    },
    exporting: {enabled: false},
    series: [{
        name: '数据',
        data: [
            ['数据一', 100],
            ['数据二', 80],
            ['数据三', 60],
            ['数据四', 40],
            ['数据五', 20]
        ]
    }]
})

最终总结

Highcharts.chart(id, {
　　chart: {//图表配置
　　　　type: 'line',   　　　　　　  　 　 //图表默认类型，默认：line(pie：饼图，column，柱状图；line，折线图，funnel：漏斗图...)。
　　　　height: null,   　　　　　　    　　　　//图表高度，默认：null，根据容器元素高度计算。
　　　　width: null,    　　　　　　    　　　　//图表宽度，默认：null，根据容器元素宽度计算。
　　　　backgroundColor: '#FFFFFF', 　　  //图表区背景颜色，默认：#FFFFFF。
　　　　borderColor: '#335cad', 　　　　      //图表边框颜色，默认：#335cad。
　　　　borderWidth: 0, 　　　　　　　　       //图表边框宽度，默认：0，需要设置图表边框颜色的话需要将其设置大于0。
　　　　borderRadius: 0,    　　　　　　　　         //图表边框的圆角半径，默认：0。
　　　　margin: [0,0,0,0],  　　　　　　   //图表外边缘和绘图区域之间的边距，默认：[0,0,0,0](顺序：上右下左)。
　　　　polar: false    　　　　　　　　　　    //默认：false。当设置为true时，直线图、曲线图、面积图、柱状图等笛卡尔图会转成极地图,
　　　　　　　　　　　　　　　　　　　　　         //例如，蜘蛛图就需要将其设置为true。极地图需要额外的引入highcharts-more.js才能使用。
　　},
　　title: {//标题配置
　　　　text: 'Chart title',    　　　　　　　  //图表标题文字，默认：Chart title。若不想显示标题可设置为null。
　　　　align: 'center',    　　　　　　　　        //图表标题水平对齐方式，默认：center，可选：left、center、right。
　　　　floating: false,    　　　　　　　　        //默认：false，如果设置为true，标题将不占用图表区的位置。
　　　　style: { 　　　　　　　　　　　　　　　　//标题样式配置
　　　　　　　　color: '#000000',
　　　　　　　　fontWeight: 'bold',
　　　　　　　　fontSize: '20px'
　　　 }
　　},
　　exporting: {//导出配置
　　　　enabled:true    　　　　　　　　        //是否启用导出模块，默认：true。若想去除图表右上角导出按钮则设置为false。
　　},
　　credits: {//版权配置
　　　　enabled:true    　　　　　　　　        //是否显示版权信息，默认：true。若想去除图表右下角highcharts官网链接则设置为false。
　　　　text：'Highcharts.com',  　　　　         //版权信息显示内容，默认：Highcharts.com。
　　　　href: ''    　　　　　　　　　　　　         //版权信息链接地址，默认：http://www.highcharts.com。
　　},
　　tooltip: {//数据提示框配置
　　　　enabled: true,  　　　　　　　　         //是否启用数据提示框，默认：true。
　　　　shared: true, 　　　　　　　　　　　　　　//数据提示框共享（一个x轴值对应有多个y轴值时，多个y轴值共享提示框）
　　　　backgroundColor: '',    　　　　      //数据提示框背景色，默认：rgba(247,247,247,0.85)。
　　　　borderColor: null,  　　　　　　  //数据提示框边框颜色，默认：null，使用该数据列或该点的颜色。
　　　　borderWidth: 1,　　　　　　           //数据提示框边框宽度，默认：1。
　　　　borderRadius: 3,    　　　　　　          //数据提示框圆角半径，默认：3。
　　　　pointFormat: '',    　　　　　　          //数据提示框中该点的html代码。变量使用花括号括起来。
　　　　pointFormatter: function(){},        //回调函数，返回格式化提示框中该点的html代码。
　　},
　　xAxis: {//x轴配置
　　　　max: null,  　　　　　　　　　　   //坐标轴最大值，当设置为null时，将会自动计算。
　　　　　　　　　　　　　　　　　　　           //当endOnTick参数值为true时，max值将会向上取整。
　　　　min: null,  　　　　　　　　　　  //坐标轴最小值，当设置为null时，将会自动计算。注意：对数轴最小值不能为0，否则会出错。
　　　　　　　　　　　　　　　　　　　           //如果设置了startOnTick为true时，最小值可能会进行向下取整。
　　　　opposite: false,    　　　　　　         //是否将坐标轴显示在对立面，默认：false。
　　　　　　　　　　　　　　　　　　　          //默认情况下x轴在图表下方，y轴在左边，设置为true后，x轴将在上方显示，y轴在右边显示。
　　　　type: linear,   　　　　　　　　       //坐标轴类型，默认：linear。
　　　　　　　　　　　　　　　　　　            //可选：linear(线性轴)、logarithmic(对数轴)、datetime(时间轴)、category(分类轴)
　　　　categories: null,   　　　　　　//分类坐标轴中的分类，定义x轴刻度显示内容，默认：null。
　　　　tickInterval:  　　　　　　　　　　　　//间隔多少显示刻度
　　　　tickmarkPlacement: 'on',    　　       //本参数只对分类轴有效。当值为on时刻度线将在分类上方显示，当值为between时刻度线将
　　　　　　　　　　　　　　　　　　　         //在两个分类中间显示。当tickInterval为1时，默认是between，其他情况默认是on。
　　　　labels: {//坐标轴标签配置
　　　　　　enabled: true,    　　　　　 //是否显示坐标刻度值，若不想显示则设置为false。
　　　　　　rotation: -45, 　　　　　　　　　　//x轴刻度标题旋转一定角度
　　　　　　formatter: function(){},　     //回调函数，返回在刻度位置显示的格式化内容。
　　　　},
　　　　//十字准星线配置
　　　　crosshair: true, 　　　　　　　　　   //若是柱状图直接配置true
　　　　　crosshair : {  　　　　　　　　　　 //其他图表类型需要配置样式
　　　　　　　width: 1,
　　　　　　　color: 'gray',
　　　　　　　dashStyle: 'Solid'
　　　　　},
　　　　visible: true   　　　　　　　　     //是否显示坐标轴，默认：true。包含坐标轴、坐标轴标题、坐标轴轴线、坐标轴标签等。
　　},
　　yAxis: {//y轴配置
　　　　　　　　　　　　　　　　　　          //配置参数和x轴相同...
　　},
　　scrollbar : {//滚动条配置
　　　　　　enabled:true  　　　　　　　　　　//启用滚动条
　　},
　　series: {//数据列配置
　　　　cursor: 'pointer',  　　　　　 //鼠标在数据列上的形状，默认是箭头，可设置为pointer(手型)。
　　　　name: '',   　　　　　　　　    //数据列名称，用于在legend(图例)、tooltip(数据提示框)中显示。
　　　　data: [{    　　　　　　　　         //数据列数据配置，不同类型的图表数据列配置有所差异，这里示例的是柱状图数据列配置。
　　　　x: 1,
　　　　y: 5,
　　　　name: '',
　　　　color: ''
　　　　}]
　　},
　　legend: {//图例配置
　　　　enabled: true,  　　　　　　  //图例开关，默认：true。
　　　　align: 'center',    　　　　　       //图例在图表区中的水平对齐方式，默认：center。可选：left、center、right。
　　　　backgroundColor: '' 　　    //背景颜色
　　},
　　plotOptions: {
　　　　series: {
　　　　　　marker: {
　　　　　　　　enabled: true   　　　　　//是否显示折线图上的点（折线图配置）
　　　　　　},
　　　　　　dataLabels: {
　　　　　　　　enabled: true,  　　　　　//是否在图表上各个数据点显示对应数据
　　　　　　　　color: '#a3a3a3',
　　　　　　　　formatter: function() {　　//格式化
　　　　　　　　　　return this.y;
　　　　　　　　}
　　　　　　}
　　　　},
　　column: {
　　　　colorByPoint: true  　　　　　//给柱状图每个点分配颜色（柱状图配置）
　　}
}
});