vue3?HighCharts自定義封裝之徑向條形圖的實(shí)戰(zhàn)過(guò)程
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)配置圖表可訪問(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)配置圖表可訪問(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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue在chrome44偶現(xiàn)點(diǎn)擊子元素事件無(wú)法冒泡的解決方法
這篇文章主要給大家介紹了關(guān)于Vue在chrome44偶現(xiàn)點(diǎn)擊子元素事件無(wú)法冒泡的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
Vue?如何關(guān)掉響應(yīng)式問(wèn)題
這篇文章主要介紹了Vue?如何關(guān)掉響應(yīng)式問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue自定義全局組件實(shí)現(xiàn)彈框案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue清除定時(shí)器setInterval優(yōu)化方案分享
這篇文章主要介紹了Vue清除定時(shí)器setInterval優(yōu)化方案分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
今天小編就為大家分享一篇vue綁定事件后獲取綁定事件中的this方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
Vue開(kāi)發(fā)中常見(jiàn)的套路和技巧總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue開(kāi)發(fā)中常見(jiàn)的套路和技巧的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
vue項(xiàng)目本地開(kāi)發(fā)使用Nginx配置代理后端接口問(wèn)題
這篇文章主要介紹了vue項(xiàng)目本地開(kāi)發(fā)使用Nginx配置代理后端接口問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽(tīng)器的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 雙向數(shù)據(jù)綁定的實(shí)現(xiàn)學(xué)習(xí)之監(jiān)聽(tīng)器的實(shí)現(xiàn)方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了淺談Vue 自動(dòng)化部署打包上線，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
vite多頁(yè)面配置項(xiàng)目實(shí)戰(zhàn)
vite官方文檔中有關(guān)于多頁(yè)面應(yīng)用模式如果配置的說(shuō)明,下面這篇文章主要給大家介紹了關(guān)于vite多頁(yè)面配置的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04