Highcharts在vue2中的使用

下载插件

npm install highcharts-vue
npm install highcharts

安装插件

Vue.use(HighchartsVue)

使用

import { Chart } from 'highcharts-vue'
export default {
  data () {
    return {
    	chartOptions: {}
    }
  },
  components: { Chart },
}

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

图表组成

+-------------------------------------------+
|                 Highcharts 图表             |
+-------------------------------------------+
| 1. 容器（Container）                       |
|    └─ HTML 元素（如 <div id="container"></div>） |
| 2. 标题（Title）                           |
|    ├─ 主标题（Main Title）                  |
|    └─ 副标题（Subtitle）                    |
| 3. 坐标轴（Axes）                          |
|    ├─ X 轴（XAxis）                        |
|    │  ├─ 轴标签（Axis Labels）              |
|    │  ├─ 轴线（Axis Line）                  |
|    │  ├─ 分隔线（Tick Marks）               |
|    │  └─ 轴名称（Axis Title）               |
|    └─ Y 轴（YAxis）                        |
|       ├─ 轴标签（Axis Labels）              |
|       ├─ 轴线（Axis Line）                  |
|       ├─ 分隔线（Tick Marks）               |
|       └─ 轴名称（Axis Title）               |
| 4. 网格（Grid）                            |
|    └─ 背景网格线（Background Grid Lines）   |
| 5. 数据系列（Series）                      |
|    ├─ 系列类型（Series Type）               |
|    │  ├─ 折线图（Line）                     |
|    │  ├─ 柱状图（Column）                   |
|    │  ├─ 饼图（Pie）                       |
|    │  └─ 散点图（Scatter）                  |
|    ├─ 数据点（Data Points）                |
|    └─ 样式（Style）                        |
|       ├─ 颜色（Color）                     |
|       ├─ 线宽（Line Width）                |
|       └─ 标记符号（Marker Symbol）          |
| 6. 图例（Legend）                          |
|    ├─ 图例项（Legend Items）                |
|    └─ 布局（Layout）                       |
| 7. 提示框（Tooltip）                       |
|    ├─ 触发方式（Trigger）                  |
|    │  ├─ 悬停（Hover）                     |
|    │  └─ 点击（Click）                     |
|    └─ 格式化（Formatter）                  |
| 8. 数据标签（Data Labels）                 |
|    ├─ 显示位置（Position）                 |
|    └─ 格式化（Formatter）                  |
| 9. 导航器（Navigator）                     |
|    └─ 时间序列缩放（Time Range Zoom）       |
| 10. 导出功能（Exporting）                  |
|    └─ 导出为图片/PDF（Export to Image/PDF） |

配置项说明

const option = {
	chart: { // 图表的配置项
		type: 'pie', // 图表类型，例如bar、line、item、column等等
		height: 300, // 高度
		width: 600,
	},
	title: {
      text: '图表标题', // 文字
      align: 'center', // 水平对齐方式
      floating: false, // 文字是否浮动
      margin: 0,, // 文字外边距
      style： {} // css 样式
      userHTML: false, // 是否使用HTML来呈现文本
      verticalAlign: 'top', // 垂直对齐方式
      minScale: 1, // 缩小尺寸
      x: 1, //标题相对于图表内对齐的x位置
      y // 标题相对于图表内对齐的y轴位置
    },
    subtitle: {
       text: '图表副标题', // 文字
	   align: 'center', // 水平对齐方式
	   floating: false, // 文字是否浮动
	   style： {} // css 样式
	   userHTML: false, // 是否使用HTML来呈现文本
	   verticalAlign: 'top', // 垂直对齐方式
	   x: 1, //标题相对于图表内对齐的x位置
	   y // 标题相对于图表内对齐的y轴位置
     },
    xAxis: { // x轴配置项
	   accessibility: { // 为图表的 X 轴（横轴）配置无障碍访问相关属性
	     description: '对x轴的描述提供 X 轴的详细描述，屏幕阅读器会朗读该描述，帮助用户理解轴的含义',
	     enabled: undefined, // 启用或禁用 X 轴的无障碍访问功能
	     rangeDescription: '描述 X 轴的范围，例如时间跨度或数值范围'
	   }, 
	   type: 'datetime', // 设置坐标轴类型，可选值为 linear（线性轴，默认值）、logarithmic（对数轴）、datetime（时间轴）、category（类别轴）。
	   categories: ['Apples', 'Bananas', 'Oranges'], // 当 type 为 category 时使用，用于指定类别数组，每个类别对应一个数据点
	   title: {}, // 设置x轴的标题，和title一样的用法
	   labels: {
	   	 overflow: 'justify', // 决定当坐标轴标签超出图表边界时，如何处理溢出内容。allow（允许隐藏或截断）、justify（自动调整）
	   	 enabled: true, // 是否启用标签，默认为 true。
         formatter: function() { return '自定义: ' + this.value; }, // 回调函数，用于格式化标签文本
         rotation: 0, // 标签旋转的角度。
         style: {} , //设置标签的 CSS 样式，如颜色、字体大小等。
	   }
    },
    yAxis: {
      title: '',
      labels: {
        formatter: function () {
          if (that.chartChoosed.indexOf('rate') > -1) {
            return this.value + '%'
          }
        }
      }
    },
    legend: { // 可以点击某个图例显示或者隐藏某项数据
      enabled: false, // 是否显示
      align: 'center', // 水平对齐方式
      backgroundColor: '', // 背景色
    },
    tooltip: { // 提示框组件
    	formatter: function(){
			/**
			*  this.point：当前数据点的详细信息（如 x、y、name 等）。
			*  this.series：当前数据点所属的系列信息。
			*  this.percentage：在饼图中表示当前数据点的百分比。
			*  this.total：在饼图中表示所有数据点的总和。
			*/
		}
    }
    series: [
      {
      	color: '', // 颜色
      	type: 'spline', // 类型， spline代码平滑的曲线
        name: this.optionsList.filter(item => item.value === that.chartChoosed)[0].label, 
        data: this.dataList.map(item => parseFloat(item[this.chartChoosed])), // 数据
        accessibility: {}, // 配置无障碍访问相关属性
        allowPointSelect: true, // 允许通过点击图表中的数据点来选中或取消选中它们        ,
        shadow: true, // 阴影
      }
    ],
}