找回密码
 立即注册

QQ登录

只需一步,快速开始

何雨桐

注册会员

12

主题

43

帖子

147

积分

注册会员

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

最佳答案

查看完整内容

也可以啊,比如我要集成如下的一个样式: 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'],

  65.   }],

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

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

  157.           itemStyle: {
  158.               color: "#00ca95",
  159.               borderColor: "#fff",
  160.               borderWidth: 3,
  161.               shadowColor: 'rgba(0, 0, 0, .3)',
  162.               shadowBlur: 0,
  163.               shadowOffsetY: 2,
  164.               shadowOffsetX: 2,
  165.           },
  166.           tooltip: {
  167.               show: false
  168.           },
  169.           areaStyle: {
  170.               normal: {
  171.                   shadowColor: 'rgba(0,202,149, 0.9)',
  172.                   shadowBlur: 20
  173.               }
  174.           },
  175.           data: [281.55, 398.35, 214.02, 179.55, 289.57, 356.14, ],
  176.       },
  177.   ]
  178. };
  179. myOption.xAxis[0].data = option.xAxis.data
  180. myOption.series[0].data = option.series[0].data;
  181. myOption.series[1].data = option.series[1].data;
  182. 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
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 立即注册
返回顶部