vue中项目中使用Highcharts，实现金字塔图

阿丹爱前端

于 2022-05-04 20:04:37 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript ecmascript

本文链接：https://blog.youkuaiyun.com/dandan_zhang/article/details/124575778

本文介绍了在Vue项目中如何使用Highcharts创建金字塔图。通过在Vue项目的public/index.html引入Highcharts库，并在vue.config.js配置，然后在业务代码中编写相应的图表设置和事件处理，以实现对IE6+及移动端的良好支持。

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

官网地址：兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts

1.先看一下实现的效果，这种对比的类似金字塔的图

前置内容，vue中使用sdn的方式引用，在public文件夹下的index.html引入

<script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

在vue.config.js将Highchart对象中引入进来

Highechats的业务代码，注意，高版本以后事件js文件需要单独引入才可以使用

<template>
  <div>
    <div class="orgSale">
      <div class="header">
        <div class="btn" />
        <span class="title">价格带分析</span>
      </div>
      <div class="content">
        <div
          id="container"
          :style="{minWidth: '300px',minHeight:charHeight}"
        />
      </div>

最低0.47元/天解锁文章