自定义组件

通用组件：支持ECharts组件的所有属性，并能够生成相应的图表。这需要您具备一定的 ECharts使用经验；下面为自定义组件的使用指南

1、效果展示

2、添加通用组件

3、样式配置

• 基础设置：(基础配置)
• 标题设置：(标题配置)
• 自定义配置：输入ECharts配置项option内容，格式为{}，花括号内包含ECharts的属性，详细格式参考4、数据格式
• 坐标轴边距：(坐标轴边距)
• 图例设置：(图例设置)

4、数据格式

echars图表配置项

echars示例

{
  "color": [
    "#80FFA5",
    "#00DDFF",
    "#37A2FF",
    "#FF0087",
    "#FFBF00"
  ],
  "title": {
    "text": "折线图"
  },
  "tooltip": {
    "trigger": "axis",
    "axisPointer": {
      "type": "cross",
      "label": {
        "backgroundColor": "#6a7985"
      }
    }
  },
  "legend": {
    "data": [
      "Line 1",
      "Line 2",
      "Line 3",
      "Line 4",
      "Line 5"
    ]
  },
  "grid": {
    "left": "3%",
    "right": "4%",
    "bottom": "3%",
    "containLabel": true
  },
  "xAxis": [
    {
      "type": "category",
      "boundaryGap": false,
      "data": [
        "Mon",
        "Tue",
        "Wed",
        "Thu",
        "Fri",
        "Sat",
        "Sun"
      ]
    }
  ],
  "yAxis": [
    {
      "type": "value"
    }
  ],
  "series": [
    {
      "name": "Line 1",
      "type": "line",
      "stack": "Total",
      "smooth": true,
      "lineStyle": {
        "width": 0
      },
      "showSymbol": false,
      "areaStyle": {
        "opacity": 0.8,
        "color": {
          "colorStops": [
            {
              "offset": 0,
              "color": "rgb(128, 255, 165)"
            },
            {
              "offset": 1,
              "color": "rgb(1, 191, 236)"
            }
          ],
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false
        }
      },
      "emphasis": {
        "focus": "series"
      },
      "data": [
        140,
        232,
        101,
        264,
        90,
        340,
        250
      ]
    },
    {
      "name": "Line 2",
      "type": "line",
      "stack": "Total",
      "smooth": true,
      "lineStyle": {
        "width": 0
      },
      "showSymbol": false,
      "areaStyle": {
        "opacity": 0.8,
        "color": {
          "colorStops": [
            {
              "offset": 0,
              "color": "rgb(0, 221, 255)"
            },
            {
              "offset": 1,
              "color": "rgb(77, 119, 255)"
            }
          ],
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false
        }
      },
      "emphasis": {
        "focus": "series"
      },
      "data": [
        120,
        282,
        111,
        234,
        220,
        340,
        310
      ]
    },
    {
      "name": "Line 3",
      "type": "line",
      "stack": "Total",
      "smooth": true,
      "lineStyle": {
        "width": 0
      },
      "showSymbol": false,
      "areaStyle": {
        "opacity": 0.8,
        "color": {
          "colorStops": [
            {
              "offset": 0,
              "color": "rgb(55, 162, 255)"
            },
            {
              "offset": 1,
              "color": "rgb(116, 21, 219)"
            }
          ],
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false
        }
      },
      "emphasis": {
        "focus": "series"
      },
      "data": [
        320,
        132,
        201,
        334,
        190,
        130,
        220
      ]
    },
    {
      "name": "Line 4",
      "type": "line",
      "stack": "Total",
      "smooth": true,
      "lineStyle": {
        "width": 0
      },
      "showSymbol": false,
      "areaStyle": {
        "opacity": 0.8,
        "color": {
          "colorStops": [
            {
              "offset": 0,
              "color": "rgb(255, 0, 135)"
            },
            {
              "offset": 1,
              "color": "rgb(135, 0, 157)"
            }
          ],
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false
        }
      },
      "emphasis": {
        "focus": "series"
      },
      "data": [
        220,
        402,
        231,
        134,
        190,
        230,
        120
      ]
    },
    {
      "name": "Line 5",
      "type": "line",
      "stack": "Total",
      "smooth": true,
      "lineStyle": {
        "width": 0
      },
      "showSymbol": false,
      "label": {
        "show": true,
        "position": "top"
      },
      "areaStyle": {
        "opacity": 0.8,
        "color": {
          "colorStops": [
            {
              "offset": 0,
              "color": "rgb(255, 191, 0)"
            },
            {
              "offset": 1,
              "color": "rgb(224, 62, 76)"
            }
          ],
          "x": 0,
          "y": 0,
          "x2": 0,
          "y2": 1,
          "type": "linear",
          "global": false
        }
      },
      "emphasis": {
        "focus": "series"
      },
      "data": [
        220,
        302,
        181,
        234,
        210,
        290,
        150
      ]
    }
  ]
}