在Vue中使用highCharts绘制3d饼图的方法
时间:2019-04-13
本文章向大家介绍在Vue中使用highCharts绘制3d饼图的方法,主要包括在Vue中使用highCharts绘制3d饼图的方法使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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>
看下效果。
更多的配置说明可以到中文官网查看 https://www.hcharts.cn/
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- Android scrollview嵌套webview滑动冲突的解决方案
- 几乎不用但要了解的AbsoluteLayout绝对布局
- 两分钟掌握FrameLayout帧布局
- 善用TableLayout表格布局,事半功倍
- 轻松掌握RelativeLayout相对布局
- 如何正确使用padding和margin
- 两种对齐方式,layout_gravity和gravity大不同
- GridView属性和使用方法
- ListView数据动态更新
- ListView优化和列表首尾使用
- 自定义BaseAdapter
- 使用SimpleAdapter
- 自定义ArrayAdapter
- ListActivity和自定义列表项
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JDK15正式发布,新增功能预览!
- Magicodes.IE 2.3重磅发布——.NET Core开源导入导出库
- 安防视频监控系统视频上云解决方案EasyCVR音频基础知识介绍
- 安防视频监控系统视频上云解决方案EasyCVR语音转发功能音频数据打包发送流程介绍
- 视频上云/安防视频融合平台/安防视频云服务EasyCVR通道播放界面出现样式重叠如何修正?
- 什么是MySQL数据库?看这一篇干货文章就够了!
- 折线图
- 雷达图
- Cypress系列(49)- invoke() 命令详解
- java线程池(三):ThreadPoolExecutor源码分析
- 社会工程学
- msf之木马程序
- 快速学习-Saturn用户的认证与授权
- 快速学习-Saturn创建作业
- 快速学习-Saturn作业编排