在vue中 highcharts 的tooltip中使用data里的值

在vue中使highcharts 一般使用方法

代码语言：javascript复制

<highcharts :options="chartOptions0" style="height:200px;"></highcharts>

代码语言：javascript复制

  data() {
    return {
      unit:"千克",
      chartOptions0: {
        chart: {
          type: "column",
          backgroundColor: "#fafafa"
        },
        title: {
          text: null
        },
        xAxis: {
          categories: [
            "8",
            "9",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7"
          ],
          crosshair: true
          //gridLineWidth:1
        },
        yAxis: {
          title: {
            text: "用量"
          },
          lineWidth: 1
        },
        tooltip: {
          shared: true
        },
        legend: {
          align: "right",
          x: 0,
          verticalAlign: "top",
          y: -10
        },

        series: []
          }
        ]
      }
  },

但是这种方法如果想在tooltip的格式化中加上unit单位，则无法获取到unit的值

可以修改如下

在mounted 钩子中定义chartOptions0

代码语言：javascript复制

let vueref = this
this.chartOptions0= {
        colors: ['#00a65a', '#f39c12',"#fe6363","#f455f4","#b3e12b"],
        chart: {
          type: "spline",
          zoomType: "x"
          // marginBottom:50
          // backgroundColor: "#fafafa"
        },
        boost: {
          useGPUTranslations: true, //如果x轴为datetime并且间隔太短的话要设置成false
          usePreAllocated: true,
        },
        title: {
          text: null,
          style: {
            fontSize: "14px",
          },
        },
        xAxis: {
          type: "datetime",
          dateTimeLabelFormats: {
            millisecond: "%H:%M:%S.%L",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y",
          },
          // crosshair: true,
          //gridLineWidth:1
        },
        yAxis: {
          title: {
            text: null,
          },
          lineWidth: 1,
        },
        tooltip: {
          // dateTimeLabelFormats: {
          //   millisecond: "%Y-%m-%d %H:%M:%S.%L",
          //   second: "%H:%M:%S",
          //   minute: "%H:%M",
          //   hour: "%H:%M",
          //   day: "%Y-%m-%d",
          //   week: "%m-%d",
          //   month: "%Y-%m",
          //   year: "%Y",
          // },
          // headerFormat: "{point.x:第%d天 %H:%M:%S}<br>",
          // headerFormat: "{point.x:%m-%d时 %H:%M:%S}<br>",
          // pointFormat: "压力:{point.y} bar ",
          // valueSuffix: " bar",
          // shared: true,
          formatter:function(e){
            let name = this.series.name
            let index = name.indexOf("（")
            let startTime = name.substr(index 1,10)
            let xValue = new Date(startTime).getTime()-8*60*60*1000 this.x
            let dateObj = new Date(xValue)
            let year = dateObj.getFullYear()
            let month = dateObj.getMonth()  1
            month = month >10 ? month: "0" month
            let day = dateObj.getDate()
            let h = dateObj.getHours()
            h = h>10 ? h: "0" h
            let m = dateObj.getMinutes()
            m = m >10 ? m: "0" m
            let s = dateObj.getSeconds()
            s = s >10 ? s: "0" s
            var result = '<b>'   year  "-"   month   "-"   day   " "   h   ":"   m   ":"   s  "</b>"
            result ="<br>"
            result ="值："   this.y   vueref.unit 
            return result
          }
        },
        legend: {
          enabled: true,
          marginTop:20,
          padding:0
          // align: "right",
          // x: 0,
          // verticalAlign: "top",
          // y: 0
        },
        plotOptions: {
          spline: {
            marker: { enabled: false },
          },
        },

         series: [],
      },

vue-highcharts要改成原生的highcharts

代码语言：javascript复制

<div id='chart' style="height:200px;"></div>

代码语言：javascript复制

import Highcharts from "highcharts/highcharts";

代码语言：javascript复制

Highcharts.chart("chart",this.chartOptions0)

highcharts vue.js

0 人点赞