找文章 / 找答案

echart代码组件如何使用数据集

李老中医铂金一 显示全部楼层 发表于 2024-6-6 17:24:19 |阅读模式 打印 上一主题 下一主题
1
已解决

echart代码组件如何使用数据集

213 2

最佳答案

永洪tech_xh 铂金三 关注Ta

2024-06-06 17:24:20

可以通过options.data或者options.column1来获取组件绑定的数据。 附带echarts雷达图示例与脚本
查看完整内容
回复

使用道具 举报

精彩评论2

永洪tech_xh铂金三 显示全部楼层 发表于 2024-6-6 17:24:20
可以通过options.data或者options.column1来获取组件绑定的数据。

附带echarts雷达图示例与脚本

图1.png
  1. var data = [ ]
  2. //console.log(options.column1)

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


echarts雷达图.jar

6.64 KB, 下载次数: 0

回复

使用道具 举报

李老中医铂金一 显示全部楼层 发表于 2024-6-17 10:38:51
1
回复

使用道具 举报

高级模式
您需要登录后才可以回帖 登录 | 免费注册

  • 官方微信

    欢迎关注永洪服务号!收费为0,价值无限

    扫码关注
  • 新浪微博

    让每位用户轻松挖掘数据价值!

    访问新浪微博
  • 智能客服
50W

会员等你来哦

Copyright   ©2012-2024  北京永洪商智科技有限公司  (京ICP备12050607) 京公网安备110110802011451号 |联系社区管理员|《永洪社区协议》
返回顶部