未加星标

在Vue中使用highCharts绘制3d饼图的方法

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
highcharts是国外知名基于javascript的图表库。由于中文官网的vue中使用highcharts配置繁琐并且需要引入jquery作为依赖,所以弃用。

接下来,给各位伙伴简要的讲叙下highcharts在vue中的使用和配置方法。

首先使用 npm在你的项目中安装vue-highcharts

npm install vue-highcharts --save

由于vue-highcharts依赖于highcharts,我们还需要安装后者

npm install highcharts --save

安装完成后,进入项目main.js进行配置:

import highcharts from 'highcharts'
import VueHighCharts from 'vue-highcharts'

引入以上两项之后,因为我们需要使用3d图表,还需要引入:

import highcharts3d from 'highcharts/highcharts-3d'

调用3d图表:

highcharts3d(highcharts)
OK,到此为止已经在vue中配置好highcharts,接下来根据API绘制一份3d饼图

新建一个饼图的组件:

<template>
<div class="container">
<div :id="id" :option="option"></div>
</div>
</template>
<script>
import HighCharts from 'highcharts'
export default {
props: {
id: {
type: String
},
//option 是图表的配置数据
option: {
type: Object
}
},
mounted() {
HighCharts.chart(this.id, this.option)
}
}
</script>
<style scoped>
/* 容器 */
.container {
width: 1000px;
height: 550px;
}
</style>

在需要使用饼图的页面里配置option数据

<template>
<div class="charts">
<pie :id="id" :option="option"></pie>
</div>
</div>
</template>
<script>
import pie from '../components/pie'
import manes from '../components/list'
export default {
components: {
pie,
},
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]
]
}
]
}
}
},
}
</script>
<style scoped>
</style>

看下效果。

在Vue中使用highCharts绘制3d饼图的方法
更多的配置说明可以到中文官网查看 https://www.hcharts.cn/

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。


您可能感兴趣的文章:在Vue中使用echarts的方法在vue中通过axios异步使用echarts的方法vue+vuex+axios+echarts画一个动态更新的中国地图的方法vue在使用ECharts时的异步更新和数据加载详解在vue中添加Echarts图表的基本使用教程vue.js如何将echarts封装为组件一键使用详解在Vue中使用echarts的实例代码(3种图)vue.js+Echarts开发图表放大缩小功能实例Vue2 使用 Echarts 创建图表实例代码详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: 数据可视化数据
tags: gt,lt,highcharts,vue,option,pie,div,id,饼图,import,3d,图表,template
分页:12
转载请注明
本文标题:在Vue中使用highCharts绘制3d饼图的方法
本站链接:http://www.codesec.net/view/572580.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(19)