vue3?HighCharts自定義封裝之徑向條形圖的實戰(zhàn)過程

更新時間：2022年09月21日 10:28:37 作者：KinHKin(五年前端)

highcharts是國外知名基于javascript的圖表庫,下面這篇文章主要給大家介紹了關(guān)于vue3?HighCharts自定義封裝之徑向條形圖的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

1.前言

目前正在做vue3的數(shù)據(jù)可視化項目，vue3的組合式api寫法十分方便，可以有各種玩法，有興趣的同學可以看我個人主頁的其他文章。難點是在網(wǎng)上找了一圈的有關(guān)徑向條形圖的示例都沒有好的解決方案，決心親自下手，在其中有一些試錯，所以總結(jié)出來了一套方法，如何引入Highcharts，以及如何從0開始使用徑向條形圖，知識點包括：

vue引入和配置Highcharts
封裝徑向條形圖的組件：RadialBar.vue，使用數(shù)據(jù)驅(qū)動頁面
徑向條形圖上的點擊事件，獲取參數(shù)，調(diào)用接口進行詳情查看

2.先來看效果圖

UI效果圖：

實戰(zhàn)效果圖：

3.步驟詳解

3.1vue3安裝highcharts

$ npm install highcharts --save

注意：在組件內(nèi)部引入需要的插件，很關(guān)鍵，這點我踩了一下午坑，必須需要的組件部分，必須引入。比如：

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

目前使用的版本："highcharts": "^10.2.1", 依賴項：dependencies

試錯：官網(wǎng)上是給vue提供了專門的highcharts-vue，這里我沒有使用，因為highcharts-vue前提的必須安裝highcharts，有興趣的同學可以看官網(wǎng) Highcharts Vue | Highcharts 使用教程

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

使用的時候，在自定義的組件里面引入官方實例下的包，舉個列子：

官網(wǎng)的這個例子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"; //導出數(shù)據(jù)包
// import accessibility from "highcharts/modules/accessibility"; // 輔助類配置圖表可訪問性包 可以閱讀官網(wǎng) 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數(shù)據(jù)用于驅(qū)動圖表頁面，回調(diào)點擊事件方法給父組件使用，父組件通過響應(yīng)式的數(shù)據(jù)再傳遞參數(shù)給右側(cè)的拒絕原因分析組件：

接受props:

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

點擊事件和回調(diào)函數(shù)：

    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完整代碼

<!--功能說明: 資產(chǎn)規(guī)劃路由地圖:: 徑向條形圖-->
<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"; //導出數(shù)據(jù)包
// import accessibility from "highcharts/modules/accessibility"; // 輔助類配置圖表可訪問性包 可以閱讀官網(wǎng) 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"], // 顏色區(qū)域
    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, // 禁用版權(quán)信息
    },
    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" />

數(shù)據(jù)模擬：

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如何實現(xiàn)三角箭頭的生成

圖例：

方法：

 
  .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.總結(jié)

在做數(shù)據(jù)平臺開發(fā)時候，大數(shù)據(jù)驅(qū)動頁面的情況很常見，并且大數(shù)據(jù)的展示，一般以圖表類，居多，掌握一種圖表往往不夠，比如會echarts，但是 echarts有很多圖表效果滿足不了需求，就如現(xiàn)在我開發(fā)的徑向條形圖，echarts很難實現(xiàn)，學習highcharts是有成本的，本文能希望能你在highchart的使用上有所幫助。通過一種使用，其他的舉一反三

到此這篇關(guān)于vue3 HighCharts自定義封裝之徑向條形圖的文章就介紹到這了,更多相關(guān)vue3 HighCharts封裝徑向條形圖內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: