在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 相关文章推荐
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
jQuery拖动布局其结果保存到数据库
Oct 09 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
详解AngularJS controller调用factory
May 19 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 Javascript
微信小程序返回上一页传参并刷新过程解析
Dec 13 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
Vue监视数据的原理详解
Feb 24 Vue.js
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 编程安全性小结
2010/01/08 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php不使用copy()函数复制文件的方法
2015/03/13 PHP
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
js实现div弹出层的方法
2014/11/20 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
介绍Python的Urllib库的一些高级用法
2015/04/30 Python
Python3处理文件中每个词的方法
2015/05/22 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
对Python+opencv将图片生成视频的实例详解
2019/01/08 Python
解决keras加入lambda层时shape的问题
2020/06/11 Python
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
HTML5新增加的功能详解
2016/09/05 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
GafasWorld西班牙:购买太阳镜、眼镜和隐形眼镜
2019/09/08 全球购物
Eclipse面试题
2014/03/22 面试题
中科软测试工程师面试题
2012/06/16 面试题
珠宝店促销方案
2014/03/21 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
小鞋子观后感
2015/06/05 职场文书
《少年闰土》教学反思
2016/02/18 职场文书
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL