在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 相关文章推荐
Gird事件机制初级读本
Mar 10 Javascript
一个加载js文件的小脚本
Jun 28 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
Mar 16 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
JS操作Cookie写入和读取实例代码
Oct 20 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
jQuery实现查找最近父节点的方法
Jun 23 Javascript
基于LayUI实现前端分页功能的方法
Jul 22 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
Oct 19 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
深入浅析php json 格式控制
2015/12/24 PHP
解密效果
2006/06/23 Javascript
JS 动态加载脚本的4种方法
2009/05/05 Javascript
JQuery AJAX 中文乱码问题解决
2013/06/05 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
全面解析Angular中$Apply()及$Digest()的区别
2016/08/04 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
JQuery学习总结【一】
2016/12/01 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
Angular排序实例详解
2017/06/28 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
2018/05/28 jQuery
vuex实现及简略解析(小结)
2019/03/01 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
深入了解JavaScript 私有化
2019/05/30 Javascript
python中的随机函数random的用法示例
2018/01/27 Python
Python机器学习之scikit-learn库中KNN算法的封装与使用方法
2018/12/14 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Python面向对象程序设计多继承和多态用法示例
2019/04/08 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
使用Puppeteer爬取微信文章的实现
2020/02/11 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
.NET程序员的数据库面试题
2012/10/10 面试题
工程预算与管理应届生求职信
2013/10/06 职场文书
中专毕业生个人职业生涯规划
2014/02/19 职场文书
铅球加油稿100字
2014/09/26 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS