vue3 HighCharts自定义封装之径向条形图的实战过程

目录
  • 1.前言
  • 2.先来看效果图
  • 3.步骤详解
    • 3.1vue3安装highcharts
    • 3.2如何使用,如何按需引入
  • 4.封装RadialBar组件,包括图表的点击事件
    • 4.1RadialBar.vue思路
    • 4.2RadialBar.vue完整代码
    • 4.3使用RadialBar.vue
    • 4.4css如何实现三角箭头的生成
  • 5.总结

1.前言

目前正在做vue3的数据可视化项目,vue3的组合式api写法十分方便,可以有各种玩法,有兴趣的同学可以看我个人主页的其他文章。难点是在网上找了一圈的有关径向条形图的示例都没有好的解决方案,决心亲自下手,在其中有一些试错,所以总结出来了一套方法,如何引入Highcharts,以及如何从0开始使用径向条形图,知识点包括:

  • vue引入和配置Highcharts
  • 封装径向条形图的组件:RadialBar.vue,使用数据驱动页面
  • 径向条形图上的点击事件,获取参数,调用接口进行详情查看

2.先来看效果图

UI效果图:

实战效果图:

3.步骤详解

3.1vue3安装highcharts

$ npm install highcharts --save

 注意:在组件内部引入需要的插件,很关键,这点我踩了一下午坑,必须需要的组件部分,必须引入。比如:

import Highcharts from 'highcharts' // 必须引入

目前使用的版本:"highcharts": "^10.2.1", 依赖项:dependencies

试错:官网上是给vue提供了专门的highcharts-vue,这里我没有使用,因为highcharts-vue前提的必须安装highcharts,有兴趣的同学可以看官网Highcharts Vue | Highcharts 使用教程

3.2如何使用,如何按需引入

使用的时候,在自定义的组件里面引入官方实例下的包,举个列子:

官网的这个例子html文件里面有很多包,在vue组件里面可以这么引入:

import Highcharts from "highcharts"; //必须引入
import highchartsMore from "highcharts/highcharts-more"; // 扩展包
// import exporting from "highcharts/modules/exporting"; // 导出图例包
// import exportData from "highcharts/modules/export-data"; //导出数据包
// import accessibility from "highcharts/modules/accessibility"; // 辅助类配置图表可访问性包 可以阅读官网 https://api.highcharts.com.cn/highcharts/accessibility.highContrastTheme.html
highchartsMore(Highcharts);
// exporting(Highcharts);
// exportData(Highcharts);
// accessibility(Highcharts);

其实真正用到的也就两个包,其他是导出,和辅助类的包,但是highcharts支持3d渲染,如果用到3d效果,必须引入3d的包,比如3d漏斗图:

import highcharts3d from "highcharts/highcharts-3d";
import funnel3d from "highcharts/modules/funnel3d"; 

4.封装RadialBar组件,包括图表的点击事件

4.1RadialBar.vue思路

接受props.list数据用于驱动图表页面,回调点击事件方法给父组件使用,父组件通过响应式的数据再传递参数给右侧的拒绝原因分析组件:

接受props:

const props = defineProps({
  list: Array,
});

点击事件和回调函数:

    series: [
      {
        name: "跳过金额",
        data: props.list.map((item) => item.m1),
        events: {
          click: function (e: any) {
            chartClick(e);
          },
        },
      },
]

const emit = defineEmits(["chartsParams"]);
function chartClick(data) {
  emit("chartsParams", data);
  console.log(data.point, "data");
}

4.2RadialBar.vue完整代码

<!--功能说明: 资产规划路由地图:: 径向条形图-->
<template>
  <div class="radial-bar" id="RadialBar"></div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive } from "@vue/runtime-core";
import { number } from "echarts";
import Highcharts from "highcharts"; //必须引入
import highchartsMore from "highcharts/highcharts-more"; // 扩展包
// import exporting from "highcharts/modules/exporting"; // 导出图例包
// import exportData from "highcharts/modules/export-data"; //导出数据包
// import accessibility from "highcharts/modules/accessibility"; // 辅助类配置图表可访问性包 可以阅读官网 https://api.highcharts.com.cn/highcharts/accessibility.highContrastTheme.html
highchartsMore(Highcharts);
// exporting(Highcharts);
// exportData(Highcharts);
// accessibility(Highcharts);
const props = defineProps({
  list: Array,
});

function getCharts() {
  Highcharts.chart("RadialBar", {
    colors: ["#DDDDDD", "#3B7FA3", "#FF0000"], // 颜色区域
    chart: {
      type: "column",
      inverted: true,
      polar: true,
    },
    title: {
      text: "",
    },
    legend: {
      enabled: true,
      verticalAlign: "top",
      symbolHeight: 8,
      itemStyle: {
        fontSize: 12,
      },
    },
    tooltip: {
      outside: true,
    },
    pane: {
      size: "75%",
      endAngle: 270,
      center: ["50%", "50%"], // 控制图表位置
    },
    xAxis: {
      tickInterval: 1,
      labels: {
        align: "right",
        useHTML: true,
        allowOverlap: true,
        step: 1,
        y: 4,
        style: {
          fontSize: "12px",
        },
      },
      lineWidth: 0,
      categories: props.list.map((item) => item.categories),
      // [
      //   "资金方  <span>id</span>",
      //   "资金方",
      //   "资金方",
      //   "资金方",
      //   "资金方",
      //   "资金方",
      //   "资金方",
      //   "资金方",
      //   "资金方",
      //   "资金方",
      // ],
    },
    yAxis: {
      lineWidth: 0,
      tickInterval: 25,
      reversedStacks: false,
      endOnTick: true,
      showLastLabel: true,
      style: {
        fontSize: "14px",
      },
    },
    plotOptions: {
      column: {
        stacking: "normal",
        borderWidth: 0,
        pointPadding: 0,
        groupPadding: 0.15,
      },
    },
    credits: {
      enabled: false, // 禁用版权信息
    },
    series: [
      {
        name: "跳过金额",
        data: props.list.map((item) => item.m1),
        events: {
          click: function (e: any) {
            chartClick(e);
          },
        },
      },
      {
        name: "通过金额",
        data: props.list.map((item) => item.m2),
        events: {
          click: function (e: any) {
            chartClick(e);
          },
        },
      },
      {
        name: "拒绝金额",
        data: props.list.map((item) => item.m3),
        events: {
          click: function (e: any) {
            chartClick(e);
          },
        },
      },
    ],
  });
}
const emit = defineEmits(["chartsParams"]);
function chartClick(data) {
  emit("chartsParams", data);
  console.log(data.point, "data");
}
onMounted(() => {
  nextTick(() => {
    getCharts();
  });
});
</script>

<style lang="less" scoped>
.radial-bar {
  height: 550px;
  width: 100%;
}
</style>

4.3使用RadialBar.vue

    <RadialBar :list="list" @chartsParams="chartsParams" />

数据模拟:

const list = ref([]);
for (let i = 0; i < 10; i++) {
  list.value.push({
    categories: "资金方" + i + 1, // 名称
    m1: 27 + i * 2, // 跳过金额
    m2: 21 + i * 2, // 通过金额
    m3: 20 + i * 2, // 拒绝金额
  });
}
const chartsParamsObj = ref({});
function chartsParams(data: any) {
  chartsParamsObj.value = data;
  console.log(data, "chartsParams");
}

4.4css如何实现三角箭头的生成

图例:

方法:

  .line-arrow {
    width: 30%;
    // height: 1px;
    border-bottom: 1px solid #7e888e;
    height: 25px;
    text-align: right;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #7e888e;
    padding-right: 20px;
    align-self: center;
    position: relative;
    &:after {
      content: "";
      position: absolute;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 8px solid #7e888e;
      border-right: 5px solid transparent;
      top: 19px;
      right: -10px;
    }
  }

5.总结

在做数据平台开发时候,大数据驱动页面的情况很常见,并且大数据的展示,一般以图表类,居多,掌握一种图表往往不够,比如会echarts,但是 echarts有很多图表效果满足不了需求,就如现在我开发的径向条形图,echarts很难实现,学习highcharts是有成本的,本文能希望能你在highchart的使用上有所帮助。通过一种使用,其他的举一反三

到此这篇关于vue3 HighCharts自定义封装之径向条形图的文章就介绍到这了,更多相关vue3 HighCharts封装径向条形图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue 中使用vue2-highcharts实现top功能的示例

    1.要实现的效果如下图: 2.首先项目中引用vue2-highcharts package.json中如下: 在命令行中输入: cnpm install vue2-highcharts 3.页面代码如下: <template> <div > <div> <div id="transparent-header" class="rank-head container" > <img src="../asse

  • vue使用Highcharts实现3D饼图

    本文实例为大家分享了vue使用Highcharts实现3D饼图的具体代码,供大家参考,具体内容如下 1.安装vue-highcharts和highcharts npm install vue-highcharts --save npm install highcharts --save 2.option.js let all={     pie:{         chart: {             type: 'pie',             options3d:          

  • vue使用hightcharts自定义图例点击事件

    本文实例为大家分享了vue使用hightcharts自定义图例点击事件的具体代码,供大家参考,具体内容如下 highcharts图表自带的图例点击事件是:点击某个显示/隐藏的图例,该图例对应的series就隐藏/显示. 需求方这边的需求是: 1.默认全部展示所有分类2.点击某一个分类,则隐藏其他分类3.如果再次点击这个分类,则全部显示4.如果点击了A,再点击了B,则显示A和B 于是乎只能自定义图例点击事件. // 数据列展示/隐藏的逻辑函数 getVisibleMode(series, seri

  • vue使用Highcharts实现不同高度的3D环形图

    本文实例为大家分享了Highcharts实现不同高度的3D环形图的具体代码,供大家参考,具体内容如下 要实现的效果: 完整代码如下: // 修改3d饼图绘制过程 var each = Highcharts.each,     round = Math.round,     cos = Math.cos,     sin = Math.sin,     deg2rad = Math.deg2rad; Highcharts.wrap(Highcharts.seriesTypes.pie.protot

  • 在Vue中使用highCharts绘制3d饼图的方法

    highcharts是国外知名基于javascript的图表库.由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖,所以弃用. 接下来,给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法. 首先使用 npm在你的项目中安装vue-highcharts npm install vue-highcharts --save 由于vue-highcharts依赖于highcharts,我们还需要安装后者 npm install highcharts

  • vue+highcharts实现3D饼图效果

    本文实例为大家分享了vue+highcharts实现3D饼图效果的具体代码,供大家参考,具体内容如下 这是最终效果 <template> <div class="big-box">   <div class="com-container" ref="container" style="width:380px;height:300px;">   </div>   <div c

  • 在vue项目中引入highcharts图表的方法

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="chart" id="myChart" > <div class="emcs_charts" :id="id" ></div&

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue3 HighCharts自定义封装之径向条形图的实战过程

    目录 1.前言 2.先来看效果图 3.步骤详解 3.1vue3安装highcharts 3.2如何使用,如何按需引入 4.封装RadialBar组件,包括图表的点击事件 4.1RadialBar.vue思路 4.2RadialBar.vue完整代码 4.3使用RadialBar.vue 4.4css如何实现三角箭头的生成 5.总结 1.前言 目前正在做vue3的数据可视化项目,vue3的组合式api写法十分方便,可以有各种玩法,有兴趣的同学可以看我个人主页的其他文章.难点是在网上找了一圈的有关径

  • vue3+vite自定义封装vue组件发布到npm包的全过程

    目录 创建项目 创建组件 导出组件 使用vite构建 打包 注册->登录npm 发布前准备 发布到npm 参考: 总结 创建项目 “vue”: “^3.2.8” “vite”: “^2.5.2” 习惯用HB的直接用创建vue3项目即可 或 npm init vite@latest 创建组件 打开项目 在src/components文件夹下新增文件,我这里叫TestBtn.vue <template> <button>我是测试要发布的按钮组件</button> &l

  • vue3.0自定义指令(drectives)知识点总结

    在大多数情况下,你都可以操作数据来修改视图,或者反之.但是还是避免不了偶尔要操作原生 DOM,这时候,你就能用到自定义指令. 举个例子,你想让页面的文本框自动聚焦,在没有学习自定义指令的时候,我们可能会这么做. const app = Vue.createApp({ mounted(){ this.$refs.input.focus(); }, template: `<input type="text" ref="input" />`, }); 在mou

  • vue3递归组件封装的全过程记录

    目录 前言 1.递归组件 2.右键菜单组件 总结 前言 今天在写项目时,遇到一个自定义右键菜单的需求.在菜单中还有子菜单,所以这个时候就要用到递归组件了.所以写下这篇文章来记录一下自己编写递归组件的过程. 1.递归组件    递归组件,顾名思义就是在组件本身内部调用自身.所以我们先构建一个组件,并在自身内部调用自身.常见的递归组件就是我们项目中经常会用到的树组件了.下面就是我自己实现的一个能够满足项目需求的递归组件的源码. <template> <ul class="list-

  • Vue3 中自定义插件的实现方法

    目录 1. Vue 插件 2. 自定义插件 2.1 基本用法 2.2 加入组件 2.3 加入指令 2.4 provide & inject 3. 小结 最近在录 TienChin 项目,项目涉及到了 Vue 中插件的定义,因此整了这么一篇文章,手把手教大家在 Vue3 中定义插件,这个技能掌握了,就可以看懂 TienChin 前端代码了. 1. Vue 插件 在 Vue 中,一些简单的功能,我们可以直接定义为全局方法,然后挂到 Vue 上就能使用了,例如在 vhr 中,我们将网络请求方法进行封装

  • C++自定义封装socket操作业务类完整实例

    本文实例讲述了C++自定义封装socket操作业务类.分享给大家供大家参考,具体如下: Linux下C++封装socket操作的工具类(自己实现) socketconnector.h #ifndef SOCKETCONNECTOR_H #define SOCKETCONNECTOR_H #include "global.h" using namespace std; class SocketConnector { public: typedef enum { ENormal, EOth

  • Android自定义封装banner组件

    自定义封装 banner 组件,供大家参考,具体内容如下 1. 效果图预览  2.基本功能 一个简单方便的轮播图组件,基于viewpager 基础上进行的封装. 可设置 项目中图片,网络图片, View: 支持循环自动播放,手势滑动切换,item点击事件,可设置 点点的样式宽高.颜色.大小.位置 : 可设置蒙层:可设置 是否允许滑动:可设置 是否允许循环. 3.基本实现 1). 自定义属性 <declare-styleable name="BannerLayoutStyle"&g

  • java自定义封装StringUtils常用工具类

    自定义封装StringUtils常用工具类,供大家参考,具体内容如下 package com.demo.utils; import java.util.ArrayList; import java.util.List; import java.util.Map; /** * 字符串操作工具类 * @author dongyangyang * @Date 2016/12/28 23:12 * @Version 1.0 * */ public class StringUtils { /** * 首字

  • Laravel自定义 封装便捷返回Json数据格式的引用方法

    一般返回数据格式 return response()->json(['status' => 'success','code' => 200,'message' => '关注成功']); return response()->json(['status' => 'fail','code' => 500,'error' => '关注失败',]); 基类控制器 <?php namespace App\Http\Controllers; use Illumin

  • Java JDBC自定义封装工具类的步骤和完整代码

    封装JDBC工具类的作用可以优化代码,提高开发效率 步骤 ① 创建配置文件(config.properties),用于存放注册驱动和连接数据库时所需要的参数值 ② 自定义一个类(JDBCUtils.java) ③ 实现构造私有方法 private JDBCUtils(){} ④ 声明所需要的配置变量 private static String driverClass; private static String url; private static String username; priva

随机推荐