vue3?HighCharts自定義封裝之徑向條形圖的實戰(zhàn)過程
更新時間：2022年09月21日 10:28:37 作者：KinHKin(五年前端)
highcharts是國外知名基于javascript的圖表庫,下面這篇文章主要給大家介紹了關于vue3?HighCharts自定義封裝之徑向條形圖的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
1.前言
目前正在做vue3的數據可視化項目，vue3的組合式api寫法十分方便，可以有各種玩法，有興趣的同學可以看我個人主頁的其他文章。難點是在網上找了一圈的有關徑向條形圖的示例都沒有好的解決方案，決心親自下手，在其中有一些試錯，所以總結出來了一套方法，如何引入Highcharts，以及如何從0開始使用徑向條形圖，知識點包括：
- vue引入和配置Highcharts
- 封裝徑向條形圖的組件：RadialBar.vue，使用數據驅動頁面
- 徑向條形圖上的點擊事件，獲取參數，調用接口進行詳情查看
2.先來看效果圖
UI效果圖：
實戰(zhàn)效果圖：
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完整代碼
<!--功能說明: 資產規(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"; //導出數據包
// 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"], // 顏色區(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, // 禁用版權信息
},
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如何實現(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.總結
在做數據平臺開發(fā)時候，大數據驅動頁面的情況很常見，并且大數據的展示，一般以圖表類，居多，掌握一種圖表往往不夠，比如會echarts，但是 echarts有很多圖表效果滿足不了需求，就如現(xiàn)在我開發(fā)的徑向條形圖，echarts很難實現(xiàn)，學習highcharts是有成本的，本文能希望能你在highchart的使用上有所幫助。通過一種使用，其他的舉一反三
到此這篇關于vue3 HighCharts自定義封裝之徑向條形圖的文章就介紹到這了,更多相關vue3 HighCharts封裝徑向條形圖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vant3中使用List組件的一些坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要給大家介紹了關于Vue項目中最新用到的一些實用小技巧，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
今天小編就為大家分享一篇Vuejs2 + Webpack框架里,模擬下載的實例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue axios全局攔截 get請求、post請求、配置請求的實例代碼
這篇文章主要介紹了Vue axios全局攔截 get請求、post請求、配置請求的實例代碼,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue的v-if里實現(xiàn)調用函數方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue.js?前端項目在常見?Web?服務器上的部署配置過程
Web服務器支持多種編程語言，如 PHP，JavaScript，Ruby，Python 等，并且支持動態(tài)生成 Web 頁面，這篇文章主要介紹了Vue.js?前端項目在常見?Web?服務器上的部署配置,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue-router權限控制(簡單方式)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10
本文章通過實現(xiàn)一個vue-dialog的彈出層組件，然后附加說明如果發(fā)布此包到npm，且能被其他項目使用。本文給大家介紹的非常詳細，需要的的朋友參考下2017-03-03
這篇文章主要介紹了vue 動態(tài)綁定背景圖片的方法,在文末給大家介紹了vue如何給v-for循環(huán)的標簽添加背景圖片，需要的朋友參考下吧2018-08-08
這篇文章主要介紹了vue開發(fā)中調用微信jssdk的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04