feat: echarts完善1

src/services/echarts.ts

@@ -40,30 +40,33 @@ export const charts = [
                 bottom: 20,
                 left: 20,
                 right: 20,
-                top: 80,
+                top: 100,
                 containLabel: true,
               },
-
               title: {
                 text: "标题",
                 textStyle: {
                   fontSize: 16,
                 },
-                top: 0,
-                left: 20
+                padding: 5,
+                top: 16,
+                left: 16
               },
               // 图例
               legend:{
                 data:['系列1'], // 该数组中的内容要与series中的每项的name对应
                 textStyle:{
-                  fontSize: 12
+                  fontSize: 12,
                 },
                 itemWidth: 25,
-                top: 30,
-                itemHeight: 14
+                itemHeight: 14,
+                top: 48,
+                padding:5,
               },
               // 提示框组件
               tooltip: {
+                backgroundColor: 'rgba(24,24,24,0.95)',
+                borderColor: 'rgba(24,24,24,0.95)',
                 trigger: 'axis',
                 axisPointer: {
                   type: "shadow"
@@ -81,6 +84,9 @@ export const charts = [
                   fontSize: 12,
                   margin: 10
                 },
+                axisTick:{
+                  alignWithLabel:true
+                }
               },
               yAxis: {
                 type: 'value',
@@ -88,6 +94,8 @@ export const charts = [
                 nameGap: 15,
                 nameTextStyle:{
                   fontSize: 12,
+                  align:'right',
+                  padding:[0,6,0,6]
                 },
                 splitNumber: 2,
                 minInterval: 50,
@@ -845,6 +853,164 @@ export const charts = [
           },
         },
       },
+
+      {
+        name: '渐变单曲线图',
+        icon: 'l-quxian',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              grid: {
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 40,
+                containLabel: true,
+              },
+              fontSize: 10,
+              xAxis: {
+                type: 'category',
+                data: ['0', '6', '12', '18', '24'],
+                axisLabel: {
+                  fontSize: 12,
+                  fontFamily:'PingFang SC, PingFang SC-Regular',
+                  fontWeight:400,
+                  margin: 10,
+                  color:'#b3d1ff'
+                },
+                axisTick:{
+                  show: false
+                },
+                axisLine:{
+                  lineStyle:{
+                    color:'rgba(255,255,255,0.2)'
+                  }
+                }
+              },
+              yAxis: {
+                type: 'value',
+                name: '单位：kwh ',
+                nameGap:15,
+                min:0,
+                max:100,
+                interval:25,
+                nameTextStyle: {
+                  fontSize: 12,
+                  padding:[0,6,0,6],
+                  color:'rgba(179,209,255,0.6)',
+
+                },
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  fontFamily:'PingFang SC, PingFang SC-Regular',
+                  fontWeight:400,
+                  margin:10,
+                  color: 'rgba(179,209,255,0.5)',
+                },
+              },
+              series: [
+                {
+                  type: 'line',
+                  smooth: true,
+                  data: [50, 40, 80, 50, 60, 30],
+                  lineStyle:{
+                    width: 2,
+                    color: {
+                      type: 'linear',
+                      x: 0,
+                      y: 0,
+                      x2: 1,
+                      y2: 0,
+                      colorStops: [{
+                        offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
+                      },  {
+                        offset: 0.5, color: 'rgba(69,131,255,0.50)' // 100% 处的颜色
+                      },
+                        {
+                          offset: 1, color: 'rgba(69,131,255,0.0)' // 100% 处的颜色
+                        }],
+                      global: false // 缺省为 false
+                    }
+                  },
+                  areaStyle:{
+                    color: {
+                      type: 'linear',
+                      x: 0,
+                      y: 0,
+                      x2: 1,
+                      y2: 0,
+                      colorStops: [{
+                        offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
+                      },  {
+                          offset: 0.5, color: 'rgba(69,131,255,0.50)' // 100% 处的颜色
+                        },
+                        {
+                          offset: 1, color: 'rgba(69,131,255,0.0)' // 100% 处的颜色
+                        }],
+                      global: false // 缺省为 false
+                    }
+                  },
+                  symbolSize: 0,
+                },
+              ],
+            },
+            max: 30,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0',
+              label: '0',
+              type: 'float',
+              enableMock: true,
+              mock: '10-40',
+            },
+            {
+              key: 'echarts.option.series.0.data.1',
+              label: '6',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.2',
+              label: '12',
+              type: 'float',
+              enableMock: true,
+              mock: '0-50',
+            },
+            {
+              key: 'echarts.option.series.0.data.3',
+              label: '18',
+              type: 'float',
+              enableMock: true,
+              mock: '20-60',
+            },
+            {
+              key: 'echarts.option.series.0.data.4',
+              label: '24',
+              type: 'float',
+              enableMock: true,
+              mock: '0-80',
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+
       {
         name: '阶梯折线图',
         icon: 'l-jietizhexian',
@@ -1730,6 +1896,443 @@ export const charts = [
           },
         },
       },
+      {
+        name: '渐变柱状图',
+        icon: 'l-bar-chart',
+        data: {
+          name: 'echarts',
+          width: 366,
+          height: 206,
+          externElement: true,
+          disableAnchor: true,
+          echarts: {
+            option: {
+              barWidth: '20%',
+              grid: {
+                bottom: 8,
+                left: 8,
+                right: 8,
+                top: 40,
+                containLabel: true,
+              },
+              fontSize: 10,
+              xAxis: {
+                type: 'category',
+                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
+                axisLabel: {
+                  fontSize: 12,
+                  fontFamily:'PingFang SC, PingFang SC-Regular',
+                  fontWeight:400,
+                  margin: 10,
+                  color:'#b3d1ff',
+                  padding:[0,10,0,0]
+                },
+                axisTick:{
+                  show:false
+                }
+              },
+              yAxis: {
+                name:'单位：万kwh',
+                nameGap:15,
+                nameTextStyle: {
+                  fontSize: 12,
+                  padding:[0,6,0,6],
+                  color:'rgba(179,209,255,0.6)',
+                },
+                minInterval: 50,
+                axisLabel: {
+                  fontSize: 12,
+                  fontFamily:'PingFang SC, PingFang SC-Regular',
+                  fontWeight:400,
+                  margin:10,
+                  color: 'rgba(179,209,255,0.5)',
+                },
+                type: 'value',
+                splitNumber: 2,
+                min:0,
+                max:600,
+                interval:150,
+              },
+              series: [
+                {
+                  type: 'bar',
+                  barWidth: 12,
+                  // barGap:'-180%',
+                  data: [
+                    {
+                      value: 360,
+                      itemStyle: {
+                        color: {
+                          type:'linear',
+                          x: 0,
+                          y: 0,
+                          x2: 0,
+                          y2: 1,
+                          colorStops: [{
+                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
+                          }, {
+                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
+                          }],
+                          global: false // 缺省为 false
+                        }
+                      },
+                    },
+                    {
+                      value: 160,
+                      itemStyle: {
+                        color: {
+                          type:'linear',
+                          x: 0,
+                          y: 0,
+                          x2: 0,
+                          y2: 1,
+                          colorStops: [{
+                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
+                          }, {
+                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
+                          }],
+                          global: false // 缺省为 false
+                        }
+                      },
+                    },
+                    {
+                      value: 475,
+                      itemStyle: {
+                        color: {
+                          type:'linear',
+                          x: 0,
+                          y: 0,
+                          x2: 0,
+                          y2: 1,
+                          colorStops: [{
+                            offset: 0, color: 'rgba(50,167,192,0)' // 0% 处的颜色
+                          }, {
+                            offset: 1, color: 'rgba(50,167,192,1.0)' // 100% 处的颜色
+                          }],
+                          global: false // 缺省为 false
+                        }
+                      },
+                    },
+                    {
+                      value: 200,
+                      itemStyle: {
+                        color: {
+                          type:'linear',
+                          x: 0,
+                          y: 0,
+                          x2: 0,
+                          y2: 1,
+                          colorStops: [{
+                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
+                          }, {
+                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
+                          }],
+                          global: false // 缺省为 false
+                        }
+                      },
+                    },
+                    {
+                      value: 320,
+                      itemStyle: {
+                        color: {
+                          type:'linear',
+                          x: 0,
+                          y: 0,
+                          x2: 0,
+                          y2: 1,
+                          colorStops: [{
+                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
+                          }, {
+                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
+                          }],
+                          global: false // 缺省为 false
+                        }
+                      },
+                    },
+                    {
+                      value: 430,
+                      itemStyle: {
+                        color:{
+                          type:'linear',
+                          x: 0,
+                          y: 0,
+                          x2: 0,
+                          y2: 1,
+                          colorStops: [{
+                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
+                          }, {
+                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
+                          }],
+                          global: false // 缺省为 false
+                        }
+                      },
+                    },
+                  ],
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
+                }, {
+                  type: 'bar',
+                  itemStyle: {
+                    normal: {
+                      color: 'rgba(255,255,255,0.05)'
+                    }
+                  },
+                  silent: true,
+                  barWidth: 28,
+                  barGap: '-166.5%',
+                  lineStyle:{
+                    width: 2
+                  },
+                  symbolSize: 5,
+                  data: [600, 600, 600, 600,600,600]
+                },
+                {
+                  data: [{
+                    value:360
+                  }, {
+                   value:160
+                  }, {
+                    value:475
+                  }, {
+                    value: 200
+                  }, {
+                    value:320
+                  }, {
+                    value:430
+                  }],
+                  type: "line",
+                  symbol: "path://M0,0L0,0L0,0L0,0L0,0Z m106.00003051757812,653l806.9999694824219,0l0,99l-806.9999694824219,0l0,-99Z",
+                  symbolOffset:[-4.7,0],
+                  symbolSize:13.3,
+                  barGap: '-190%',
+                  barWidth:12,
+                  lineStyle: {
+                    color: "rgba(0, 0, 0, 0)"
+                  },
+                  itemStyle:{
+                    color: "#ffffff"
+                  }
+                }
+              ],
+            },
+            max: 100,
+          },
+          realTimes: [
+            {
+              key: 'echarts.option.series.0.data.0.value',
+              label: '1月',
+              type: 'float',
+              enableMock: true,
+              mock: '10-400',
+              // triggers: [
+              //   {
+              //     name: '触发器1',
+              //     conditionType: 'and',
+              //     conditions: [],
+              //     actions: [
+              //       {
+              //         action: 5,
+              //         params: '',
+              //         value:
+              //           "let v = pen.echarts.option.series[0].data[0].value;meta2d.setValue({id:pen.id,'echarts.option.series.2.data.0.value':v},{doEvent:false,render:true});",
+              //         targetType: 'id',
+              //         props: [],
+              //         input: '',
+              //       },
+              //     ],
+              //   },
+              // ]
+            },
+            {
+              key: 'echarts.option.series.0.data.1.value',
+              label: '2月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-500',
+              // triggers: [
+              //   {
+              //     name: '触发器1',
+              //     conditionType: 'and',
+              //     conditions: [],
+              //     actions: [
+              //       {
+              //         action: 5,
+              //         params: '',
+              //         value:
+              //           "let v = pen.echarts.option.series[0].data[1].value;meta2d.setValue({id:pen.id,'echarts.option.series.2.data.1.value':v},{doEvent:false,render:true});",
+              //         targetType: 'id',
+              //         props: [],
+              //         input: '',
+              //       },
+              //     ],
+              //   },
+              // ]
+            },
+            {
+              key: 'echarts.option.series.0.data.2.value',
+              label: '3月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-500',
+              // triggers: [
+              //   {
+              //     name: '触发器1',
+              //     conditionType: 'and',
+              //     conditions: [],
+              //     actions: [
+              //       {
+              //         action: 5,
+              //         params: '',
+              //         value:
+              //           "let v = pen.echarts.option.series[0].data[2].value;meta2d.setValue({id:pen.id,'echarts.option.series.2.data.2.value':v},{doEvent:false});",
+              //         targetType: 'id',
+              //         props: [],
+              //         input: '',
+              //       },
+              //     ],
+              //   },
+              // ]
+            },
+            {
+              key: 'echarts.option.series.0.data.3.value',
+              label: '4月',
+              type: 'float',
+              enableMock: true,
+              mock: '20-600',
+              // triggers: [
+              //   {
+              //     name: '触发器1',
+              //     conditionType: 'and',
+              //     conditions: [],
+              //     actions: [
+              //       {
+              //         action: 5,
+              //         params: '',
+              //         value:
+              //           "let v = pen.echarts.option.series[0].data[3].value;meta2d.setValue({id:pen.id,'echarts.option.series.2.data.3.value':v},{doEvent:false});",
+              //         targetType: 'id',
+              //         props: [],
+              //         input: '',
+              //       },
+              //     ],
+              //   },
+              // ]
+            },
+            {
+              key: 'echarts.option.series.0.data.4.value',
+              label: '5月',
+              type: 'float',
+              enableMock: true,
+              mock: '0-600',
+              // triggers: [
+              //   {
+              //     name: '触发器1',
+              //     conditionType: 'and',
+              //     conditions: [],
+              //     actions: [
+              //       {
+              //         action: 5,
+              //         params: '',
+              //         value:
+              //           "let v = pen.echarts.option.series[0].data[4].value;meta2d.setValue({id:pen.id,'echarts.option.series.2.data.4.value':v},{doEvent:false});",
+              //         targetType: 'id',
+              //         props: [],
+              //         input: '',
+              //       },
+              //     ],
+              //   },
+              // ]
+            },
+            {
+              key: 'echarts.option.series.0.data.5.value',
+              label: '6月',
+              type: 'float',
+              enableMock: true,
+              mock: '100-600',
+              triggers: [
+                {
+                  name: '触发器1',
+                  conditionType: 'and',
+                  conditions: [],
+                  actions: [
+                    {
+                      action: 5,
+                      params: '',
+                      value:
+                        `let v1 = pen.echarts.option.series[0].data[0].value;
+                        let v2 = pen.echarts.option.series[0].data[1].value;
+                        let v3 = pen.echarts.option.series[0].data[2].value;
+                        let v4 = pen.echarts.option.series[0].data[3].value;
+                        let v5 = pen.echarts.option.series[0].data[4].value;
+                        let v6 = pen.echarts.option.series[0].data[5].value;
+
+                        meta2d.setValue({id:pen.id,
+                          'echarts.option.series.2.data.0.value':v1,
+                          'echarts.option.series.2.data.1.value':v2,
+                          'echarts.option.series.2.data.2.value':v3,
+                          'echarts.option.series.2.data.3.value':v4,
+                          'echarts.option.series.2.data.4.value':v5,
+                          'echarts.option.series.2.data.5.value':v6
+                        },{doEvent:false,render:true});
+                        let arr = [v1,v2,v3,v4,v5,v6];
+                        let max = 0;
+                        for(let i = 0;i<arr.length;i++ ){
+                          if(arr[i] > arr[max]){
+                            max = i
+                          }
+                        };
+                        pen.echarts.option.series[0].data.forEach((i)=>{
+                            i.itemStyle.color = {
+                          type:'linear',
+                          x: 0,
+                          y: 0,
+                          x2: 0,
+                          y2: 1,
+                          colorStops: [{
+                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
+                          }, {
+                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
+                          }],
+                          global: false // 缺省为 false
+                        }
+                        })
+                         pen.echarts.option.series[0].data[max].itemStyle.color = {
+                          type:'linear',
+                          x: 0,
+                          y: 0,
+                          x2: 0,
+                          y2: 1,
+                          colorStops: [{
+                            offset: 0, color: 'rgba(50,167,192,0)' // 0% 处的颜色
+                          }, {
+                            offset: 1, color: 'rgba(50,167,192,1.0)' // 100% 处的颜色
+                          }],
+                          global: false // 缺省为 false
+                        }
+                        `,
+                      targetType: 'id',
+                      props: [],
+                      input: '',
+                    },
+                  ],
+                },
+              ]
+            },
+          ],
+          props: {
+            custom: [
+              {
+                key: 'echarts',
+                label: 'echarts配置',
+                type: 'code',
+              },
+            ],
+          },
+        },
+      },
+
     ],
   },
   {