1、安装 highcharts
npm install highcharts --save
2、安装highcharts-vue
npm install highcharts-vue
3、在main中引入
import HighchartsVue from 'highcharts-vue'
Vue.use(HighchartsVue)
4、使用
html代码
<highcharts :options="chartOptions"></highcharts>
data中的数据
data() {
return {
chartOptions: {
series: [
{
data: [1, 2, 3], // sample data
},
],
},
};
},
效果图
5、3d图形的使用
main.js中加入
import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'
highcharts3d(highcharts)
6方法任一都可
6.1 3d图形的实现(一)通过highcharts标签实现
将配置项的内容改为3d配置项的内容
<template>
<div>
<highcharts :options="chartOptions"></highcharts>
</div>
</template>
<script>
export default {
name: "",
// 接收父组件传递过来的参数
props: {},
// 注册组件
components: {},
// 定义变量
data() {
return {
chartOptions: {
chart: {
type: "pie",
options3d: {
enabled: true,
alpha: 45,
beta: 0,
},
},
title: {
text: "2014年某网站不同浏览器访问量占比",
},
tooltip: {
pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>",
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: "pointer",
depth: 35,
dataLabels: {
enabled: true,
format: "{point.name}",
},
},
},
series: [
{
type: "pie",
name: "浏览器占比",
data: [
["Firefox", 45.0],
["IE", 26.8],
{
name: "Chrome",
y: 12.8,
sliced: true,
selected: true,
},
["Safari", 8.5],
["Opera", 6.2],
["Others", 0.7],
],
},
],
},
};
},
// 事件方法执行
methods: {},
// 页面初始化方法
mounted() {},
// 监听值变化
watch: {},
// 计算
computed: {},
};
</script>
<style scoped lang='scss'>
</style>
效果图
6.2 3d图形的实现(二)通过HighCharts方法实现 (建议)
在需要的地方引入前5步的基础上
import HighCharts from 'highcharts'
全部代码
<template>
<div>
<div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from "highcharts";
export default {
name: "",
// 接收父组件传递过来的参数
props: {},
// 注册组件
components: {},
// 定义变量
data() {
return {
id: "test",
option: {
chart: {
type: "pie", //饼图
options3d: {
enabled: true, //使用3d功能
alpha: 60, //延y轴向内的倾斜角度
beta: 0,
},
},
title: {
text: "测试用", //图表的标题文字
},
subtitle: {
text: "", //副标题文字
},
plotOptions: {
pie: {
allowPointSelect: true, //每个扇块能否选中
cursor: "pointer", //鼠标指针
depth: 35, //饼图的厚度
dataLabels: {
enabled: true, //是否显示饼图的线形tip
},
},
},
series: [
{
type: "pie",
name: "测试用1", //统一的前置词,非必须
data: [
["测试1", 12], //模块名和所占比,也可以{name: '测试1',y: 12}
["测试2", 23],
["测试3", 19],
["测试4", 29],
],
},
],
},
};
},
// 事件方法执行
methods: {},
// 页面初始化方法
mounted() {
HighCharts.chart(this.id, this.option)
},
// 监听值变化
watch: {},
// 计算
computed: {},
};
</script>
<style scoped lang='scss'>
</style>
效果图
去掉默认title
title: {
text: null
},
去掉版权
和title同级
credits: { enabled: false},