在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 相关文章推荐
web基于浏览器的本地存储方法应用
Nov 27 Javascript
js window.onload 加载多个函数和追加函数详解
Jan 08 Javascript
javascript学习笔记(三)BOM和DOM详解
Sep 30 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
关于微信jssdk实现多图片上传的一点心得分享
Dec 13 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
xmlplus组件设计系列之按钮(2)
Apr 26 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
浅谈Vue初学之props的驼峰命名
Jul 19 Javascript
详解js加减乘除精确计算
Mar 19 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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 minixml详解
2008/07/19 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
JS中操作JSON总结
2020/12/06 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
2015/01/13 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
2015/07/20 Javascript
jquery图片滚动放大代码分享(1)
2015/08/25 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
使用jquery判断一个元素是否含有一个指定的类(class)实例
2017/02/12 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
基于jQuery.i18n实现web前端的国际化
2018/05/04 jQuery
详解jQuery设置内容和属性
2019/04/11 jQuery
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
微信小程序实现聊天室
2020/08/21 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
python通过自定义isnumber函数判断字符串是否为数字的方法
2015/04/23 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
python计算圆周率pi的方法
2015/07/11 Python
python数组过滤实现方法
2015/07/27 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
浅谈python中copy和deepcopy中的区别
2017/10/23 Python
Python高级用法总结
2018/05/26 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python集合的新增元素方法整理
2020/12/07 Python
总结html5自定义属性有哪些
2020/04/01 HTML / CSS
个人投资计划书
2014/05/01 职场文书
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript