2 paths: {
3 "echarts": "/Content/js/echarts-2.0.4/build/echarts",
4 "echarts/chart/pie": "/Content/js/echarts-2.0.4/build/echarts"
5 }
6 })
7 // 使用
8 require(
9 [
10 'echarts',
11 'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
12 ],
13 function (ec) {
14 // 基于准备好的dom，初始化echarts图表
15 var myChart = ec.init(document.getElementById('main'))
16 option = {
17 title: {
18 text: row.ProjectName,
19 x: 'center'
20 },
21 tooltip: {
22 trigger: 'item',
23 formatter: "{a} <br/>{b} : {c} ({d}%)"
24 },
25 legend: {
26 orient: 'vertical',
27 x: 'left',
28 data: (function () {
29 var name = []
30 com.ajax({
31 type: 'GET',
32 cache: false,
33 url: '/api/Operation/SafetyCheckReport/GetDangerName',
34 data: { "UpCode": DangerType },
35 success: function (d) {
36 for (var i = 0i <d.lengthi++) {
37 name.push(d[i].Name)
38 }
39 }
40 })
41 return name
42 })()
43 },
44 toolbox: {
45 show: true,
46 feature: {
47 restore: { show: true },
48 saveAsImage: { show: true }
49 }
50 },
51 calculable: false,
52 series: [
53 {
54 type: 'pie',
55 radius: '50%',
56 center: ['50%', '50%'],
57 data: (function () {
58 var arr = []
59 $.ajax({
60 type: 'GET',
61 async: false,
62 cache: false,
63 url: self.urls.querytow,
64 data: { "ProjectID": row.ProjectID, "UpCode": DangerType },
65 success: function (d) {
66 if (d[0].koujian != 0) {
67 arr.push({ value: d[0].koujian, name: '扣件式脚手架'})
68 } else {
69 arr.push({ value: d[0].koujian, name: '扣件式脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
70 }
71 if (d[0].menshi != 0) {
72 arr.push({ value: d[0].menshi, name: '门式脚手架'})
73 } else {
74 arr.push({ value: d[0].menshi, name: '门式脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
75 }
76 if (d[0].shuangpai != 0) {
77 arr.push({ value: d[0].shuangpai, name: '双排外竹脚手架'})
78 } else {
79 arr.push({ value: d[0].shuangpai, name: '双排外竹脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
80 }
81 if (d[0].wankou != 0) {
82 arr.push({ value: d[0].wankou, name: '碗扣式脚手架'})
83 } else {
84 arr.push({ value: d[0].wankou, name: '碗扣式脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
85 }
86 if (d[0].sanjiao != 0) {
87 arr.push({ value: d[0].sanjiao, name: '三角形钢管悬挑脚手架'})
88 } else {
89 arr.push({ value: d[0].sanjiao, name: '三角形钢管悬挑脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
90 }
91 if (d[0].xinggang != 0) {
92 arr.push({ value: d[0].xinggang, name: '型钢悬挑脚手架(阳角A)'})
93 } else {
94 arr.push({ value: d[0].xinggang, name: '型钢悬挑脚手架(阳角A)', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
95 }
96 if (d[0].duopai != 0) {
97 arr.push({ value: d[0].duopai, name: '多排悬挑架主梁验算'})
98 } else {
99 arr.push({ value: d[0].duopai, name: '多排悬挑架主梁验算', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
100 }
101 if (d[0].fuzhe != 0) {
102 arr.push({ value: d[0].fuzhe, name: '附着升降脚手架'})
103 } else {
104 arr.push({ value: d[0].fuzhe, name: '附着升降脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
105 }
106 if (d[0].xuangua != 0) {
107 arr.push({ value: d[0].xuangua, name: '悬挂式吊篮'})
108 } else {
109 arr.push({ value: d[0].xuangua, name: '悬挂式吊篮', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
110 }
111 if (d[0].gangguan != 0) {
112 arr.push({ value: d[0].gangguan, name: '钢管落地卸料平台'})
113 } else {
114 arr.push({ value: d[0].gangguan, name: '钢管落地卸料平台',itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
115 }
116 if (d[0].pingtai != 0) {
117 arr.push({ value: d[0].pingtai, name: '型钢悬挑卸料平台'})
118 } else {
119 arr.push({ value: d[0].pingtai, name: '型钢悬挑卸料平台',itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
120 }
121 if (d[0].jingjia != 0) {
122 arr.push({ value: d[0].jingjia, name: '井架落地卸料平台'})
123 } else {
124 arr.push({ value: d[0].jingjia, name: '井架落地卸料平台', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
125 }
126 if (d[0].fanghu != 0) {
127 arr.push({ value: d[0].fanghu, name: '防护棚'})
128 } else {
129 arr.push({ value: d[0].fanghu, name: '防护棚', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
130 }
131 if (d[0].mujiao != 0) {
132 arr.push({ value: d[0].mujiao, name: '木脚手架'})
133 } else {
134 arr.push({ value: d[0].mujiao, name: '木脚手架', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
135 }
136 if (d[0].xiedao != 0) {
137 arr.push({ value: d[0].xiedao, name: '斜道'})
138 } else {
139 arr.push({ value: d[0].xiedao, name: '斜道', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
140 }
141 if (d[0].xuantiao != 0) {
142 arr.push({ value: d[0].xuantiao, name: '悬挑防护棚'})
143 } else {
144 arr.push({ value: d[0].xuantiao, name: '悬挑防护棚', itemStyle : { normal: {label : {show: false},labelLine: { show: false }}}})
145 }
146
147 }
148 })
149 return arr
150 })()
151 }
152 ]
153 }
154 // 为echarts对象加载数据
155 myChart.setOption(option)
156 }
157 )
通常画可视化图的工具很多，除了d3.js，还有echarts.js等。
通过比较，看起来ECharts.js更容易上手，但是因为我需要更灵活更符合个性定制化的工具，所以选了d3.js。
经过一段时间的磨炼，从折线图、闭合路径图、蜂窝图、直角坐标、极坐标都玩了个遍。
那这次就来个3D的吧，其实d3.js做3D的图不是很容易的，有更好的选择，但我认准了d3.js，一条道走到黑吧(想起高中数学老师说的话，当你解题解到一半时发现有更好的办法，不，赶紧忘掉，接着当前的方法，只要方法没错，总能解出来，也许会傻一点，但是一定会有正确的结果；如果中途放弃，也许另一个方法更快更聪明，但也许更慢或者错误，不算到最后，谁都不知道谁最准确。我选择相信他的话，于是。。。我成了程序员O(∩_∩)O哈哈~)。
有人鄙视拿来主义，要我说，你能拿来那是你的本事，如果还能在此基础上做出更好的东西，何乐而不为呢？
每个人时间有限，每个项目也有deadline，不可能从每一个螺丝钉怎么拧开始学起，不然怎么会有那么多五花八门的框架，会有封装好的组件和接口，正因为有人已经做了前期工作，所以时间才能省下来做更有意义的事情，这就是站在巨人肩上的道理所在吧。
但是我们得明白拿来的东西的原理，以及出了问题该怎么解决的能力。然后才能做出更厉害的东西。
首选当然是官网的例子咯，目测搜了一圈，终于找到一个3D Donut。就是你了，我的巨人。
把该地址的donut3d.js拷贝下来作为画3D饼图的基础js，待会会在此基础上修改，以满足我的要求(长的像齿轮的要求)。
那我们就一睹她的芳容吧。
如果这张图符合你的要求，那就打住，不用往下看了，直接看官网例子即可。
注意d3版本的问题，如果你用d3.v3.js，恭喜你，啥也不用改，直接拿来用；如果你用d3.v5.js，那稍微改下方法，比如d3.v5.js没有d3.layout，所以d3.layout.pie改成d3.pie。我就是那个不幸的人，用的d3.v5.js。没关系，改起来很快，运行下，看哪里有错，就改哪里，O(∩_∩)O哈哈~so easy！
还是先上个我已经改好之后的3D饼图(齿轮图)吧，方便说明。
其实显示的时候是个动态的，一节一节显示出齿轮的。
背景是黑乎乎的，据说现在流行黑乎乎的背景，显得有科技感，技术也要赶时髦啊，我这么fashion的人，做出来的东西也要fashion啊O(∩_∩)O~
从以上分析可以看出，难啃的骨头在第4点。这个图断断续续花了3天时间才搞定，为啥是断断续续呢，因为还有其他工作要做嘛，你懂得。
那就按顺序一条一条实现，总有一天我们的愿望都能实现！
首先新建svg及设置宽高。
我是切分成了32个小齿轮(包含透明的)，如果你想分的更细，可以分成40或50个，只要你觉得好看就行。
既然要分成32个小立体快，那数据也要切分成32个。
通过以上处理，把数据整合成可以生成齿轮的完整数据dataset。
如果不增加左侧面和右侧面，那调用donut3d.js的draw方法后，会生成什么样的图形呢？
请各位仔细看。
是不是有种被掏空的感觉？如果你觉得这样挺好看，那也行，打住吧，后面就不用再看了；如果你想补齐其他面，请耐心往下看。
经过观察和比较，增加左侧面和右侧面就能填满空虚的心啦啦啦～
这次要在donut3d.js这个巨人身上添砖加瓦咯。
然后再用新增加的两个方法画出左右侧面。
终于填满需要的每一面，看上去像个立体齿轮图了。
这个图是很久之前做的，当时花了很长时间调试，每一个面有4条边，定位2个点，再加上高度和内半径，就可以计算出4个点，然后就可以画出4条边，最后填充颜色，一个面就完成了。
最近整理文档时觉得有必要写出来，方便以后查阅和探讨，也告诉自己积累是一个长期过程，不急不躁，慢慢来，一步一步完成既定目标，总有一天你会走遍技术的每个角落。
现在我整理成vue组件，传一个百分比的参数，就可以显示3D齿轮图了，我的3D齿轮图也成巨人啦。
