vue使用highcharts自定義儀表盤圖表

更新時間：2022年03月27日 16:44:05 作者：何良語

這篇文章主要為大家詳細(xì)介紹了vue使用highcharts自定義儀表盤圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

使用highchart圖表框架實現(xiàn)一個自定義的類似下圖的圖表，供大家參考，具體內(nèi)容如下

1. 原理

實際上就是4個餅圖疊起來（可以這么理解），中間一個完整的圓和三個大小不一的圓圈

2. 技術(shù)點(diǎn)

使用的是highchart中的Highstock

圖表類型是solidgauge

因為餅圖不支持陰影效果（可能是我沒找到），所以上圖中帶的一點(diǎn)類似陰影的效果，看起來有一點(diǎn)點(diǎn)立體的感覺用的是徑向漸變屬性來實現(xiàn)的

其中用到了圖表的時間屬性：鼠標(biāo)移出和移入事件

數(shù)據(jù)標(biāo)簽字符串格式化函數(shù)

3. 實現(xiàn)

因為使用的是Highstock，所以需要引入除highchart之外的其他文件，highchart使用npm安裝，所有的文件都會下載下來，直接使用就行，項目使用的是vue，包的引入方式如下：

import Highcharts from 'highcharts';
import highchartsMore from 'highcharts/highcharts-more';
highchartsMore(Highcharts);

以下是實現(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: { // 四個圓圈的背景樣式
? ? ? startAngle: 0, // 開始的角度0
? ? ? endAngle: 360, // 結(jié)束角度360
? ? ? background: [{
? ? ? ? outerRadius: '112%', // 圓環(huán)外部圈大小
? ? ? ? innerRadius: '90%', // 圓環(huán)內(nèi)部圈大小
? ? ? ? backgroundColor: { // 因為要帶一點(diǎn)點(diǎn)立體的效果，使用了徑向漸變
? ? ? ? ? radialGradient: { cx: 0.5, cy: 0.5, r: 0.5 }, // cx，cy相對于圖形的豎直和水平位置，r時漸變的半徑
? ? ? ? ? stops: [
? ? ? ? ? ? [0, '#aaa'],
? ? ? ? ? ? [1, '#fff']
? ? ? ? ? ]
? ? ? ? },
? ? ? ? borderWidth: 0,
? ? ? ? borderColor: '#C3CCDA',
? ? ? ? className: 'boxshadow' // 可以給每一個面板綁定一個自定義的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)移出或移入時圓環(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ù)，只有一個顯示
? ? ? name: '滎陽市',
? ? ? data: [{
? ? ? ? color: '#6ED0F0',
? ? ? ? radius: '35%',
? ? ? ? innerRadius: '0',
? ? ? ? y: 0,
? ? ? ? dataLabels: {
? ? ? ? ? borderWidth: 0,
? ? ? ? ? color: '#616C80',
? ? ? ? ? enabled: true,
? ? ? ? ? formatter: function () {
? ? ? ? ? ? return `滎陽市`;
? ? ? ? ? },
? ? ? ? ? x: 0,
? ? ? ? ? y: -12,
? ? ? ? }
? ? ? }]
? ? }]
};