vue使用highcharts自定義儀表盤圖表
更新時(shí)間：2022年03月27日 16:44:05 作者：何良語
這篇文章主要為大家詳細(xì)介紹了vue使用highcharts自定義儀表盤圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
使用highchart圖表框架實(shí)現(xiàn)一個(gè)自定義的類似下圖的圖表，供大家參考，具體內(nèi)容如下
1. 原理
實(shí)際上就是4個(gè)餅圖疊起來（可以這么理解），中間一個(gè)完整的圓和三個(gè)大小不一的圓圈
2. 技術(shù)點(diǎn)
使用的是highchart中的Highstock
圖表類型是solidgauge
因?yàn)轱瀳D不支持陰影效果（可能是我沒找到），所以上圖中帶的一點(diǎn)類似陰影的效果，看起來有一點(diǎn)點(diǎn)立體的感覺用的是徑向漸變屬性來實(shí)現(xiàn)的
其中用到了圖表的時(shí)間屬性：鼠標(biāo)移出和移入事件
數(shù)據(jù)標(biāo)簽字符串格式化函數(shù)
3. 實(shí)現(xiàn)
因?yàn)槭褂玫氖荋ighstock，所以需要引入除highchart之外的其他文件，highchart使用npm安裝，所有的文件都會(huì)下載下來，直接使用就行，項(xiàng)目使用的是vue，包的引入方式如下：
import Highcharts from 'highcharts'; import highchartsMore from 'highcharts/highcharts-more'; highchartsMore(Highcharts);
以下是實(shí)現(xiàn)的代碼：
const charts = {
? ? chart: {
? ? ? type: 'solidgauge',
? ? ? height: '110%',
? ? ? margin: [100, 100, 70, 100], // 設(shè)置圖表距離容器組件的上下左右的邊距
? ? ? backgroundColor: { // 背景色是線性漸變
? ? ? ? linearGradient: { x1: 0, x2: 1, y1: 0, y2: 0 }, // x1,y1是左上角的坐標(biāo)點(diǎn)，x2,y2是右下角的坐標(biāo)點(diǎn)，從左到右的漸變 x1: 0, x2: 1, y1: 0, y2: 0
? ? ? ? stops: [ // 漸變顏色的分區(qū)0是起點(diǎn)，1是終點(diǎn)
? ? ? ? ? [0, '#6EB2E5'],
? ? ? ? ? [1, '#4791CB']
? ? ? ? ]
? ? ? },
? ? ? spacingTop: 50,
? ? },
? ? title: {
? ? ? text: '已完成30家企業(yè)診斷服務(wù)',
? ? ? style: { // 圖表標(biāo)題樣式
? ? ? ? fontSize: '20px',
? ? ? ? letterSpacing: '7px',
? ? ? ? color: '#fff',
? ? ? ? textShadow: '1px 0px #fff'
? ? ? }
? ? },
? ? tooltip: {
? ? ? enabled: false, // 關(guān)閉圖表自帶的提示框?qū)傩?
? ? },
? ? pane: { // 四個(gè)圓圈的背景樣式
? ? ? startAngle: 0, // 開始的角度0
? ? ? endAngle: 360, // 結(jié)束角度360
? ? ? background: [{
? ? ? ? outerRadius: '112%', // 圓環(huán)外部圈大小
? ? ? ? innerRadius: '90%', // 圓環(huán)內(nèi)部圈大小
? ? ? ? backgroundColor: { // 因?yàn)橐獛б稽c(diǎn)點(diǎn)立體的效果，使用了徑向漸變
? ? ? ? ? radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 }, // cx，cy相對于圖形的豎直和水平位置，r時(shí)漸變的半徑
? ? ? ? ? stops: [
? ? ? ? ? ? [0, '#aaa'],
? ? ? ? ? ? [1, '#fff']
? ? ? ? ? ]
? ? ? ? },
? ? ? ? borderWidth: 0,
? ? ? ? borderColor: '#C3CCDA',
? ? ? ? className: 'boxshadow' // 可以給每一個(gè)面板綁定一個(gè)自定義的class
? ? ? }, {
? ? ? ? outerRadius: '90%',
? ? ? ? innerRadius: '68%',
? ? ? ? backgroundColor: {
? ? ? ? ? radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 },
? ? ? ? ? stops: [
? ? ? ? ? ? [0, '#aaa'],
? ? ? ? ? ? [1, '#fff']
? ? ? ? ? ]
? ? ? ? },
? ? ? ? borderWidth: 0,
? ? ? ? borderColor: '#C3CCDA',
? ? ? ? className: 'boxshadow'
? ? ? }, {
? ? ? ? outerRadius: '68%',
? ? ? ? innerRadius: '35%',
? ? ? ? backgroundColor: {
? ? ? ? ? radialGradient: { cx: 0.5, cy: 0.5, r: 0.4 },
? ? ? ? ? stops: [
? ? ? ? ? ? [0, '#999'],
? ? ? ? ? ? [1, '#fff']
? ? ? ? ? ]
? ? ? ? },
? ? ? ? borderWidth: 0,
? ? ? ? borderColor: '#C3CCDA'
? ? ? }, {
? ? ? ? outerRadius: '35%',
? ? ? ? innerRadius: '0',
? ? ? ? backgroundColor: {
? ? ? ? ? radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 },
? ? ? ? ? stops: [
? ? ? ? ? ? [0, '#FFFFFF'],
? ? ? ? ? ? [0.5, '#F7FBFF'],
? ? ? ? ? ? [1, '#CEE7FF']
? ? ? ? ? ]
? ? ? ? },
? ? ? ? borderWidth: 0,
? ? ? }]
? ? },
? ? credits: {
? ? ? enabled: false, // 關(guān)閉版權(quán)標(biāo)志
? ? },
? ? yAxis: {
? ? ? min: 0, // 圓環(huán)y值的最小值
? ? ? max: 100, // 圓環(huán)y值得最大值
? ? ? lineWidth: 0,
? ? ? tickPositions: [] // 關(guān)閉刻度
? ? },
? ? plotOptions: {
? ? ? solidgauge: {
? ? ? ? dataLabels: { // 設(shè)置圖表的標(biāo)簽樣式
? ? ? ? ? enabled: true,
? ? ? ? ? style: {
? ? ? ? ? ? fontSize: '16px',
? ? ? ? ? ? textOutline: 'none',
? ? ? ? ? ? color: '#fff',
? ? ? ? ? ? letterSpacing: '1px'
? ? ? ? ? }
? ? ? ? },
? ? ? ? linecap: 'square', // ?帶顏色部分的的圓環(huán)邊角是矩形或者圓形
? ? ? ? stickyTracking: false,
? ? ? ? rounded: false,
? ? ? ? cursor: 'pointer', // 鼠標(biāo)選中樣式
? ? ? }
? ? },
? ? colors: ['#7CB5EC', '#FF5184', '#76DDFB'],
? ? series: [{
? ? ? name: '智能化',
? ? ? data: [{
? ? ? ? color: {
? ? ? ? ? radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 },
? ? ? ? ? stops: [
? ? ? ? ? ? [0, '#000'],
? ? ? ? ? ? [1, '#FF5184']
? ? ? ? ? ]
? ? ? ? },
? ? ? ? radius: '112%',
? ? ? ? innerRadius: '90%',
? ? ? ? y: 80,
? ? ? ? dataLabels: {
? ? ? ? ? borderWidth: 0,
? ? ? ? ? color: '#616C80',
? ? ? ? ? enabled: true,
? ? ? ? ? formatter: function () {
? ? ? ? ? ? return `<span style="color:#FF5184">${this.series.name}</span>` + '<span style="color: #fff;">：' + ((this.y / (80+65+50)) * 100).toFixed(2) + '%</span>';
? ? ? ? ? },
? ? ? ? ? x: -80,
? ? ? ? ? y: -170, // 自定義數(shù)據(jù)標(biāo)簽的位置
? ? ? ? },
? ? ? ? events: { // 鼠標(biāo)事件，鼠標(biāo)移出或移入時(shí)圓環(huán)大小變化
? ? ? ? ? mouseOver: function () {
? ? ? ? ? ? this.update({
? ? ? ? ? ? ? radius: '120%',
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? ? mouseOut: function () {
? ? ? ? ? ? this.update({
? ? ? ? ? ? ? radius: '112%',
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? },
? ? ? }]
? ? }, {
? ? ? name: '信息化',
? ? ? data: [{
? ? ? ? color: {
? ? ? ? ? radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 },
? ? ? ? ? stops: [
? ? ? ? ? ? [0, '#333'],
? ? ? ? ? ? [1, '#FFB958']
? ? ? ? ? ]
? ? ? ? },
? ? ? ? radius: '90%',
? ? ? ? innerRadius: '68%',
? ? ? ? y: 65,
? ? ? ? dataLabels: {
? ? ? ? ? borderWidth: 0,
? ? ? ? ? color: '#616C80',
? ? ? ? ? enabled: true,
? ? ? ? ? formatter: function () {
? ? ? ? ? ? return `<span style="color:#FFB958">${this.series.name}</span>` + '<span style="color: #fff;">：' + ((this.y / (80+65+50)) * 100).toFixed(2) + '%</span>';
? ? ? ? ? },
? ? ? ? ? x: 220,
? ? ? ? ? y: -320,
? ? ? ? },
? ? ? ? events: {
? ? ? ? ? mouseOver: function () {
? ? ? ? ? ? this.update({
? ? ? ? ? ? ? radius: '98%',
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? ? mouseOut: function () {
? ? ? ? ? ? this.update({
? ? ? ? ? ? ? radius: '90%',
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? },
? ? ? }]
? ? }, {
? ? ? name: '綠色化',
? ? ? data: [{
? ? ? ? color: '#6ED0F0',
? ? ? ? radius: '68%',
? ? ? ? innerRadius: '35%',
? ? ? ? y: 50,
? ? ? ? dataLabels: {
? ? ? ? ? borderWidth: 0,
? ? ? ? ? color: '#616C80',
? ? ? ? ? enabled: true,
? ? ? ? ? formatter: function () {
? ? ? ? ? ? return `<span style="color:${this.color}">${this.series.name}</span>` + '<span style="color: #fff;">：' + ((this.y / (80+65+50)) * 100).toFixed(2) + '%</span>';
? ? ? ? ? },
? ? ? ? ? x: -200,
? ? ? ? ? y: -320,
? ? ? ? },
? ? ? ? events: {
? ? ? ? ? mouseOver: function () {
? ? ? ? ? ? this.update({
? ? ? ? ? ? ? radius: '76%',
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? ? mouseOut: function () {
? ? ? ? ? ? this.update({
? ? ? ? ? ? ? radius: '68%',
? ? ? ? ? ? });
? ? ? ? ? },
? ? ? ? },
? ? ? }]
? ? }, { // 中間名字的圓，沒有數(shù)據(jù)，只有一個(gè)顯示
? ? ? name: '滎陽市',
? ? ? data: [{
? ? ? ? color: '#6ED0F0',
? ? ? ? radius: '35%',
? ? ? ? innerRadius: '0',
? ? ? ? y: 0,
? ? ? ? dataLabels: {
? ? ? ? ? borderWidth: 0,
? ? ? ? ? color: '#616C80',
? ? ? ? ? enabled: true,
? ? ? ? ? formatter: function () {
? ? ? ? ? ? return `滎陽市`;
? ? ? ? ? },
? ? ? ? ? x: 0,
? ? ? ? ? y: -12,
? ? ? ? }
? ? ? }]
? ? }]
};4. 問題
代碼重復(fù)較多，但暫時(shí)還沒找到更好的方法在一個(gè)統(tǒng)一的地方寫，會(huì)再優(yōu)化
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
axios請求中以params或body形式傳遞參數(shù)的區(qū)別淺析
最近在做自己項(xiàng)目中,做一個(gè)非常簡單的新增用戶場景,但是使用原生axios發(fā)送post請求的時(shí)候,還是踩了不少坑的,下面這篇文章主要給大家介紹了關(guān)于axios請求中以params或body形式傳遞參數(shù)的區(qū)別的相關(guān)資料,需要的朋友可以參考下2023-04-04
基于vue的短信驗(yàn)證碼倒計(jì)時(shí)demo
這篇文章主要介紹了基于vue的短信驗(yàn)證碼倒計(jì)時(shí)demo，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作
這篇文章主要介紹了nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue 監(jiān)聽元素前后變化值實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue計(jì)時(shí)器的實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了vue計(jì)時(shí)器的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
詳解基于iview-ui的導(dǎo)航欄路徑（面包屑）配置
這篇文章主要介紹了詳解基于iview-ui的導(dǎo)航欄路徑（面包屑）配置,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
Vue中的 nextTick 涉及到Vue中DOM的異步更新，感覺很有意思，特意了解了一下。其中關(guān)于 nextTick 的源碼涉及到不少知識，很多不太理解，暫且根據(jù)自己的一些感悟介紹下 nextTick2019-05-05
Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解
這篇文章主要介紹了Vue向下滾動(dòng)加載更多數(shù)據(jù)scroll案例詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-08-08
VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))
這篇文章主要介紹了VSCode Vue開發(fā)推薦插件和VSCode快捷鍵(小結(jié))，文中通過圖文表格介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
通常我們的項(xiàng)目會(huì)越做越大,頁面也會(huì)越來越多,隨之而來的是接口數(shù)量的增加,api統(tǒng)一管理,不管接口有多少,所有的接口都可以非常清晰,容易維護(hù),下面這篇文章主要給大家介紹了關(guān)于axios二次封裝的詳細(xì)過程與跨域問題的相關(guān)資料,需要的朋友可以參考下2022-09-09