vue 项目 引入 hightcharts
<template>
<div class='earlywarning'>
<div id="container"></div>
</div>
</template>
<script>
import * as Highcharts from 'highcharts'
export default {
data () {
return {}
},
mounted () {
this.drowCart()
},
methods: {
drowCart () {
const chart = Highcharts.chart(
'container', {
chart: {
spacing: [0, 0, 0, 0],
backgroundColor: '#073149'
},
title: {
floating: true,
text: '预警情况',
style: {
color: '#f8f8f8'
}
},
credits: {
enabled: false
},
tooltip: {
pointFormat: '{series.name}: <b>{point.y}个</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}个',
style: {
color:
(Highcharts.theme && Highcharts.theme.contrastTextColor) ||
'black'
}
},
point: {
events: {
mouseOver: function (e) {
chart.setTitle({
text: e.target.name + '\t' + e.target.y + '个'
})
}
}
}
}
},
series: [{
type: 'pie',
innerSize: '70%', // 环形的宽窄,数值越小环形越宽
name: '预警个数',
colors: ['#FFF30C', '#E6A23C', '#f56c6c'],
data: [
{ name: '黄色预警', y: 10 },
{ name: '橙色预警', y: 3 },
{ name: '红色预警', y: 7 }
]
}]
}
// function (c) {
// // 图表初始化完毕后的会掉函数
// // 环形图圆心
// const centerY = c.series[0].center[1],
// titleHeight = parseInt(c.title.styles.fontSize);
// // 动态设置标题位置
// c.setTitle({
// y: centerY + titleHeight / 2
// })
// }
)
}
}
}
</script>
<style>
.earlywarning {
width: 100%;
height: 40%;
border: 1px solid red;
}
.highcharts-container {
width: 600px;
height: 400px;
border: 1px solid red;
margin: auto;
}
</style>
小声BB vue项目引入hightcharts 网上全是同一个答案太费劲了 记录一下
以上是 vue 项目 引入 hightcharts 的全部内容, 来源链接: utcz.com/z/375165.html