本篇文章為大家展示了如何在vue項(xiàng)目中引入highcharts圖表，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

創(chuàng)新互聯(lián)公司是專業(yè)的洱源網(wǎng)站建設(shè)公司，洱源接單;提供成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行洱源網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!

npm進(jìn)行highchars的導(dǎo)入，導(dǎo)入完成后就可以進(jìn)行highchars的可視化組件開(kāi)發(fā)了

npm install highcharts --save

1、components目錄下新建一個(gè)chart.vue組件

<template>
  <div class="chart" id="myChart" >
    <div class="emcs_charts" :id="id" ></div>
  </div>
</template>
<script>
// 引入highCharts模塊
import HighCharts from 'highcharts'
// 引入這個(gè)圖表的外部資源數(shù)據(jù)
import data from '../echarts_data/chart.js'
export default {
 data() {
  // 將引入的數(shù)據(jù)寫(xiě)在自己的組件中
  let dataObj = data.bar
  return{
   id: 'chart',
   dataObj: dataObj
  }
 },
 mounted() {//鉤子函數(shù)掛載時(shí)實(shí)例化這個(gè)圖表
  // chart(參數(shù)1,參數(shù)2);第一個(gè)參數(shù)掛載組件的容器，第二個(gè)參數(shù)為圖表所需要的數(shù)據(jù)對(duì)象
  HighCharts.chart(this.id,this.dataObj)
 }
}
</script>
<style scoped lang='stylus'>
.chart{
 float left ;
 background-color #fff;
 padding 10px 0;
 margin-top 20px;
 border-radius 6px
 width 49.5%;
 .emcs_charts{
  min-width 890px;
  height 280px;
 }
}
</style>

2、chart組件建好后，開(kāi)始創(chuàng)建chart-options目錄，里面創(chuàng)建一個(gè)chart.js用來(lái)存放模擬的chart數(shù)據(jù)

如下圖我寫(xiě)的一個(gè)面積圖的數(shù)據(jù)

module.exports = {
  bar: {
    chart: {//圖表樣式
      type:'area',//指定圖表的類型,這里是面積圖
    },
    //是否啟用Labels。x，y軸默認(rèn)值都是true，如果想禁用（或不顯示）Labels，設(shè)置該屬性為false即可
    credits: {
     enabled:false
    },
    title: {//指定圖表標(biāo)題
      text: ' 設(shè)備監(jiān)控', 
      align: 'left',
      style:{
        color: '#666',
        fontSize:'16px',
      }
    },
    colors: ['rgba(86,199,99,1)','rgba(226,188,37,1)','rgba(255,133,133,1)'],
    xAxis: {//圖表的橫坐標(biāo),一個(gè)軸為{ }
      title:{//橫坐標(biāo)標(biāo)題
        text:''
      },
      //x坐標(biāo)軸的刻度值
      categories: ['4:40','4:41','4:42','4:43','4:44', '4:45', '4:46', '4:47', '4:48', '4:49', '4:50','4:51','4:52','4:53','4:54', '4:55', '4:56', '4:57', '4:58', '4:59', '5:00', '5:01', '5:02', '5:03', '5:04', '5:05', '5:06', '5:07', '5:08', '5:09', '5:10', '5:11', '5:12', '5:13', '5:14', '5:15', '5:16', '5:17', '5:18', '5:19', '5:20', '5:21', '5:22', '5:23', '5:24', '5:25', '5:26', '5:27', '5:28', '5:29', '5:30', '5:31', '5:32', '5:33', '5:34', '5:35', '5:36', '5:37', '5:38', '5:39', '5:40'], //指定x軸分組
      labels: {//坐標(biāo)軸上的刻度值（顯示間隔、樣式、單位）
       style: {
         color: '#999999'
       },
       format:'{value}pm',//刻度值的單位
       align: 'center'
      },
      lineColor: '#dfdfdf',//坐標(biāo)軸的顏色
      tickColor: '#dfdfdf',//坐標(biāo)軸上的刻度線的顏色
      tickLength: 5,//坐標(biāo)軸上刻度線的長(zhǎng)度
      gridLineWidth:1,//網(wǎng)格線寬度。x軸默認(rèn)為0，y軸默認(rèn)為1px。
      gridLineColor:'#f2f2f2',//網(wǎng)格線顏色。默認(rèn)為：#C0C0C0。
      // gridLineDashStyle: 'Dash',//網(wǎng)格線線條樣式。和Css border-style類似，常用的有：Solid、Dot、Dash
      tickInterval: 5,//刻度間隔
      tickmarkPlacement: 'between',//刻度線對(duì)齊方式，有between和on可選，默認(rèn)是between
      style: {
        color: '#999999',
        fontSize:10
      },
      crosshair:{//鼠標(biāo)放上后顯示縱軸的數(shù)據(jù)
        color:'#999',
        width:1
      }
    },
    yAxis: [{//圖表的縱坐標(biāo)，多個(gè)軸[{軸一},{軸二}]
      gridLineWidth: 1,
      gridLineColor:'#f2f2f2',
      tickPositions: [0, 25, 50, 75, 100],//y軸刻度值
      tickLength:0,
      title: {//縱坐標(biāo)標(biāo)題
        text: ' ',
        margin:0,
        style: {
          color: '#999999',
          fontSize:10
        }
      },
      labels:{//坐標(biāo)軸上刻度的樣式及單位
        style: {
          color: '#999999',
          fontSize:10
        },
        format:'{value}%',//坐標(biāo)軸上的單位
      },
      offset:-10,//距離坐標(biāo)軸的距離
    },{
      gridLineWidth: 1,
      gridLineColor:'#f2f2f2',
      tickColor: '#fff',
      tickInterval:25,
      tickLength:0,
      title: {
        text: '',
        margin:0,
        style: {
          color: '#999999',
          fontSize:10
        }
      },
      labels:{
        style: {
          color: '#999999',
          fontSize:10
        },
        format:'{value}℃'
      },
      opposite:true,//設(shè)置opposite: true表示該軸位置反轉(zhuǎn)，即為y軸時(shí)顯示在右側(cè)
      offset:-10
    }],
    tooltip: {//數(shù)據(jù)提示框
      headerFormat: '<small>{point.key}</small><br/>',//標(biāo)題格式
      pointFormat: '<span >{series.name}</span>：{point.y}<br/>',
      shared: true,
      followPointer:true,//跟隨鼠標(biāo)
      followPointerMove:true,//是否跟隨手指移動(dòng)
      // footerFormat: 'muzi',//尾部格式化字符串
      style:{
        fontSize:10,
        fontFamily:'微軟雅黑',
        fontWeight:'normal',
        color:'#666'
      }
    },
      //標(biāo)示線總是垂直于它屬于的軸。它可單獨(dú)定義在x軸或y軸，也可以同時(shí)定義在x軸和y軸
       plotOptions: {
        area: {
          //pointStart: 1940,
          marker: {
            enabled: false,
            symbol: 'circle',
            radius: 2,
            states: {
              hover: {
                enabled: true
              }
            }
          },
          fillOpacity:0.2,
          lineWidth:1
        }
      },
      legend: {//圖例居中顯示在圖表下方
        align: 'center',
        symbolRadius:5,//圖標(biāo)圓角
        symbolWidth:10,//圖標(biāo)寬度
        symbolHeight:10,//圖標(biāo)高度
        itemStyle: {
          color: '#999999',
          fontWeight:'normal',
          fontSize:12
        },
        itemMarginBottom: -14,//圖例項(xiàng)底部外邊距
      },
      series: [{//數(shù)據(jù)列是一組數(shù)據(jù)集合
        name: 'CPU',//name 代表數(shù)據(jù)列的名字，并且會(huì)顯示在數(shù)據(jù)提示框（Tooltip）及圖例（Legend）中
        data: [
          5, 6, 10, 20, 50, 45, 30, 20, 10, 15,
          16, 17, 18, 18, 30, 26, 25, 24, 20, 26,
          36, 46, 50, 51, 52, 40, 30, 20, 19, 18,
          30, 50, 55, 56, 70, 72, 73, 60, 55, 54,
          53, 40, 39, 35, 32, 30, 20, 18, 3, 5,
          10, 12, 13, 23, 34, 56, 60, 70, 80, 90, 80
        ],
        tooltip: {
          valueSuffix:'%'
        }
      }, {
        name: 'RAM',
        data:[
          16, 17, 18, 18, 30, 26, 25, 24, 20, 26,
          36, 46, 50, 51, 52, 40, 30, 20, 19, 18,
          30, 50, 55, 56, 70, 72, 73, 60, 55, 54,
          53, 40, 39, 35, 32, 30, 20, 18, 3, 5,
          10, 12, 13, 23, 34, 56, 60, 70, 80, 90,
          5, 6, 10, 20, 50, 45, 30, 20, 10, 15, 20
        ],
        tooltip: {
          valueSuffix:'%'
        }
      }, {
        name: '溫度',
        data:[
          10, 11, 11, 12, 12, 13, 14, 15, 16, 16,
          16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
          16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
          16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
          16, 16, 16, 16, 16, 16, 16, 16, 16, 16,
          16, 16, 16, 16, 16, 16, 16, 16, 16, 16, 16
        ],
        tooltip: {
          valueSuffix:'℃'//值的前綴、后綴及小數(shù)點(diǎn)
        },
        yAxis:1
      }]
    }
 }

3、父組件引用chart.vue子組件

<template>
  <div class="charts" id="myChart" >
    <x-chart ></x-chart>
  </div>
</template>
<script>
// 導(dǎo)入chart.vue子組件
import XChart from './chart.vue'
export default {
 components: {
  XChart
 }
}
</script>
<style scoped lang='stylus'>
</style>

效果如下圖所示

上述內(nèi)容就是如何在vue項(xiàng)目中引入highcharts圖表，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

文章題目：如何在vue項(xiàng)目中引入highcharts圖表-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)網(wǎng)址：http://aaarwkj.com/article40/cdpeho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊(cè)、動(dòng)態(tài)網(wǎng)站、搜索引擎優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、用戶體驗(yàn)、營(yíng)銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)