在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 相关文章推荐
浅析JS中document对象的一些重要属性
Mar 06 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
用jQuery旋转插件jqueryrotate制作转盘抽奖
Feb 10 Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
vue element项目引入icon图标的方法
Jun 06 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
环形加载进度条封装(Vue插件版和原生js版)
Dec 04 Javascript
vue $mount 和 el的区别说明
Sep 11 Javascript
详解vue中在父组件点击按钮触发子组件的事件
Nov 13 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 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中抽象类和抽象方法概念与用法分析
2016/05/24 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
设定php简写功能的方法
2019/11/28 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
如何在AngularJs中调用第三方插件库
2017/05/21 Javascript
jquery.validate表单验证插件使用详解
2017/06/21 jQuery
详解nodejs通过响应回写的方式渲染页面资源
2018/04/07 NodeJs
微信小程序上传图片实例
2018/05/28 Javascript
Vue Promise的axios请求封装详解
2018/08/13 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
Vue.js中的高级面试题及答案
2020/01/13 Javascript
vue页面更新patch的实现示例
2020/03/25 Javascript
在项目vue中使用echarts的操作步骤
2020/09/07 Javascript
在Python中使用__slots__方法的详细教程
2015/04/28 Python
快速查询Python文档方法分享
2017/12/27 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Python使用matplotlib和pandas实现的画图操作【经典示例】
2018/06/13 Python
Pytorch之finetune使用详解
2020/01/18 Python
Python实现动态循环输出文字功能
2020/05/07 Python
python解包用法详解
2021/02/17 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
德国大型和小型家用电器网上商店:Energeto
2019/05/15 全球购物
高中生期末评语
2014/01/28 职场文书
金融学专业大学生职业生涯规划
2014/03/07 职场文书
学生请假条格式
2014/04/11 职场文书
技术负责人任命书
2014/06/05 职场文书
优秀毕业生的求职信
2014/07/21 职场文书
物业前台接待岗位职责
2015/04/03 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书