vue highcharts使用

本文介绍如何在 Vue 项目中安装并使用 Highcharts 和 highcharts-vue 插件来创建 3D 图表。从安装依赖到配置 3D 效果,再到具体实现方式的详细步骤说明。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、安装 highcharts

npm install highcharts --save

2、安装highcharts-vue

npm install highcharts-vue

3、在main中引入

import HighchartsVue from 'highcharts-vue'
Vue.use(HighchartsVue)

4、使用

html代码

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

data中的数据

  data() {
    return {
      chartOptions: {
        series: [
          {
            data: [1, 2, 3], // sample data
          },
        ],	
      },
    };
  },

效果图
在这里插入图片描述

5、3d图形的使用

main.js中加入

import highcharts from 'highcharts'

import highcharts3d from 'highcharts/highcharts-3d'

highcharts3d(highcharts)

6方法任一都可

6.1 3d图形的实现(一)通过highcharts标签实现

将配置项的内容改为3d配置项的内容

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

<script>
export default {
  name: "",
  // 接收父组件传递过来的参数
  props: {},
  // 注册组件
  components: {},
  // 定义变量
  data() {
    return {
      chartOptions: {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0,
          },
        },
        title: {
          text: "2014年某网站不同浏览器访问量占比",
        },
        tooltip: {
          pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 35,
            dataLabels: {
              enabled: true,
              format: "{point.name}",
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "浏览器占比",
            data: [
              ["Firefox", 45.0],
              ["IE", 26.8],
              {
                name: "Chrome",
                y: 12.8,
                sliced: true,
                selected: true,
              },
              ["Safari", 8.5],
              ["Opera", 6.2],
              ["Others", 0.7],
            ],
          },
        ],
      },
    };
  },
  // 事件方法执行
  methods: {},
  // 页面初始化方法
  mounted() {},
  // 监听值变化
  watch: {},
  // 计算
  computed: {},
};
</script>

<style scoped lang='scss'>
</style>

效果图
在这里插入图片描述

6.2 3d图形的实现(二)通过HighCharts方法实现 (建议)

在需要的地方引入前5步的基础上

import HighCharts from 'highcharts'

全部代码


<template>
  <div>
    <div :id="id" :option="option"></div>
  </div>
</template>

<script>
import HighCharts from "highcharts";
export default {
  name: "",
  // 接收父组件传递过来的参数
  props: {},
  // 注册组件
  components: {},
  // 定义变量
  data() {
    return {
      id: "test",
      option: {
        chart: {
          type: "pie", //饼图
          options3d: {
            enabled: true, //使用3d功能
            alpha: 60, //延y轴向内的倾斜角度
            beta: 0,
          },
        },
        title: {
          text: "测试用", //图表的标题文字
        },
        subtitle: {
          text: "", //副标题文字
        },

        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            cursor: "pointer", //鼠标指针
            depth: 35, //饼图的厚度
            dataLabels: {
              enabled: true, //是否显示饼图的线形tip
            },
          },
        },
        series: [
          {
            type: "pie",
            name: "测试用1", //统一的前置词,非必须
            data: [
              ["测试1", 12], //模块名和所占比,也可以{name: '测试1',y: 12}
              ["测试2", 23],
              ["测试3", 19],
              ["测试4", 29],
            ],
          },
        ],
      },
    };
  },
  // 事件方法执行
  methods: {},
  // 页面初始化方法
  mounted() {
    HighCharts.chart(this.id, this.option)
  },
  // 监听值变化
  watch: {},
  // 计算
  computed: {},
};
</script>

<style scoped lang='scss'>
</style>



效果图
在这里插入图片描述

去掉默认title

          title: {
            text: null
          },

去掉版权

和title同级

   credits: { enabled: false},
### 如何在 Vue使用 Highcharts 创建甘特图 #### 安装依赖包 为了能够在 Vue 项目中集成并使用 Highcharts 的甘特图功能,需要安装必要的 npm 包。通过命令行工具执行如下指令来完成这些软件包的安装[^1]: ```bash npm install highcharts highcharts-gantt highcharts-vue ``` #### 配置 main.js 文件 编辑 `main.js` 文件,在其中加入以下代码片段用于初始化 Highcharts 及其 Gantt 插件,并注册组件以便可以在整个应用程序内访问它们: ```javascript import Vue from 'vue'; import Highcharts from 'highcharts/highgantt'; // 导入高版本支持甘特图的Highcharts import HighchartsVue from 'highcharts-vue'; // 初始化插件 Vue.use(HighchartsVue); ``` #### 使用甘特图表组件 创建一个新的 `.vue` 单文件组件(例如命名为 `GanttChart.vue`),并在模板部分定义 `<highcharts>` 标签作为容器元素;接着设置好选项配置对象传递给该标签属性 `options` 来定制化显示样式和数据源等内容。 下面是一个简单的例子展示如何构建一个基本的甘特图实例: ```html <template> <div class="container"> <h2>Simple Gantt Chart</h2> <highcharts :options="chartOptions"></highcharts> </div> </template> <script> export default { name: "GanttChart", data() { return { chartOptions: { title: { text: 'Project Timeline' }, series: [{ type: 'gantt', dataLabels: true, data: [ {name: 'Task A', start: Date.UTC(2023, 9, 1), end: Date.UTC(2023, 9, 7)}, {name: 'Task B', start: Date.UTC(2023, 9, 8), end: Date.UTC(2023, 9, 14)} ] }] } }; } }; </script> ``` 此段代码展示了怎样利用 JavaScript 对象字面量形式指定图表标题以及两个简单任务的时间范围信息。每个任务都有名称 (`name`) 和起始时间(`start`)与结束时间(`end`)三个字段描述它在整个项目中的位置关系[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值