实现3D饼图的方法、系统、设备及可读存储介质技术方案

本发明专利技术公开了一种实现3D饼图的方法、系统、设备及介质，创建HTML页面，通过script标签将javascript脚本echarts.js、echarts

【技术实现步骤摘要】
实现3D饼图的方法、系统、设备及可读存储介质


[0001]本专利技术属于数据可视化前端展示
，具体涉及一种基于echarts实现3D饼图的方法、系统、设备及可读存储介质。

技术介绍

[0002]大数据时代，随着信息化的进步、数据几何级数的增长，传统的数据报表、表格已经无法对数据规律直观的进行展示，大量的数据只有通过数据可视化才能洞悉其中的规律。echarts是一款数据可视化的基础工具库，其中提供了多种多样的图表展示方式。基于echarts可以开发出绚丽的数据可视化场景界面。
[0003]虽然echarts内置了多种多样的图表展示方式，但是经过多个版本的迭代，echarts一直都没有提供3D饼图，按照官方的说法，3D饼图由于视觉的差异，无法进行精准的数据对比，所以不提供也不建议在数据可视化项目中使用3D饼图。但是在数据可视化项目中，或多或少都会有一些3D饼图的数据展示需求。一般情况，解决方案都是再引入其它有3D饼图的基础工具库，这样不仅会导致项目体积过大，而且也会出现图表样式不兼容的情况。

技术实现思路

[0004]本专利技术的目的在于提供一种基于echarts实现3D饼图的方法、系统、设备及可读存储介质，以克服现有技术存在的缺陷，本专利技术对echarts缺少的3D饼图进行补充，丰富echarts的数据展示方式。
[0005]为达到上述目的，本专利技术采用如下技术方案：
[0006]实现3D饼图的方法，所述方法包括：
[0007]创建HTML页面，通过script标签将javascript脚本echarts.js、echarts
‑
gl.js及echarts
‑
pie3d.js嵌入到HTML页面中；
[0008]在HTML页面中加入DIV元素，并且通过echarts将DIV元素创建为echarts实例；
[0009]创建3D饼图所需要的配置项，并且将配置项赋值到echarts实例，echarts
‑
pie3d.js即在HTML界面上生成对应的3D饼图；
[0010]其中，所述脚本echarts.js为echarts的主要功能模块，所述脚本echarts
‑
gl.js为标准3D图表功能模块，所述脚本echarts
‑
pie3d.js为绘制3D饼图的主要功能模块。
[0011]进一步地，所述脚本echarts
‑
pie3d.js的创建过程具体为：
[0012]通过script标签将javascript脚本echarts.js和echarts
‑
gl.js嵌入到新的HTML页面中；
[0013]创建echarts
‑
pie3d.js文件，所述echarts
‑
pie3d.js文件实现用于扩展echarts组件的两个必要接口：用于创建3D饼图界面的echarts.extendChartView及用于处理3D饼图数据配置的echarts.extendSeriesModel；所述echarts.extendChartView包括用于绘制具体3D饼图图形的render函数，所述echarts.extendSeriesModel包括用于3D饼图图形数
据的标准化处理的getInitialData函数、用于返回3D饼图的默认配置项的defaultOption函数以及用于在配置项发生变更后进行图形数据处理的optionUpdated函数；所述配置项包括3D饼图的数据data和3D饼图的空心度space；
[0014]利用配置项创建扇面生成器；
[0015]在render函数中创建echarts的实例，然后根据3D饼图的数据data创建若干个surface组件配置项，通过扇面生成器生成扇面曲面方程，并将扇面曲面方程赋值给surface组件配置项，将surface组件配置项合并成echarts总体配置，通过echarts.setOption函数将echarts总体配置赋值给echarts实例，完成脚本echarts
‑
pie3d.js的创建。
[0016]进一步地，所述配置项还包括3D饼图扇面的最大高度height、3D饼图的可视距离distance、3D饼图的仰角alpha以及3D饼图的颜色color。
[0017]进一步地，所述利用3D饼图的数据data创建扇面生成器，具体为：
[0018]将3D饼图的数据data内的数据求和，然后进行排序，并且计算出每一个数据在数据和中的占比，根据占比计算出数据的起始角度和结束角度，具体的公式如下：
[0019][0020]start＝(end
÷
2π
‑
d
i
)
×
2π
[0021]其中，n为data的个数，d
i
为data内每一项的数值，start为数据的起始角度，end为数据的结束角度；
[0022]设扇面曲面方程的参数u，v，k，d
i
，其中u为扇面的角度，v为扇面的半径，k为3D饼图的空心度，di为具体的值，u∈(
‑
π,3π)，v∈(0,2π)；
[0023]关于u，v的函数f(x)为：
[0024]当u<start时，函数f(x)为：
[0025]f(x)＝cos(start)
×
(1+cos(v)
×
k)
[0026]当u>end时，函数f(x)为：
[0027]f(x)＝cos(end)
×
(1+cos(v)
×
k)
[0028]其它情况时，函数f(x)为：
[0029]f(x)＝cos(u)
×
(1+cos(v)
×
k)
[0030]关于u，v的函数f(y)为：
[0031]当u<start时，函数f(y)为：
[0032]f(y)＝sin(start)
×
(1+cos(v)
×
k)
[0033]当u>end时，函数f(y)为：
[0034]f(y)＝sin(end)
×
(1+cos(v)
×
k)
[0035]其它情况时，函数f(y)为：
[0036]f(y)＝sin(u)
×
(1+cos(v)
×
k)
[0037]关于u，v的函数f(z)为：
[0038]当u<
‑
0.5π时，函数f(z)为：
[0039]f(z)＝sin(u)
[0040]当u>2.5π时，函数f(z)为：
[0041]f(z本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.实现3D饼图的方法，其特征在于，所述方法包括：创建HTML页面，通过script标签将javascript脚本echarts.js、echarts
‑
gl.js及echarts
‑
pie3d.js嵌入到HTML页面中；在HTML页面中加入DIV元素，并且通过echarts将DIV元素创建为echarts实例；创建3D饼图所需要的配置项，并且将配置项赋值到echarts实例，echarts
‑
pie3d.js即在HTML界面上生成对应的3D饼图；其中，所述脚本echarts.js为echarts的主要功能模块，所述脚本echarts
‑
gl.js为标准3D图表功能模块，所述脚本echarts
‑
pie3d.js为绘制3D饼图的主要功能模块。2.根据权利要求1所述的实现3D饼图的方法，其特征在于，所述脚本echarts
‑
pie3d.js的创建过程具体为：通过script标签将javascript脚本echarts.js和echarts
‑
gl.js嵌入到新的HTML页面中；创建echarts
‑
pie3d.js文件，所述echarts
‑
pie3d.js文件实现用于扩展echarts组件的两个必要接口：用于创建3D饼图界面的echarts.extendChartView及用于处理3D饼图数据配置的echarts.extendSeriesModel；所述echarts.extendChartView包括用于绘制具体3D饼图图形的render函数，所述echarts.extendSeriesModel包括用于3D饼图图形数据的标准化处理的getInitialData函数、用于返回3D饼图的默认配置项的defaultOption函数以及用于在配置项发生变更后进行图形数据处理的optionUpdated函数；所述配置项包括3D饼图的数据data和3D饼图的空心度space；利用配置项创建扇面生成器；在render函数中创建echarts的实例，然后根据3D饼图的数据data创建若干个surface组件配置项，通过扇面生成器生成扇面曲面方程，并将扇面曲面方程赋值给surface组件配置项，将surface组件配置项合并成echarts总体配置，通过echarts.setOption函数将echarts总体配置赋值给echarts实例，完成脚本echarts
‑
pie3d.js的创建。3.根据权利要求2所述的实现3D饼图的方法，其特征在于，所述配置项还包括3D饼图扇面的最大高度height、3D饼图的可视距离distance、3D饼图的仰角alpha以及3D饼图的颜色color。4.根据权利要求2所述的实现3D饼图的方法，其特征在于，所述利用3D饼图的数据data创建扇面生成器，具体为：将3D饼图的数据data内的数据求和，然后进行排序，并且计算出每一个数据在数据和中的占比，根据占比计算出数据的起始角度和结束角度，具体的公式如下：start＝(end
÷
2π
‑
d
i
)
×
2π其中，n为data的个数，d
i
为data内每一项的数值，start为数据的起始角度，end为数据的结束角度；设扇面曲面方程的参数u，v，k，d
i
，其中u为扇面的角度，v为扇面的半径，k为3D饼图的空心度，di为具体的值，u∈(
‑
π,3π)，v∈(0,2π)；
关于u，v的函数f(x)为：当u<start时，函数f(x)为：f(x)＝cos(start)
×
(1+cos(v)
×
k)当u>end时，函数f(x)为：f(x)＝cos(end)
×
(1+cos(v)
×
k)其它情况时，函数f(x)为：f(x)＝cos(u)
×
(1+cos(v)
×
k)关于u，v的函数f(y)为：当u<start时，函数f(y)为：f(y)＝sin(start)
×
(1+cos(v)
×
k)当u>end时，函数f(y)为：f(y)＝sin(end)
×
(1+cos(v)
×
k)其它情况时，函数f(y)为：f(y)＝sin(u)
×
(1+cos(v)
×
k)关于u，v的函数f(z)为：当u<
‑
0.5π时，函数f(z)为：f(z)＝sin(u)当u>2.5π时，函数f(z)为：f(z)＝sin(u)
×
d
i
×
0.1其它情况时，当sin(u)≥0时，函数f(z)为：f(z)＝d
i
×
0.1当sin(u)>0时，函数f(z)为：f(z)＝
‑
1根据以上所描述的曲面参数方程f(x)、f(y)和f(z)，创建扇面生成器。5.实现3D饼图的系统，其特征在于，包括：创建及嵌入模块：用于创建HTML页面，通过script标签将javascript脚本echarts.js、echarts
‑
gl.js及echarts

【专利技术属性】
技术研发人员：刘鹏飞，王毅，赵亮，
申请(专利权)人：西安西热电站信息技术有限公司，
类型：发明
国别省市：