一：
highcharts在vue中的使用和配置方法
npm install vue-highcharts --save
由于vue-highcharts依赖于highcharts，我们还需要安装后者
npm install highcharts --save
二：
安装完成后，进入项目main.js进行配置：
import highcharts from 'highcharts'import VueHighCharts from 'vue-highcharts'import highcharts3d from 'highcharts/highcharts-3d'OK，到此为止已经在vue中配置好highcharts,接下来根据API绘制一份3d饼图
新建一个饼图的组件：
<template>
<div class="container">
<div id="yeartest" />
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
props: {
// id: {
// type: String
// },
// option: {
// type: Object
// }
},
data() {
return {
}
},
mounted() {
this.pieChart()
},
methods: {
pieChart() {
const yeartest = document.getElementById('yeartest')
var option1 = {
credits: { enabled: false },
chart: {
type: 'pie', // 饼图
options3d: {
enabled: true, // 使用3d功能
alpha: 60, // 延y轴向内的倾斜角度
beta: 0
}
},
// colors: ['#096fd3', '#fd7523'], // 饼图颜色设置
title: {
text: '年度完成进度'// 图表的标题文字
},
subtitle: {
text: ''// 副标题文字
},
// tooltip: {
// pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
// },
plotOptions: {
pie: {
allowPointSelect: true, // 每个扇块能否选中
cursor: 'pointer', // 鼠标指针
depth: 30, // 饼图的厚度
dataLabels: {
enabled: true,// 是否显示饼图的线形tip
format: '{point.name}{point.percentage:.2f} %',
}
},
},
series: [
{
type: 'pie',
name: '进度', // 统一的前置词,非必须
data: [
['已经完成电量', 12], // 模块名和所占比，也可以{name: '测试1',y: 12}
['未完成电量', 23]
]
}
]
}
HighCharts.chart(yeartest, option1)
}
}
}
</script>
<style scoped>
/* 容器 */
.container {
500px;
height: 500px;
}
</style>
<template>
<div class="container">
<div id="mothtest" />
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
props: {
// id: {s
// type: String
// },
// option: {
// type: Object
// }
},
data() {
return {
}
},
mounted() {
this.pieChart()
},
methods: {
pieChart() {
const mothtest = document.getElementById('mothtest')
var option1 = {
credits: { enabled: false },
chart: {
backgroundColor: 'rgba(255, 255, 255, 0)', //图例背景颜色
type: 'pie', // 饼图
options3d: {
enabled: true, // 使用3d功能
alpha: 60, // 延y轴向内的倾斜角度
beta: 0
}
},
// colors: ['#096fd3', '#fd7523'], // 饼图颜色设置
title: {
text: '本月完成进度',// 图表的标题文字
align: 'center', //水平方向位置
verticalAlign: 'top', //垂直方向位置
x: 0, //距离x轴的距离
y: 100, //距离Y轴的距离
style: {
// color: '#000', //字体颜色
fontSize: "14px", //字体大小
fontWeight: 'bold'
}
},
subtitle: {
text: ''// 副标题文字
},
// tooltip: {
// pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
// },
plotOptions: {
pie: {
allowPointSelect: true, // 每个扇块能否选中
cursor: 'pointer', // 鼠标指针
depth: 30, // 饼图的厚度
dataLabels: {
enabled: true, // 是否显示饼图的线形tip
distance: 0,
format: '{point.name}<br/>{point.percentage:.2f} %'
}
}
},
series: [
{
type: 'pie',
name: '进度', // 统一的前置词,非必须
data: [
['已经完成电量', 12], // 模块名和所占比，也可以{name: '测试1',y: 12}
['未完成电量', 23]
]
}
]
}
HighCharts.chart(mothtest, option1)
}
}
}
</script>
<style scoped>
/* 容器 */
.container {
550px;
height: 550px;
}
</style>
<html> <head> <meta charset="UTF-8" /> <title>3d饼图</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script> <script src="https://cdn.highcharts.com.cn/highcharts/highcharts-3d.js"></script> </head> <body> <div id="container" style=" 550px; height: 400px; margin: 0 auto"></div> <script type="text/javaScript"> var pieColors = (function () { // 此处是基础着色，如果设置好颜色，此处就没有看的必要了 var colors =[], base = Highcharts.getOptions().colors[0], i; for (i = 0; i < 10; i += 1) { // Start out with a darkened base color (negative brighten), and end // up with a much brighter color colors.push(Highcharts.Color(base).brighten((i - 3) / 7).get()); } return colors; }()); $(document).ready(function() { var chart = { type: 'pie', options3d: { enabled: true, alpha: 45, beta: 0 } }; var title = { text: '测试占有率' }; var tooltip = { pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' }; var colors=['#FF0000','#00FF00','#0000FF','#FFFF00','#00FFFF','#FF00FF']; //设置饼图颜色 var credits = { enabled: false //禁用版权url 此处不设置， 会显示highecharts.com }; var plotOptions = { pie: { allowPointSelect: true, cursor: 'pointer', depth: 25, //饼图厚度 // color:pieColors, dataLabels: { distance: 20,//设置引导线的长度 // color:'red',//全局设置字体颜色 enabled: true, // format: '{point.name}', formatter: function() { //设置字体与引导线和饼图颜色一致 if(this.point.name == '中国'){ return '<span style="color:#FF0000">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>'; }else if(this.point.name == '美国'){ return '<span style="color:#00FF00">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>'; }else if(this.point.name == '俄罗斯'){ return '<span style="color:#0000FF">['+ this.point.name +' '+Highcharts.numberFormat(this.percentage, 2)+'%]</span>'; }else if(this.point.name == '英国'){ return '<span style="color:#FFFF00">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>'; }else if(this.point.name == '朝鲜'){ return '<span style="color:#00FFFF">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>'; }else if(this.point.name == '日本'){ return '<span style="color:#FF00FF">['+ this.point.name +' '+ Highcharts.numberFormat(this.percentage, 2)+'%]</span>'; } } /* style: { fontSize: '10px',//设置字体大小 fontFamily: 'Verdana, sans-serif' }*/ } } }; var series= [{ type: 'pie', name: 'Browser share', startAngle: 180,//调整饼图的角度 方向：顺时针 data: [ ['中国', 45.0], ['美国', 16.8], { name: '俄罗斯', y: 22.8, sliced: true, selected: true }, ['英国', 8.5], ['朝鲜', 6.2], ['日本', 0.1] ] }]; var json = {}; json.chart = chart; json.title = title; json.tooltip = tooltip; json.colors = colors; // 设置饼图颜色 json.credits = credits; json.plotOptions = plotOptions; json.series = series; $('#container').highcharts(json); }); </script> </body> </html>