vue 项目 引入 hightcharts

vue

<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

回到顶部