在vue项目中引入highcharts图表

最新推荐文章于 2024-05-13 19:07:05 发布

小约翰仓鼠

最新推荐文章于 2024-05-13 19:07:05 发布

阅读量2k

点赞数

分类专栏： vue2 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/djh052900/article/details/124916098

版权

vue2 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

highcharts官网

https://www.highcharts.com.cn/

第一步：安装Highcharts

npm install highcharts --save

第二步：导入chart组件，按需求导入一种即可

1、可以满足饼图，柱状图、折线图等基础图例

// 导入chart组件
import Highcharts from "highcharts/highstock";
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(Highcharts);

2、在1、的基础上可满足3D图等复杂图例

// 导入chart组件
const Highcharts = require('highcharts');
const Highcharts3D = require('highcharts/highcharts-3d');
const cylinder = require('highcharts/modules/cylinder');
const funnel3d = require('highcharts/modules/funnel3d');
Highcharts3D(Highcharts);
funnel3d(Highcharts);
cylinder(Highcharts);

使用

<template>
  <div class="container">
    <div id="myChart"></div>
  </div>
</template>

<script>
// 导入chart组件
// import Highcharts from "highcharts/highstock";
// import HighchartsMore from "highcharts/highcharts-more";
// HighchartsMore(Highcharts);

// 导入chart组件
const Highcharts = require('highcharts');
const Highcharts3D = require('highcharts/highcharts-3d');
const cylinder = require('highcharts/modules/cylinder');
const funnel3d = require('highcharts/modules/funnel3d');
Highcharts3D(Highcharts);
funnel3d(Highcharts);
cylinder(Highcharts);

export default {
  mounted: function () {
    this.HighchartsData();
  },
  methods: {
    HighchartsData() {
      Highcharts.chart("myChart", {
        // 配置
      });
    },
  },
};
</script>

<style scoped>

</style>