如何可以把这些图应用到wyn里面

我需要下载什么软件或者需要操作什么？

何雨桐 发表于 2023-7-21 14:30
除了在原基础上手动一个个改，有没有更好的方法。手动那样改，感觉麻烦，数据还怕不准

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

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

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


然后复制makeapie中的全部代码

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


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


实现代码如下:

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.   }],
    
67. 
    
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',
    
87. 
    
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.           },
     
160. 
     
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的图表了

您在makeapie里面打开对应的图表

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

返回对应的option，即可加载


这种是完全覆盖的，也可以只去改某些options属性，这样就可以在原来的基础上修改。这种使用可以参考如下:
https://gcdn.grapecity.com.cn/showtopic-176379-1-1.html

Felix.Li 发表于 2023-7-21 11:38
您在makeapie里面打开对应的图表

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

除了在原基础上手动一个个改，有没有更好的方法。手动那样改，感觉麻烦，数据还怕不准

Felix.Li 发表于 2023-7-21 15:13
也可以啊，比如我要集成如下的一个样式:

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

好的，谢谢你·！！！！

何雨桐 发表于 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推出的所有渐变算法；



最终效果基本还原echarts原本展示: