找回密码
 立即注册

QQ登录

只需一步，快速开始

首页 › Wyn 商业智能专区 › 求助中心 › 查看内容
发新帖

何雨桐

注册会员

12

主题

43

帖子

147

积分

注册会员

积分
147
最新发帖

[已处理] 如何可以把这些图应用到wyn里面

何雨桐
注册会员   /  发表于：2023-7-21 10:40  /   查看：2312  /  回复：5
1金币
1689907103475.png226169737.png 1689907092915.png251669005.png 我需要下载什么软件或者需要操作什么？

最佳答案

Felix.Li

查看完整内容

也可以啊，比如我要集成如下的一个样式: https://www.makeapie.cn/echarts_content/xXbP45bsC.html 先选中折线图,并按照连接中的绑定两个数据: 然后复制makeapie中的全部代码 并将option = {**} 改成let myoption = {**} 截图如下: 然后在最后只替换数据和分类，然后删除一些全局属性即可，并返回自己的myOption: 实现代码如下: 这样就可以很快的集成一个echarts的图表了

5 个回复

倒序浏览
最佳答案
最佳答案
Felix.LiWyn认证
超级版主   /  发表于：2023-7-21 10:40:34
来自 4#
何雨桐 发表于 2023-7-21 14:30
除了在原基础上手动一个个改，有没有更好的方法。手动那样改，感觉麻烦，数据还怕不准

也可以啊，比如我要集成如下的一个样式:

https://www.makeapie.cn/echarts_content/xXbP45bsC.html

先选中折线图,并按照连接中的绑定两个数据:
image.png426236266.png

然后复制makeapie中的全部代码

并将option = {**}
改成let myoption = {**}
截图如下:
image.png299948424.png

然后在最后只替换数据和分类，然后删除一些全局属性即可，并返回自己的myOption:
image.png314692076.png

实现代码如下:
  1. let myOption = {
  2.   backgroundColor: '#080b30',
  3.   title: {
  4.       text: '哎呦,不错哦',
  5.       textStyle: {
  6.           align: 'center',
  7.           color: '#fff',
  8.           fontSize: 20,
  9.       },
  10.       top: '5%',
  11.       left: 'center',
  12.   },
  13.   tooltip: {
  14.       trigger: 'axis',
  15.       axisPointer: {
  16.           lineStyle: {
  17.               color: {
  18.                   type: 'linear',
  19.                   x: 0,
  20.                   y: 0,
  21.                   x2: 0,
  22.                   y2: 1,
  23.                   colorStops: [{
  24.                       offset: 0,
  25.                       color: 'rgba(0, 255, 233,0)'
  26.                   }, {
  27.                       offset: 0.5,
  28.                       color: 'rgba(255, 255, 255,1)',
  29.                   }, {
  30.                       offset: 1,
  31.                       color: 'rgba(0, 255, 233,0)'
  32.                   }],
  33.                   global: false
  34.               }
  35.           },
  36.       },
  37.   },
  38.   grid: {
  39.       top: '15%',
  40.       left: '5%',
  41.       right: '5%',
  42.       bottom: '15%',
  43.       // containLabel: true
  44.   },
  45.   xAxis: [{
  46.       type: 'category',
  47.       axisLine: {
  48.           show: true
  49.       },
  50.       splitArea: {
  51.           // show: true,
  52.           color: '#f00',
  53.           lineStyle: {
  54.               color: '#f00'
  55.           },
  56.       },
  57.       axisLabel: {
  58.           color: '#fff'
  59.       },
  60.       splitLine: {
  61.           show: false
  62.       },
  63.       boundaryGap: false,
  64.       data: ['A', 'B', 'C', 'D', 'E', 'F'],

  66.   }],

  68.   yAxis: [{
  69.       type: 'value',
  70.       min: 0,
  71.       // max: 140,
  72.       splitNumber: 4,
  73.       splitLine: {
  74.           show: true,
  75.           lineStyle: {
  76.               color: 'rgba(255,255,255,0.1)'
  77.           }
  78.       },
  79.       axisLine: {
  80.           show: false,
  81.       },
  82.       axisLabel: {
  83.           show: false,
  84.           margin: 20,
  85.           textStyle: {
  86.               color: '#d1e6eb',

  88.           },
  89.       },
  90.       axisTick: {
  91.           show: false,
  92.       },
  93.   }],
  94.   series: [{
  95.           name: '注册总量',
  96.           type: 'line',
  97.           // smooth: true, //是否平滑
  98.           showAllSymbol: true,
  99.           // symbol: 'image://./static/images/guang-circle.png',
  100.           symbol: 'circle',
  101.           symbolSize: 25,
  102.           lineStyle: {
  103.               normal: {
  104.                   color: "#6c50f3",
  105.                   shadowColor: 'rgba(0, 0, 0, .3)',
  106.                   shadowBlur: 0,
  107.                   shadowOffsetY: 5,
  108.                   shadowOffsetX: 5,
  109.               },
  110.           },
  111.           label: {
  112.               show: true,
  113.               position: 'top',
  114.               textStyle: {
  115.                   color: '#6c50f3',
  116.               }
  117.           },
  118.           itemStyle: {
  119.               color: "#6c50f3",
  120.               borderColor: "#fff",
  121.               borderWidth: 3,
  122.               shadowColor: 'rgba(0, 0, 0, .3)',
  123.               shadowBlur: 0,
  124.               shadowOffsetY: 2,
  125.               shadowOffsetX: 2,
  126.           },
  127.           tooltip: {
  128.               show: false
  129.           },
  130.           areaStyle: {
  131.               normal: {
  132.                   shadowColor: 'rgba(108,80,243, 0.9)',
  133.                   shadowBlur: 20
  134.               }
  135.           },
  136.           data: [502.84, 205.97, 332.79, 281.55, 398.35, 214.02, ]
  137.       },
  138.       {
  139.           name: '注册总量',
  140.           type: 'line',
  141.           showAllSymbol: true,
  142.           symbol: 'circle',
  143.           symbolSize: 25,
  144.           lineStyle: {
  145.               normal: {
  146.                   color: "#00ca95",
  147.                   shadowColor: 'rgba(0, 0, 0, .3)',
  148.                   shadowBlur: 0,
  149.                   shadowOffsetY: 5,
  150.                   shadowOffsetX: 5,
  151.               },
  152.           },
  153.           label: {
  154.               show: true,
  155.               position: 'top',
  156.               textStyle: {
  157.                   color: '#00ca95',
  158.               }
  159.           },

  161.           itemStyle: {
  162.               color: "#00ca95",
  163.               borderColor: "#fff",
  164.               borderWidth: 3,
  165.               shadowColor: 'rgba(0, 0, 0, .3)',
  166.               shadowBlur: 0,
  167.               shadowOffsetY: 2,
  168.               shadowOffsetX: 2,
  169.           },
  170.           tooltip: {
  171.               show: false
  172.           },
  173.           areaStyle: {
  174.               normal: {
  175.                   shadowColor: 'rgba(0,202,149, 0.9)',
  176.                   shadowBlur: 20
  177.               }
  178.           },
  179.           data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
  180.       },
  181.   ]
  182. };
  183. myOption.xAxis[0].data = option.xAxis.data
  184. myOption.series[0].data = option.series[0].data;
  185. myOption.series[1].data = option.series[1].data;
  186. return myOption;
复制代码
这样就可以很快的集成一个echarts的图表了
回复 使用道具 举报
Felix.LiWyn认证
超级版主   /  发表于：2023-7-21 11:38:14
2#
本帖最后由 Felix.Li 于 2023-7-21 11:46 编辑

您在makeapie里面打开对应的图表
image.png983201904.png
然后将里面对应的属性直接复制在如下地方:
image.png291942137.png
返回对应的option，即可加载


这种是完全覆盖的，也可以只去改某些options属性，这样就可以在原来的基础上修改。这种使用可以参考如下:
https://gcdn.grapecity.com.cn/showtopic-176379-1-1.html
回复 使用道具 举报
何雨桐
注册会员   /  发表于：2023-7-21 14:30:55
3#
Felix.Li 发表于 2023-7-21 11:38
您在makeapie里面打开对应的图表

然后将里面对应的属性直接复制在如下地方:

除了在原基础上手动一个个改，有没有更好的方法。手动那样改，感觉麻烦，数据还怕不准
回复 使用道具 举报
何雨桐
注册会员   /  发表于：2023-7-21 15:27:49
5#
Felix.Li 发表于 2023-7-21 15:13
也可以啊，比如我要集成如下的一个样式:

https://www.makeapie.cn/echarts_content/xXbP45bsC.html

好的，谢谢你·！！！！
回复 使用道具 举报
Felix.LiWyn认证
超级版主   /  发表于：2023-7-21 15:35:58
6#
本帖最后由 Felix.Li 于 2023-7-21 15:37 编辑
何雨桐 发表于 2023-7-21 15:27
好的，谢谢你·！！！！

然后使用渐变的话可以改一种写法

颜色渐变由echart对象生成::
  1. color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  2.                             offset: 0,
  3.                             color: 'rgba(0,202,149,0.3)'
  4.                         },
  5.                         {
  6.                             offset: 1,
  7.                             color: 'rgba(0,202,149,0)'
  8.                         }
  9.                     ], false),
复制代码
使用color原始实现:
  1. color: {
  2.           type: 'linear',
  3.           x: 0,
  4.           y: 0,
  5.           x2: 0,
  6.           y2: 1,
  7.           colorStops: [
  8.             {
  9.               offset: 0,
  10.               color: 'rgba(0,202,149,0.3)' // 0% 处的颜色
  11.             },
  12.             {
  13.               offset: 1,
  14.               color: 'rgba(0,202,149,0)' // 100% 处的颜色
  15.             }
  16.           ],
  17.           global: false // 缺省为 false
  18.         },
复制代码
关于所有渐变的类型，可以参考echarts推出的所有渐变算法；
image.png629626159.png


最终效果基本还原echarts原本展示:
image.png610894469.png
回复 使用道具 举报
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
产品与服务
活字格低代码平台
Wyn 商业智能软件
SpreadJS纯前端表格控件
技术服务体系
技术博客
低代码技术
客户与案例
典型客户
成功案例
用户访谈
合作与生态
合作伙伴网络
葡萄城市场
葡萄城与国产化
活字格用友客开工具
品牌活动
葡萄城公开课
品牌战略发布会
赋能开发者高峰论坛
企业级低代码发展研讨会
企业级低代码应用大赛
表格技术研讨会
了解葡萄城
葡萄城简介
愿景使命
研发与创新
荣誉奖项
加入我们
联系方式
联系我们
400-657-6008

葡萄城社区二维码

关注“葡萄城社区”

赋能开发者

西安葡萄城软件有限公司
专业的软件开发技术和低代码平台提供商

陕ICP备2020018819号  |   陕公网安备：61019002000258  |   隐私政策  |   网站地图  

邮箱： info.xa@grapecity.com  |  © 2024 葡萄城软件，保留所有权利

Archiver| 手机版| 小黑屋|

返回顶部