vue加载highcharts柱状图

<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
}
})
},

最后

以上就是开放跳跳糖为你收集整理的vue加载highcharts柱状图的全部内容，希望文章能够帮你解决vue加载highcharts柱状图所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。