本文主要和大家介绍在Vue中highCharts绘制3d饼图实例,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> <p class="container"> <p :id="id" :option="option"></p> </p> </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> <p class="charts"> <pie :id="id" :option="option"></pie> </p> </p> </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>
看下效果。
更多的配置说明可以到中文官网查看 https://www.hcharts.cn/
相关推荐:
HighCharts绘制2D带Label的折线图效果实例分享
highcharts实例教程二:结合php与mysql生成饼图,highcharts实例教程_PHP教程
以上是在Vue中highCharts绘制3d饼图实例分享的详细内容。更多信息请关注PHP中文网其他相关文章!