vue加载highcharts柱状图

最新推荐文章于 2024-05-13 19:07:05 发布

不想上班只想要钱

最新推荐文章于 2024-05-13 19:07:05 发布

阅读量344

点赞数

分类专栏：前端 css html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Aa12364567/article/details/126779791

版权

前端同时被 3 个专栏收录

150 篇文章 3 订阅

订阅专栏

html

89 篇文章 1 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

<div id="chart" class="chart"></div>

data() {
    return {
        chart: null,
    } 
},
mounted() {
    this.buildChart()
}

buildLineChart(id) {
      this.contentList.chart = Highcharts.chart(id, {
        chart: {
          type: "column", //柱状图
          backgroundColor: "rgba(2, 16, 67, 0)",  //图表底色
          style: {
            color: "#fff"
          }
        },
        title: {
          text: "当前海域24小时气温变化趋势",  //标题
          style: { //标题样式
            color: '#F0F7FF',
            fontSize: 14
          },
        },
        xAxis: { //x轴
          categories:["晴", "雨", "雪", "雾"],
          labels: { //X轴字体颜色
            style: {
              color: "#F0F7FF",
              fontSize: "14px",
              fontWeight: "400"
            }
          },
          // 设置X轴基线颜色
          lineColor:'rgba(240,247,255,0.6)',
          // categories: []
        },
        yAxis: { Y轴
          title: {
            text: "℃",
            align: 'high',
            offset: -25,
            rotation: 0,
            y: -18,
            style: {
              width:"20px",
              color: "rgba(240,252,255,0.4)",
              fontSize: "14px",
              fontWeight: "400"
            },
          },
          labels: {
            style: {
              color: "#F0F7FF",
              fontSize: "14px",
              fontWeight: "400",
              
            },
            // align:'left',
            x:13, //改变y轴位置
            y:5
          },
          lineColor:'red',
          // 设置网格线虚线等样式
          gridLineDashStyle: "dash",
          gridLineWidth: 1,
          gridLineColor: "rgba(240,252,255,0.6)"
        },
        // 提示框
        tooltip: {
          // formatter:function() {
          //   return this.y;
          
          // },
          formatter: function() {
            var tooltip = ''
            tooltip += '<div style="width: 54px;height: 15px;line-height: 15px;background: rgba(0, 187, 255, 0.1);color: #FFFFFF;text-align: center;position: relative">'
            tooltip += '<span>' 
            tooltip += this.y
            tooltip += '</span>'
            tooltip += '<img src="/left.png" style="position: absolute;left: 0px;top: 0px;" />'
            tooltip += '<img src="/right.png" style="position: absolute;right: 0px;top: 0px;" />'
            tooltip += '</div>'
            return tooltip
          },
          useHTML: true,
          backgroundColor: null,
          borderWidth: 0,
          // borderWidth:33,
          // borderHeight:44,
          // borderRadius: 0,
          // paddingLeft:30,
          // backgroundColor:'rgb(0,187,255,0.2)',
          // borderColor: 'rgb(0,187,255,0.2)',
          shadow:false,
          style: {
            color:'#FFFFFF',
            fontSize: '14PX',
          },
          // 鼠标停留后的垂直白线
          crosshairs:[{
            width:3,
            color:'rgba(255,255,255,0.2)',
          }],
        },
        // 图例
        legend: {
          enabled: false,
        },
        plotOptions: {
          column: {
            borderWidth: 0,
            pointWidth: 40,
          },
          areaspline: {},
          // 设置区域的透明度 fillOpacity: num 最大为1
          series: {
            fillOpacity: 0.3,
            // pointPlacement: 'on',   设置x轴左对齐
          },
         
        },
        series: [
          {
            data:[20,7,0,4],
            color: "rgba(0,187,255,0.3)",
            fillColor: {
              linearGradient: {
                x1: 0,
                y1: 0,
                x2: 0,
                y2: 1
              },
              stops: [
                [0, "rgba(0, 187, 255, 0.6)"],
                [1, "rgba(0, 187, 255, 0)"]
              ]
            },
            label: {
              connectorAllowed: false
            },
            marker: {
              enabled:false,
              radius: 3,
              // symbol:'circle',
              // symbol:'url(https://ts1.cn.mm.bing.net/th/id/R-C.3ee8e0c3ef5deebc97978557b8e26a7b?rik=ZuOtsvk0gOu4kQ&riu=http%3a%2f%2fwww.psahz.com%2fuploads%2fallimg%2f130214%2f20301SS1-0-lp.jpg&ehk=GXnA%2fWbnSvpDVS6FPnzds7hY5Wt1WWAbE20CJ2CKY%2fM%3d&risl=&pid=ImgRaw&r=0)',
              lineColor:"#00BBFF",
              fillColor:'#00BBFF',
              
            },
            
          }
        ],
        credits: {
          enabled: false
        }
      })
    },