{
  "animation": false,
  "darkMode": true,
  "color": [
    "#4992ff",
    "#7cffb2",
    "#fddd60",
    "#ff6e76",
    "#58d9f9",
    "#05c091",
    "#ff8a45",
    "#8d48e3",
    "#dd79ff"
  ],
  "backgroundColor": "#100C2A",
  "textStyle": {
    "color": "#B9B8CE",
    "fontFamily": "sans-serif",
    "fontSize": 12,
    "fontStyle": "normal",
    "fontWeight": "normal"
  },
  "timeAxis": {
    "axisLine": {
      "lineStyle": {
        "color": "#B9B8CE"
      }
    },
    "splitLine": {
      "lineStyle": {
        "color": "#484753"
      }
    },
    "splitArea": {
      "areaStyle": {
        "color": [
          "rgba(255,255,255,0.02)",
          "rgba(255,255,255,0.05)"
        ]
      }
    },
    "minorSplitLine": {
      "lineStyle": {
        "color": "#20203B"
      }
    }
  },
  "logAxis": {
    "axisLine": {
      "lineStyle": {
        "color": "#B9B8CE"
      }
    },
    "splitLine": {
      "lineStyle": {
        "color": "#484753"
      }
    },
    "splitArea": {
      "areaStyle": {
        "color": [
          "rgba(255,255,255,0.02)",
          "rgba(255,255,255,0.05)"
        ]
      }
    },
    "minorSplitLine": {
      "lineStyle": {
        "color": "#20203B"
      }
    }
  },
  "valueAxis": {
    "axisLine": {
      "lineStyle": {
        "color": "#B9B8CE"
      }
    },
    "splitLine": {
      "lineStyle": {
        "color": "#484753"
      }
    },
    "splitArea": {
      "areaStyle": {
        "color": [
          "rgba(255,255,255,0.02)",
          "rgba(255,255,255,0.05)"
        ]
      }
    },
    "minorSplitLine": {
      "lineStyle": {
        "color": "#20203B"
      }
    }
  },
  "categoryAxis": {
    "axisLine": {
      "lineStyle": {
        "color": "#B9B8CE"
      }
    },
    "splitLine": {
      "lineStyle": {
        "color": "#484753"
      },
      "show": false
    },
    "splitArea": {
      "areaStyle": {
        "color": [
          "rgba(255,255,255,0.02)",
          "rgba(255,255,255,0.05)"
        ]
      }
    },
    "minorSplitLine": {
      "lineStyle": {
        "color": "#20203B"
      }
    }
  },
  "line": {
    "symbol": "circle"
  },
  "graph": {
    "color": [
      "#4992ff",
      "#7cffb2",
      "#fddd60",
      "#ff6e76",
      "#58d9f9",
      "#05c091",
      "#ff8a45",
      "#8d48e3",
      "#dd79ff"
    ]
  },
  "gauge": {
    "title": {
      "color": "#B9B8CE"
    },
    "axisLine": {
      "lineStyle": {
        "color": [
          [
            1,
            "rgba(207,212,219,0.2)"
          ]
        ]
      }
    },
    "axisLabel": {
      "color": "#B9B8CE"
    },
    "detail": {
      "color": "#EEF1FA"
    }
  },
  "candlestick": {
    "itemStyle": {
      "color": "#FD1050",
      "color0": "#0CF49B",
      "borderColor": "#FD1050",
      "borderColor0": "#0CF49B"
    }
  },
  "gradientColor": [
    "#f6efa6",
    "#d88273",
    "#bf444c"
  ],
  "aria": {
    "decal": {
      "decals": [
        {
          "color": "rgba(0, 0, 0, 0.2)",
          "dashArrayX": [
            1,
            0
          ],
          "dashArrayY": [
            2,
            5
          ],
          "symbolSize": 1,
          "rotation": 0.5235987755982988
        },
        {
          "color": "rgba(0, 0, 0, 0.2)",
          "symbol": "circle",
          "dashArrayX": [
            [
              8,
              8
            ],
            [
              0,
              8,
              8,
              0
            ]
          ],
          "dashArrayY": [
            6,
            0
          ],
          "symbolSize": 0.8
        },
        {
          "color": "rgba(0, 0, 0, 0.2)",
          "dashArrayX": [
            1,
            0
          ],
          "dashArrayY": [
            4,
            3
          ],
          "dashLineOffset": 0,
          "rotation": -0.7853981633974483
        },
        {
          "color": "rgba(0, 0, 0, 0.2)",
          "dashArrayX": [
            [
              6,
              6
            ],
            [
              0,
              6,
              6,
              0
            ]
          ],
          "dashArrayY": [
            6,
            0
          ]
        },
        {
          "color": "rgba(0, 0, 0, 0.2)",
          "dashArrayX": [
            [
              1,
              0
            ],
            [
              1,
              6
            ]
          ],
          "dashArrayY": [
            1,
            0,
            6,
            0
          ],
          "rotation": 0.7853981633974483
        },
        {
          "color": "rgba(0, 0, 0, 0.2)",
          "symbol": "triangle",
          "dashArrayX": [
            [
              9,
              9
            ],
            [
              0,
              9,
              9,
              0
            ]
          ],
          "dashArrayY": [
            7,
            2
          ],
          "symbolSize": 0.75
        }
      ]
    }
  },
  "stateAnimation": {
    "duration": 300,
    "easing": "cubicOut"
  },
  "animationDuration": 1000,
  "animationDurationUpdate": 500,
  "animationEasing": "cubicInOut",
  "animationEasingUpdate": "cubicInOut",
  "animationThreshold": 2000,
  "progressiveThreshold": 3000,
  "progressive": 400,
  "hoverLayerThreshold": 3000,
  "useUTC": false,
  "title": [
    {
      "text": "Sales Trends by Year within Each Month",
      "subtext": "Sample of Cycle Plot",
      "left": "center",
      "padding": 15,
      "textStyle": {
        "color": "#EEF1FA",
        "fontSize": 18,
        "fontWeight": "bold"
      },
      "subtextStyle": {
        "color": "#B9B8CE",
        "fontSize": 12
      },
      "zlevel": 0,
      "z": 6,
      "show": true,
      "target": "blank",
      "subtarget": "blank",
      "top": 0,
      "backgroundColor": "rgba(0,0,0,0)",
      "borderColor": "#ccc",
      "borderWidth": 0,
      "itemGap": 10,
      "right": null
    }
  ],
  "axisPointer": [
    {
      "lineStyle": {
        "color": "#817f91",
        "width": 1,
        "type": "dashed"
      },
      "crossStyle": {
        "color": "#817f91"
      },
      "label": {
        "color": "#fff",
        "show": true,
        "formatter": null,
        "precision": "auto",
        "margin": 3,
        "padding": [
          5,
          7,
          5,
          7
        ],
        "backgroundColor": "auto",
        "borderColor": null,
        "borderWidth": 0,
        "borderRadius": 3
      },
      "show": "auto",
      "zlevel": 0,
      "z": 50,
      "type": "line",
      "snap": false,
      "triggerTooltip": true,
      "value": null,
      "status": null,
      "link": [],
      "animation": null,
      "animationDurationUpdate": 200,
      "shadowStyle": {
        "color": "rgba(210,219,238,0.2)"
      },
      "handle": {
        "show": false,
        "icon": "M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7v-1.2h6.6z M13.3,22H6.7v-1.2h6.6z M13.3,19.6H6.7v-1.2h6.6z",
        "size": 45,
        "margin": 50,
        "color": "#333",
        "shadowBlur": 3,
        "shadowColor": "#aaa",
        "shadowOffsetX": 0,
        "shadowOffsetY": 2,
        "throttle": 40
      }
    }
  ],
  "tooltip": [
    {
      "zlevel": 0,
      "z": 60,
      "show": true,
      "showContent": true,
      "trigger": "item",
      "triggerOn": "mousemove|click",
      "alwaysShowContent": false,
      "displayMode": "single",
      "renderMode": "auto",
      "confine": null,
      "showDelay": 0,
      "hideDelay": 100,
      "transitionDuration": 0.4,
      "enterable": false,
      "backgroundColor": "#fff",
      "shadowBlur": 10,
      "shadowColor": "rgba(0, 0, 0, .2)",
      "shadowOffsetX": 1,
      "shadowOffsetY": 2,
      "borderColor": "#333",
      "borderRadius": 4,
      "borderWidth": 1,
      "padding": null,
      "extraCssText": "",
      "axisPointer": {
        "type": "line",
        "axis": "auto",
        "animation": "auto",
        "animationDurationUpdate": 200,
        "animationEasingUpdate": "exponentialOut",
        "crossStyle": {
          "color": "#999",
          "width": 1,
          "type": "dashed",
          "textStyle": {}
        }
      },
      "textStyle": {
        "color": "#666",
        "fontSize": 14
      }
    }
  ],
  "yAxis": [
    {
      "boundaryGap": [
        0,
        "20%"
      ],
      "axisLine": {
        "lineStyle": {
          "color": "#B9B8CE",
          "width": 1,
          "type": "solid"
        },
        "show": "auto",
        "onZero": true,
        "onZeroAxisIndex": null,
        "symbol": [
          "none",
          "none"
        ],
        "symbolSize": [
          10,
          15
        ]
      },
      "splitLine": {
        "lineStyle": {
          "color": "#484753",
          "width": 1,
          "type": "solid"
        },
        "show": true
      },
      "splitArea": {
        "areaStyle": {
          "color": [
            "rgba(255,255,255,0.02)",
            "rgba(255,255,255,0.05)"
          ]
        },
        "show": false
      },
      "minorSplitLine": {
        "lineStyle": {
          "color": "#20203B",
          "width": 1
        },
        "show": false
      },
      "axisTick": {
        "show": "auto",
        "inside": false,
        "length": 5,
        "lineStyle": {
          "width": 1
        }
      },
      "splitNumber": 5,
      "minorTick": {
        "show": false,
        "splitNumber": 5,
        "length": 3,
        "lineStyle": {}
      },
      "show": true,
      "zlevel": 0,
      "z": 0,
      "inverse": false,
      "name": "",
      "nameLocation": "end",
      "nameRotate": null,
      "nameTruncate": {
        "maxWidth": null,
        "ellipsis": "...",
        "placeholder": "."
      },
      "nameTextStyle": {},
      "nameGap": 15,
      "silent": false,
      "triggerEvent": false,
      "tooltip": {
        "show": false
      },
      "axisPointer": {},
      "axisLabel": {
        "show": true,
        "inside": false,
        "rotate": 0,
        "showMinLabel": null,
        "showMaxLabel": null,
        "margin": 8,
        "fontSize": 12
      },
      "offset": 0,
      "categorySortInfo": [],
      "type": "value"
    }
  ],
  "xAxis": [
    {
      "data": [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
      "axisLine": {
        "lineStyle": {
          "color": "#B9B8CE",
          "width": 1,
          "type": "solid"
        },
        "show": true,
        "onZero": true,
        "onZeroAxisIndex": null,
        "symbol": [
          "none",
          "none"
        ],
        "symbolSize": [
          10,
          15
        ]
      },
      "splitLine": {
        "lineStyle": {
          "color": "#484753",
          "width": 1,
          "type": "solid"
        },
        "show": false
      },
      "splitArea": {
        "areaStyle": {
          "color": [
            "rgba(255,255,255,0.02)",
            "rgba(255,255,255,0.05)"
          ]
        },
        "show": false
      },
      "minorSplitLine": {
        "lineStyle": {
          "color": "#20203B"
        }
      },
      "boundaryGap": true,
      "deduplication": null,
      "axisTick": {
        "alignWithLabel": false,
        "interval": "auto",
        "show": true,
        "inside": false,
        "length": 5,
        "lineStyle": {
          "width": 1
        }
      },
      "axisLabel": {
        "interval": "auto",
        "show": true,
        "inside": false,
        "rotate": 0,
        "showMinLabel": null,
        "showMaxLabel": null,
        "margin": 8,
        "fontSize": 12
      },
      "show": true,
      "zlevel": 0,
      "z": 0,
      "inverse": false,
      "name": "",
      "nameLocation": "end",
      "nameRotate": null,
      "nameTruncate": {
        "maxWidth": null,
        "ellipsis": "...",
        "placeholder": "."
      },
      "nameTextStyle": {},
      "nameGap": 15,
      "silent": false,
      "triggerEvent": false,
      "tooltip": {
        "show": false
      },
      "axisPointer": {},
      "offset": 0,
      "categorySortInfo": [],
      "type": "category"
    }
  ],
  "grid": [
    {
      "bottom": 70,
      "top": 120,
      "show": false,
      "zlevel": 0,
      "z": 0,
      "left": "10%",
      "right": "10%",
      "containLabel": false,
      "backgroundColor": "rgba(0,0,0,0)",
      "borderWidth": 1,
      "borderColor": "#ccc"
    }
  ],
  "series": [
    {
      "type": "custom",
      "name": "Average",
      "renderItem": {},
      "encode": {
        "x": 0,
        "y": 1
      },
      "data": [
        [
          0,
          25.181818181818183
        ],
        [
          1,
          33.54545454545455
        ],
        [
          2,
          42
        ],
        [
          3,
          33.09090909090909
        ],
        [
          4,
          41.36363636363637
        ],
        [
          5,
          52
        ],
        [
          6,
          41.45454545454545
        ],
        [
          7,
          34.45454545454545
        ],
        [
          8,
          16.727272727272727
        ],
        [
          9,
          16.636363636363637
        ],
        [
          10,
          8.545454545454545
        ],
        [
          11,
          8.272727272727273
        ]
      ],
      "progressive": 100000,
      "animation": false,
      "coordinateSystem": "cartesian2d",
      "zlevel": 0,
      "z": 2,
      "legendHoverLink": true,
      "clip": false,
      "label": {},
      "emphasis": {
        "label": {}
      }
    },
    {
      "type": "custom",
      "name": "Trend by year (2002 - 2012)",
      "renderItem": {},
      "encode": {
        "x": 0,
        "y": [
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11
        ]
      },
      "data": [
        [
          0,
          14,
          18,
          22,
          25,
          29,
          29,
          22,
          25,
          26,
          29,
          38
        ],
        [
          1,
          21,
          24,
          31,
          32,
          38,
          35,
          32,
          34,
          35,
          39,
          48
        ],
        [
          2,
          25,
          28,
          36,
          38,
          47,
          49,
          37,
          41,
          46,
          55,
          60
        ],
        [
          3,
          21,
          24,
          28,
          34,
          33,
          34,
          30,
          33,
          40,
          38,
          49
        ],
        [
          4,
          26,
          33,
          37,
          39,
          44,
          43,
          35,
          39,
          47,
          55,
          57
        ],
        [
          5,
          32,
          37,
          43,
          48,
          57,
          57,
          44,
          47,
          61,
          67,
          79
        ],
        [
          6,
          27,
          30,
          35,
          38,
          41,
          41,
          38,
          44,
          47,
          53,
          62
        ],
        [
          7,
          20,
          25,
          30,
          29,
          39,
          37,
          31,
          32,
          41,
          41,
          54
        ],
        [
          8,
          10,
          13,
          13,
          14,
          16,
          20,
          16,
          17,
          20,
          19,
          26
        ],
        [
          9,
          11,
          14,
          13,
          14,
          16,
          17,
          17,
          17,
          18,
          20,
          26
        ],
        [
          10,
          5,
          6,
          7,
          8,
          9,
          9,
          8,
          9,
          9,
          11,
          13
        ],
        [
          11,
          5,
          6,
          7,
          8,
          8,
          10,
          7,
          8,
          10,
          11,
          11
        ]
      ],
      "progressive": 100000,
      "animation": false,
      "coordinateSystem": "cartesian2d",
      "zlevel": 0,
      "z": 2,
      "legendHoverLink": true,
      "clip": false,
      "label": {},
      "emphasis": {
        "label": {}
      }
    }
  ],
  "visualMap": [],
  "legend": [
    {
      "top": 70,
      "data": [
        "Trend by year (2002 - 2012)",
        "Average"
      ],
      "padding": 15,
      "textStyle": {
        "color": "#B9B8CE"
      },
      "zlevel": 0,
      "z": 4,
      "show": true,
      "orient": "horizontal",
      "left": "center",
      "align": "auto",
      "backgroundColor": "rgba(0,0,0,0)",
      "borderColor": "#ccc",
      "borderRadius": 0,
      "borderWidth": 0,
      "itemGap": 10,
      "itemWidth": 25,
      "itemHeight": 14,
      "inactiveColor": "#ccc",
      "inactiveBorderColor": "#ccc",
      "itemStyle": {
        "borderWidth": 0
      },
      "selectedMode": true,
      "selector": false,
      "selectorLabel": {
        "show": true,
        "borderRadius": 10,
        "padding": [
          3,
          5,
          3,
          5
        ],
        "fontSize": 12,
        "fontFamily": " sans-serif",
        "color": "#666",
        "borderWidth": 1,
        "borderColor": "#666"
      },
      "emphasis": {
        "selectorLabel": {
          "show": true,
          "color": "#eee",
          "backgroundColor": "#666"
        }
      },
      "selectorPosition": "auto",
      "selectorItemGap": 7,
      "selectorButtonGap": 10,
      "tooltip": {
        "show": false
      },
      "bottom": null,
      "selected": {}
    }
  ],
  "markArea": [
    {
      "zlevel": 0,
      "z": 1,
      "tooltip": {
        "trigger": "item"
      },
      "animation": false,
      "label": {
        "show": true,
        "position": "top"
      },
      "itemStyle": {
        "borderWidth": 0
      },
      "emphasis": {
        "label": {
          "show": true,
          "position": "top"
        }
      }
    }
  ],
  "markLine": [
    {
      "zlevel": 0,
      "z": 5,
      "symbol": [
        "circle",
        "arrow"
      ],
      "symbolSize": [
        8,
        16
      ],
      "precision": 2,
      "tooltip": {
        "trigger": "item"
      },
      "label": {
        "show": true,
        "position": "end",
        "distance": 5
      },
      "lineStyle": {
        "type": "dashed"
      },
      "emphasis": {
        "label": {
          "show": true
        },
        "lineStyle": {
          "width": 3
        }
      },
      "animationEasing": "linear"
    }
  ],
  "markPoint": [
    {
      "zlevel": 0,
      "z": 5,
      "symbol": "pin",
      "symbolSize": 50,
      "tooltip": {
        "trigger": "item"
      },
      "label": {
        "show": true,
        "position": "inside"
      },
      "itemStyle": {
        "borderWidth": 2
      },
      "emphasis": {
        "label": {
          "show": true
        }
      }
    }
  ],
  "brush": [],
  "dataZoom": [
    {
      "type": "slider",
      "labelFormatter": "",
      "borderColor": "#71708A",
      "textStyle": {
        "color": "#B9B8CE"
      },
      "brushStyle": {
        "color": "rgba(135,163,206,0.3)"
      },
      "handleStyle": {
        "color": "#353450",
        "borderColor": "#C5CBE3"
      },
      "moveHandleStyle": {
        "color": "#B0B6C3",
        "opacity": 0.3
      },
      "fillerColor": "rgba(135,163,206,0.2)",
      "emphasis": {
        "handleStyle": {
          "borderColor": "#91B7F2",
          "color": "#4D587D"
        },
        "moveHandleStyle": {
          "color": "#636D9A",
          "opacity": 0.7
        }
      },
      "dataBackground": {
        "lineStyle": {
          "color": "#71708A",
          "width": 1
        },
        "areaStyle": {
          "color": "#71708A",
          "opacity": 0.2
        }
      },
      "selectedDataBackground": {
        "lineStyle": {
          "color": "#87A3CE",
          "width": 0.5
        },
        "areaStyle": {
          "color": "#87A3CE",
          "opacity": 0.2
        }
      },
      "zlevel": 0,
      "z": 4,
      "filterMode": "filter",
      "start": 0,
      "end": 100,
      "show": true,
      "right": "ph",
      "top": "ph",
      "width": "ph",
      "height": "ph",
      "left": null,
      "bottom": null,
      "borderRadius": 3,
      "backgroundColor": "rgba(47,69,84,0)",
      "handleIcon": "path://M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z",
      "handleSize": "100%",
      "moveHandleSize": 7,
      "moveHandleIcon": "path://M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z",
      "showDetail": true,
      "showDataShadow": "auto",
      "realtime": true,
      "zoomLock": false,
      "brushSelect": true,
      "throttle": 20,
      "startValue": 0,
      "endValue": 11
    },
    {
      "type": "inside",
      "borderColor": "#71708A",
      "textStyle": {
        "color": "#B9B8CE"
      },
      "brushStyle": {
        "color": "rgba(135,163,206,0.3)"
      },
      "handleStyle": {
        "color": "#353450",
        "borderColor": "#C5CBE3"
      },
      "moveHandleStyle": {
        "color": "#B0B6C3",
        "opacity": 0.3
      },
      "fillerColor": "rgba(135,163,206,0.2)",
      "emphasis": {
        "handleStyle": {
          "borderColor": "#91B7F2",
          "color": "#4D587D"
        },
        "moveHandleStyle": {
          "color": "#636D9A",
          "opacity": 0.7
        }
      },
      "dataBackground": {
        "lineStyle": {
          "color": "#71708A",
          "width": 1
        },
        "areaStyle": {
          "color": "#71708A"
        }
      },
      "selectedDataBackground": {
        "lineStyle": {
          "color": "#87A3CE"
        },
        "areaStyle": {
          "color": "#87A3CE"
        }
      },
      "zlevel": 0,
      "z": 4,
      "filterMode": "filter",
      "start": 0,
      "end": 100,
      "disabled": false,
      "zoomLock": false,
      "zoomOnMouseWheel": true,
      "moveOnMouseMove": true,
      "moveOnMouseWheel": false,
      "preventDefaultMouseMove": true,
      "throttle": 20,
      "startValue": 0,
      "endValue": 11
    }
  ]
}