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

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

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

1.前言

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

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

2.先來(lái)看效果圖

UI效果圖：

實(shí)戰(zhàn)效果圖：

3.步驟詳解

3.1vue3安裝highcharts

$ npm install highcharts --save

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

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

目前使用的版本："highcharts": "^10.2.1", 依賴(lài)項(xiàng)：dependencies

試錯(cuò)：官網(wǎng)上是給vue提供了專(zhuān)門(mén)的highcharts-vue，這里我沒(méi)有使用，因?yàn)閔ighcharts-vue前提的必須安裝highcharts，有興趣的同學(xué)可以看官網(wǎng) Highcharts Vue | Highcharts 使用教程

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

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

官網(wǎng)的這個(gè)例子html文件里面有很多包，在vue組件里面可以這么引入：

import Highcharts from "highcharts"; //必須引入
import highchartsMore from "highcharts/highcharts-more"; // 擴(kuò)展包
// import exporting from "highcharts/modules/exporting"; // 導(dǎo)出圖例包
// import exportData from "highcharts/modules/export-data"; //導(dǎo)出數(shù)據(jù)包
// import accessibility from "highcharts/modules/accessibility"; // 輔助類(lèi)配置圖表可訪(fǎng)問(wèn)性包 可以閱讀官網(wǎng) https://api.highcharts.com.cn/highcharts/accessibility.highContrastTheme.html
highchartsMore(Highcharts);
// exporting(Highcharts);
// exportData(Highcharts);
// accessibility(Highcharts);

其實(shí)真正用到的也就兩個(gè)包，其他是導(dǎo)出，和輔助類(lèi)的包，但是highcharts支持3d渲染，如果用到3d效果，必須引入3d的包，比如3d漏斗圖：

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

4.封裝RadialBar組件，包括圖表的點(diǎn)擊事件

4.1RadialBar.vue思路

接受props.list數(shù)據(jù)用于驅(qū)動(dòng)圖表頁(yè)面，回調(diào)點(diǎn)擊事件方法給父組件使用，父組件通過(guò)響應(yīng)式的數(shù)據(jù)再傳遞參數(shù)給右側(cè)的拒絕原因分析組件：

接受props:

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

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

    series: [
      {
        name: "跳過(guò)金額",
        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完整代碼

<!--功能說(shuō)明: 資產(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"; // 擴(kuò)展包
// import exporting from "highcharts/modules/exporting"; // 導(dǎo)出圖例包
// import exportData from "highcharts/modules/export-data"; //導(dǎo)出數(shù)據(jù)包
// import accessibility from "highcharts/modules/accessibility"; // 輔助類(lèi)配置圖表可訪(fǎng)問(wèn)性包 可以閱讀官網(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: "跳過(guò)金額",
        data: props.list.map((item) => item.m1),
        events: {
          click: function (e: any) {
            chartClick(e);
          },
        },
      },
      {
        name: "通過(guò)金額",
        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, // 名稱(chēng)
    m1: 27 + i * 2, // 跳過(guò)金額
    m2: 21 + i * 2, // 通過(guò)金額
    m3: 20 + i * 2, // 拒絕金額
  });
}
const chartsParamsObj = ref({});
function chartsParams(data: any) {
  chartsParamsObj.value = data;
  console.log(data, "chartsParams");
}

4.4css如何實(shí)現(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ù)平臺(tái)開(kāi)發(fā)時(shí)候，大數(shù)據(jù)驅(qū)動(dòng)頁(yè)面的情況很常見(jiàn)，并且大數(shù)據(jù)的展示，一般以圖表類(lèi)，居多，掌握一種圖表往往不夠，比如會(huì)echarts，但是 echarts有很多圖表效果滿(mǎn)足不了需求，就如現(xiàn)在我開(kāi)發(fā)的徑向條形圖，echarts很難實(shí)現(xiàn)，學(xué)習(xí)highcharts是有成本的，本文能希望能你在highchart的使用上有所幫助。通過(guò)一種使用，其他的舉一反三

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

您可能感興趣的文章: