永洪社区

标题: echart代码组件如何使用数据集 [打印本页]

---

作者: 李老中医    时间: 2024-6-6 17:24
标题: echart代码组件如何使用数据集

---

作者: 永洪tech_xh    时间: 2024-6-6 17:24
可以通过options.data或者options.column1来获取组件绑定的数据。

附带echarts雷达图示例与脚本

(, 下载次数: 344)

上传

点击文件名下载附件

1. var data = [ ]
   
2. //console.log(options.column1)
   
3. 
   
4. for(var i=0;i<options.column1.length;i++){
   
5. var data_temp =  {
   
6.         value : [options.column2[i], options.column3[i], options.column4[i], options.column5[i], options.column6[i], options.column7[i]],
   
7.         name : options.column1[i]
   
8.         }
   
9.     data[i]=data_temp
   
10.     //console.log(data_temp)
    
11. }
    
12. //console.log(data)
    
13. // 为保证正常绘图，代码格式与所选格式需保持一致;
    
14. // 请输入JS代码或前往官网复制示例代码;
    
15. // 复制完代码后，请先将代码中的数据列替换为绑定的数据列，绑定的数据列从上至下依次为column1、column2......，option部分请添加options.data以引用绑定列，chart绘制的DOM id会自动替换为变量$container
    
16. option = {
    
17.                                 //标题       
    
18.                             title: {
    
19.                                 text: '基础雷达图'
    
20.                             },
    
21.                             tooltip: {},
    
22.                             legend: {
    
23.                                 data: options.column1
    
24.                             },
    
25.                             radar: {
    
26.                                 // shape: 'circle',
    
27.                                 name: {
    
28.                                     textStyle: {
    
29.                                         color: '#fff',
    
30.                                         backgroundColor: '#999',
    
31.                                         borderRadius: 3,
    
32.                                         padding: [3, 5]
    
33.                                    }
    
34.                                 },
    
35.                                 indicator: [
    
36.                                    { name: '销售（sales）', max: 6500},
    
37.                                    { name: '管理（Administration）', max: 200000},
    
38.                                    { name: '信息技术（Information Techology）', max: 500000},
    
39.                                    { name: '客服（Customer Support）', max: 150000},
    
40.                                    { name: '研发（Development）', max: 300000},
    
41.                                    { name: '市场（Marketing）', max: 100000}
    
42.                                 ]
    
43.                             },
    
44.                             series: [{
    
45.                                 name: '预算 vs 开销（Budget vs spending）',
    
46.                                 type: 'radar',
    
47.                                 // areaStyle: {normal: {}},
    
48.                                 data : data
    
49.                             }]
    
50.                         };

复制代码

---

作者: 李老中医    时间: 2024-6-17 10:38
1

---

欢迎光临 永洪社区 (https://club.yonghongtech.com/)

Powered by Discuz! X3.4