vue实现3D饼状图

首先下载一下依赖，简单易懂直接使用就可

yarn add highcharts
yarn add highcharts-3d

配置main.js

import highcharts from 'highcharts'
import highcharts3d from 'highcharts/highcharts-3d'highcharts3d(highcharts)

创建一个 PiedHighcharts.js 用于抛出 highcharts的配置对象

// list 格式： [{name:'a',y:'2'},{name:'b',y:'2'},{name:'c',y:'2'},{name:'d',y:'2'}]export default function (list) {return {chart: {type: 'pie',options3d: {enabled: true,alpha: 45,beta: 0,},},title: {text: '你的标题',verticalAlign: 'bottom',},credits: {enabled: false,},tooltip: {pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>',},//控制颜色colors: ['#99FF00', 'red', '#FFCC00', '#ccc'],plotOptions: {pie: {allowPointSelect: true,cursor: 'pointer',showInLegend: true,depth: 50,dataLabels: {enabled: true,format: '{point.name}: <b>{point.percentage:.1f}%</b>',},},},legend: {//控制图例显示位置align: 'right',verticalAlign: 'top',itemDistance:1,squareSymbol:false,symbolRadius:3,},series: [{type: 'pie',name: '浏览器占比',data: stateList,},],}
}

在vue文件中调用

<template><divclass="drawchart"ref="runstatuspie"style="width: 100%; height: 300px; color: black; margin-top: 15px"></div>
</template><script>import highcharts from 'highcharts'import drawtimecharts from './PiedHighcharts'
export default {data(){list: [{name:'a',y:'2'},{name:'b',y:'2'},{name:'c',y:'2'},{name:'d',y:'2'}]}mounted() {highcharts.chart(this.$refs.runstatuspie, drawtimecharts(this.list))}
}
</script>

然后就可以调用啦

vue实现3D饼状图相关推荐

Jpgraph php怎么变异,php使用Jpgraph绘制3D饼状图的方法
此文实例介绍了php使用Jpgraph绘制3D饼状图的方法.分享给大伙供大家参考.具体实现方法如下: include ("src/jpgraph.php"); include (& ...
【echarts记录 -- 3d 饼状图实现】
echarts记录 -- 3d 饼状图实现实现效果效果1 效果2 代码实现效果效果1 效果2 代码 /************************* pie3D 尝试更新时间: 2020. ...
highcharts实现立体3D饼状图
最近做一个h5活动页,设计师给我设计出了一个3D饼状图,我当时觉得没啥,觉得强大的echarts应该能做出来的,因为公司的项目涉及到图表的都用的echarts,但是后来去echarts官网一查,没这个 ...
Echarts 3d饼状图
记录使用Echarts 实现3D饼状图的过程. 效果图: 1.首先安装echarts 3d插件 "echarts": "^4.7.0", "echar ...
JFreeChart在Struts2中实现3D饼状图统计
在Struts2中,用JFreeChart实现3D饼状图统计前段时间学习了一下JFreeChart,现在来整理一下自己所作的实例. 下面分别用两种方式来实现: 一种是以java应用程序的方式,一种是 ...
highcharts实现3D饼状图
刚接触前端的时候作图大多数时候都用echarts,但今天项目中一个需求是要实现3D的饼状图,所以转向highcharts来实现,具体实现过程如下. 首先要引入所需的js文件,在官网详细说明该引入那些j ...
Ehcarts绘制3D饼状图
需要用到echarts.min.js和echarts-gl.min.js 网上找了半天没找到靠谱的自己查资料弄一个了方便自己以后看直接复制到html文件中即可运行 <!DOCTYPE html ...
vue+elementui+echarts饼状图内部显示百分比
<div id="main" style="width: 400px;height: 350px;"></di ...
Origin2017绘制3D饼状图去掉指定图例
Origin在绘制饼状图时,有时只想显示部分图例,如下图所示: 针对此,可以先绘制图像. 这里可以看到所有的图例都例举出来了.针对此,可以双击图例部分.可以看到图例变成了下面的内容: 针对这个,可以进 ...

vue实现3D饼状图

vue实现3D饼状图相关推荐

最新文章

热门文章