组件图表拖动到左侧，代码提示找不到getProps这个函数

麻烦上传报错截图

永洪Tech-wj 发表于 2021-11-4 15:57
麻烦上传报错截图

传了三个图麻烦看下，谢谢

永洪Tech-wj 发表于 2021-11-4 15:57
麻烦上传报错截图

1. import {register} from 'yh-plugin-manager';
   
2. import echarts from "echarts";
   
3. 
   
4. const plugin = {
   
5.    getProps: () => {
   
6.      return [
   
7.        {
   
8.          group: "titleOption",
   
9.          type: "string",
   
10.          key: "title",
    
11.          value: "漏斗图"
    
12.        },
    
13.        {
    
14.          group: "titleOption",
    
15.          type: "boolean",
    
16.          key: "titleOption_visible",
    
17.          value: true
    
18.        },
    
19.        {
    
20.          group: "titleOption",
    
21.          type: "font",
    
22.          key: "titleFont",
    
23.        },
    
24.        {
    
25.          group: "titleOption",
    
26.          type: "combo",
    
27.          key: "titlePosition",
    
28.          value: "top",
    
29.          option: ["top", "bottom"],
    
30.        },
    
31.        {
    
32.          group: "legendOption",
    
33.          type: "chartColor",
    
34.          key: "chartColor"
    
35.        },
    
36.        {
    
37.          group: "legendOption",
    
38.          type: "boolean",
    
39.          key: "legendOption_visible",
    
40.          value: true
    
41.        },
    
42.        {
    
43.          group: "legendOption",
    
44.          type: "font",
    
45.          key: "legendFont"
    
46.        },
    
47.        {
    
48.          group: "legendOption",
    
49.          type: "combo",
    
50.          key: "legendPosition",
    
51.          value: "right",
    
52.          option: ["left", "top", "right", "bottom"],
    
53.        },
    
54.        {
    
55.          group: "valueOption",
    
56.          type: "boolean",
    
57.          key: "valueOption_visible",
    
58.          value: true
    
59.        },
    
60.        {
    
61.          group: "valueOption",
    
62.          type: "font",
    
63.          key: "valueFont"
    
64.        },
    
65.        {
    
66.          group: "valueOption",
    
67.          type: "combo",
    
68.          key: "valuePosition",
    
69.          option: ["left", "right", "inside"],
    
70.          value: "inside"
    
71.        },
    
72.      ];
    
73.    },
    
74.    getLocalView: (key) => {
    
75.      const LocalSetting = {
    
76.        "PluginName": {"zh_CN": "漏斗图\n1个维度\n1个度量", "en_US": "Funnel\n1 dimension\n1 measure", "ja_JP": "ファンネルチャート\n1次元\n1指標", "zh_TW": "漏斗圖\n1個維度\n1個度量"},
    
77.        "title": {"zh_CN": "漏斗图", "en_US": "Funnel", "ja_JP": "ファンネルチャート", "zh_TW": "漏斗圖"},
    
78.        "valueFont": {"zh_CN": "", "en_US": "", "ja_JP": "", "zh_TW": ""},
    
79.        "legendFont": {"zh_CN": "", "en_US": "", "ja_JP": "", "zh_TW": ""},
    
80.        "chartColor": {"zh_CN": "图例颜色", "en_US": "Legend Color", "ja_JP": "凡例の色", "zh_TW": "圖例顏色"},
    
81.        "titlePosition": {"zh_CN": "位置", "en_US": "Position", "ja_JP": "位置", "zh_TW": "位置"},
    
82.        "titleFont": {"zh_CN": "", "en_US": "", "ja_JP": "", "zh_TW": ""},
    
83.        "titleOption": {"zh_CN": "标题选项", "en_US": "Title", "ja_JP": "タイトル", "zh_TW": "標題選項"},
    
84.        "left": {"zh_CN": "左", "en_US": "Left", "ja_JP": "左", "zh_TW": "左"},
    
85.        "top": {"zh_CN": "上", "en_US": "Top", "ja_JP": "上", "zh_TW": "上"},
    
86.        "right": {"zh_CN": "右", "en_US": "Right", "ja_JP": "右", "zh_TW": "右"},
    
87.        "bottom": {"zh_CN": "下", "en_US": "Bottom", "ja_JP": "下", "zh_TW": "下"},
    
88.        "inside": {"zh_CN": "内部", "en_US": "Inside", "ja_JP": "内部", "zh_TW": "內部"},
    
89.        "legendOption": {"zh_CN": "图例选项", "en_US": "Legent", "ja_JP": "凡例", "zh_TW": "圖例選項"},
    
90.        "valueOption": {"zh_CN": "数值选项", "en_US": "Value", "ja_JP": "数値", "zh_TW": "數值選項"},
    
91.        "legendPosition": {"zh_CN": "位置", "en_US": "Position", "ja_JP": "位置", "zh_TW": "位置"},
    
92.        "valuePosition": {"zh_CN": "位置", "en_US": "Position", "ja_JP": "位置", "zh_TW": "位置"},
    
93.      }
    
94. 
    
95.      return LocalSetting[key];
    
96.    },
    
97.    getBindInfo: () => {
    
98.      return {
    
99.        xcolumns: [
    
100.        {
     
101.          index: 0,
     
102.          isDim: true
     
103.        }],
     
104.        ycolumns: [
     
105.        {
     
106.          index: 0,
     
107.          isDim: false
     
108.        }]
     
109.      };
     
110.    },
     
111.    render: (domName, props, grid = null, qinfo = null) => {
     
112.       if(document.getElementById(domName) == null) {
     
113.          return;
     
114.       }
     
115. 
     
116.       let funnel = echarts.init(document.getElementById(domName));
     
117.       funnel.resize();
     
118. 
     
119.       if(grid == null || grid.csize() < 2) {
     
120.          funnel.dispose();
     
121.          funnel = null;
     
122.          return;
     
123.       }
     
124. 
     
125.       funnel.resize({
     
126.          width: "auto",
     
127.          height: "auto"
     
128.       });
     
129.       let option = {
     
130.          toolbox: {
     
131.             feature: {
     
132.             }
     
133.          },
     
134.          legend: {
     
135.             icon: 'rect'
     
136.          },
     
137.          cursor: "default",
     
138.          calculable: true,
     
139.          series: [
     
140.          ]
     
141.       };
     
142. 
     
143.       let funnel0 = {
     
144.          type:'funnel',
     
145.          min: 0,
     
146.          max: 100,
     
147.          minSize: '0%',
     
148.          maxSize: '100%',
     
149.          sort: 'descending',
     
150.          gap: 2,
     
151.          label: {
     
152.             normal: {
     
153.                show: true,
     
154.                position: 'inside'
     
155.             },
     
156.             emphasis: {
     
157.                textStyle: {
     
158.                   fontSize: 20
     
159.                }
     
160.             }
     
161.          },
     
162.          labelLine: {
     
163.             normal: {
     
164.                length: 10,
     
165.                lineStyle: {
     
166.                   width: 1,
     
167.                   type: 'solid'
     
168.                }
     
169.             }
     
170.          },
     
171.          itemStyle: {
     
172.             normal: {
     
173.                borderColor: '#fff',
     
174.                borderWidth: 1
     
175.             }
     
176.          }
     
177.       };
     
178. 
     
179.       if(props.chartColor) {
     
180.         option.color = props.chartColor;
     
181.       }
     
182. 
     
183.       if(props.legendFont) {
     
184.          let legendFont = props.legendFont;
     
185. 
     
186.          option.legend.textStyle = {
     
187.             color: legendFont.fontColor,
     
188.             fontFamily: legendFont.fontFamily,
     
189.             fontStyle: legendFont.fontStyle,
     
190.             fontWeight: legendFont.fontWeight,
     
191.             fontSize: legendFont.fontSize
     
192.          };
     
193.       }
     
194. 
     
195.       //legend position.
     
196.       switch(props.legendPosition) {
     
197.       case "left":
     
198.          option.legend.y = 'center';
     
199.          option.legend.orient = 'vertical';
     
200.          break;
     
201.       case "top":
     
202.          option.legend.left = "center";
     
203.          option.legend.orient = 'horizontal';
     
204.          break;
     
205.       case "right":
     
206.          option.legend.left = "auto";
     
207.          option.legend.y = 'center';
     
208.          option.legend.orient = 'vertical';
     
209.          break;
     
210.       case "bottom":
     
211.          option.legend.left = "center";
     
212.          option.legend.orient = 'horizontal';
     
213.          break;
     
214.       }
     
215. 
     
216.       if(props.legendOption_visible != undefined) {
     
217.          option.legend.show = props.legendOption_visible;
     
218.       }
     
219. 
     
220.       // legend page
     
221.       option.legend.type = 'scroll';
     
222.       option.legend.pageButtonItemGap = 0;
     
223.       // texture in right of icon.
     
224.       option.legend.align = 'left';
     
225. 
     
226. 
     
227.      // graph bounds
     
228.      let data = [];
     
229. 
     
230.      for(let i = 1; i < grid.rsize(); i++) {
     
231.        if(grid.get(i, 0) != null && grid.get(i, 1) != 0) {
     
232.           data.push({value: Number(grid.get(i, 1)), name: grid.get(i, 0), value0: Number(grid.get(i, 1))});
     
233.        }
     
234.      }
     
235. 
     
236.      let maxName = data[0].name;
     
237. 
     
238.      for(let i = 1; i< data.length; i++) {
     
239.         if(data[i].name.length > maxName.length) {
     
240.            maxName = data[i].name;
     
241.         }
     
242.      }
     
243. 
     
244.      data.sort(function(a, b) {
     
245.        return b.value == a.value ? 0 : (b.value > a.value ? 1 : -1);
     
246.      });
     
247. 
     
248.      for(let i = 0; i < data.length; i++) {
     
249.         data[i].value = data[i].value / data[0].value0 * 100;
     
250.      }
     
251. 
     
252.      funnel0.data = data;
     
253.      option.series.push(funnel0);
     
254.      funnel.off('legendselectchanged');
     
255.      funnel.on('legendselectchanged', function (params) {
     
256.         const result = [];
     
257.         let view = qinfo.xcols[0].col.getView(false);
     
258. 
     
259.         if(params.selected) {
     
260.             for(let key in params.selected) {
     
261.                params.selected[key] && result.push([{[view]: key}]);
     
262.             }
     
263.         }
     
264. 
     
265.         props.filter(result);
     
266.      });
     
267.      funnel.setOption(option, true);
     
268.    }
     
269. }
     
270. 
     
271. /**
     
272. * The YHPluginManager register the user-customized plugin.
     
273. */
     
274. register(plugin);
     

复制代码