1、安装命令
npm install highcharts --save
2、在页面中按需引入
import Highcharts from 'highcharts/highstock'; import HighchartsMore from 'highcharts/highcharts-more'; import HighchartsDrilldown from 'highcharts/modules/drilldown'; import Highcharts3D from 'highcharts/highcharts-3d'; HighchartsMore(Highcharts); HighchartsDrilldown(Highcharts); Highcharts3D(Highcharts);
3、初始化图表
mounted() { var that = this; that.$el.style.height = that.$refs.chart_gauge.offsetHeight - that.torem(100) + 'px'; console.log(this.$refs.chart_gauge.offsetHeight, 'qq'); switch (that.title) { case 'cpu': that.text1 = 'AP平均cpu利用率'; that.text2 = 'AC平均cpu利用率'; break; case '内存': that.text1 = 'AP平均内存利用率'; that.text2 = 'AC平均内存利用率'; break; } this.options = { chart: { type: 'gauge', backgroundColor: 'transparent' // height: that.torem(500) }, title: { text: null }, labels: { items: [{ style: { left: that.torem(180), top: that.torem(280), fontSize: that.torem(42), fontWeight: 'bold', fontFamily: '微软雅黑' } // html: '<span style="color:#C02316">{y}</span>' }] }, pane: [{ startAngle: -100, endAngle: 100, background: null, center: ['25%', '65%'], size: '80%' }, { startAngle: -100, endAngle: 100, background: null, center: ['75%', '65%'], size: '80%' }], yAxis: [{ min: 0, max: 100, minorTickInterval: 'auto', minorTickWidth: that.torem(2), minorTickLength: that.torem(20), minorTickPosition: 'inside', minorTickColor: '#00bfd3', tickPixelInterval: 30, tickWidth: that.torem(4), tickPosition: 'inside', tickLength: that.torem(26), tickColor: '#48c7ff', tickInterval: 10, // 间隔 // tickmarkPlacement: 'on', // labels: { // // step: 20, // rotation: 'auto', // minRange: 10, // padding: 200 // }, lineColor: 'transparent', labels: { style: { color: '#48c7ff', fontSize: that.torem(28), html: ` < span > < /span>` / / step: 20 }, distance: that.offetY }, // plotBands: [ // { // from: 0, // to: 6, // color: '#C02316', // innerRadius: '100%', // outerRadius: '105%' // } // ], pane: 0, title: { text: this.text1, verticalAlign: 'bottom', style: { color: '#fff', fontSize: that.torem(28) }, y: that.torem(220) } }, { min: 0, max: 100, minorTickInterval: 'auto', minorTickWidth: that.torem(2), minorTickLength: that.torem(20), minorTickPosition: 'inside', minorTickColor: '#00bfd3', tickPixelInterval: 30, tickWidth: that.torem(4), tickPosition: 'inside', tickLength: that.torem(26), tickColor: '#48c7ff', tickInterval: 10, // 间隔 tickmarkPlacement: 'on', lineColor: 'transparent', labels: { style: { color: '#48c7ff', fontSize: that.torem(28) }, distance: that.offetY }, // plotBands: [ // { // from: 0, // to: 6, // color: '#C02316', // innerRadius: '100%', // outerRadius: '102%' // } // ], pane: 1, title: { text: this.text2, verticalAlign: 'bottom', style: { color: '#fff', fontSize: that.torem(28) }, y: that.torem(220) } }], plotOptions: { gauge: { dataLabels: { borderWidth: 0, enabled: true, color: '#48c7ff', fontSize: that.torem(80), // format: `<span style="color:({y} > 20 ? '#48c7ff' : {y} > 80 ? '#ff6748' : '#13c792');font-size:${that.torem(80)}px">{y}%</span>`, format: ` < span > { y } % < /span>` / / formatter() { // console.log('<span style="color:red">' + this.point.y + '%</span>') // // '<span style="color:'+(this.point.y > 20 ? '#48c7ff' : this.point.y > 80 ? '#ff6748' : '#13c792')+'">' + this.point.y + '%</span>' // '<span style="color:red">' + this.point.y + '%</span>' // } }, dial: { radius: '80%', // 半径:指针长度 backgroundColor: '#1b4b77', //指针背景色 borderColor: 'black', borderWidth: that.torem(1), baseWidth: that.torem(10), topWidth: that.torem(1), baseLength: '90%', // of radius rearLength: '15%' //尾巴长度 }, borderWidth: 0 } }, series: [{ data: [80], yAxis: 0 }, { data: [70], yAxis: 1 }] }; this.initChart(); },
methods: { initChart(options) { this.chart1 = new Highcharts.Chart(this.$refs.chart_gauge, this.options); var title_AP_cpu = { text: 'AP平均cpu利用率' }; var title_AC_cpu = { text: 'AC平均cpu利用率' }; var title_AP_RAM = { text: 'AP平均内存利用率' }; var title_AC_RAM = { text: 'AC平均内存利用率' }; } }