前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在vue中 highcharts 的tooltip中使用data里的值

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

作者头像
tianyawhl
发布2020-12-01 10:40:10
2.3K0
发布2020-12-01 10:40:10
举报
文章被收录于专栏:前端之攻略前端之攻略

在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)
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档