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


Posted in Javascript onFebruary 08, 2018

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/

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

Javascript 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
Dec 02 Javascript
JS记录用户登录次数实现代码
Jan 15 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
js实现图片旋转的三种方法
Apr 10 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
JavaScript中concat复制数组方法浅析
Jan 20 Javascript
微信小程序vant弹窗组件的实现方式
Feb 21 Javascript
vue中使用ueditor富文本编辑器
Feb 08 #Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 #Javascript
vue 使用ref 让父组件调用子组件的方法
Feb 08 #Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
Feb 08 #Javascript
web前端页面生成exe可执行文件的方法
Feb 08 #Javascript
ajax前台后台跨域请求处理方式
Feb 08 #Javascript
详解自定义ajax支持跨域组件封装
Feb 08 #Javascript
You might like
PHP的中问验证码
2006/11/25 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
In Javascript Class, how to call the prototype method.(three method)
2007/01/09 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
jQuery简单验证上传文件大小及类型的方法
2016/06/02 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
vue-router路由懒加载和权限控制详解
2017/12/13 Javascript
用js简单提供增删改查接口
2019/05/12 Javascript
搭建一个nodejs脚手架的方法步骤
2019/06/28 NodeJs
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
jquery树形插件zTree高级使用详解
2019/08/16 jQuery
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
[59:44]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 paiN vs iG
2018/03/31 DOTA
简单的Python抓taobao图片爬虫
2014/10/26 Python
python调用Matplotlib绘制分布点并且添加标签
2018/05/31 Python
python 保存float类型的小数的位数方法
2018/10/17 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
利用python绘制正态分布曲线
2021/01/04 Python
python 实现图片裁剪小工具
2021/02/02 Python
8款使用 CSS3 实现超炫的 Loading(加载)的动画效果
2015/03/17 HTML / CSS
美国复古街头服饰精品店:Need Supply Co.
2017/02/22 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
集中整治工作方案
2014/05/01 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
地方课程教学计划
2015/01/19 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
奶茶店的创业计划书该怎么写?
2019/07/15 职场文书
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle
Python创建SQL数据库流程逐步讲解
2022/09/23 Python