# Copyright 2020-2026 Lowdefy, Inc

# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at

#     http://www.apache.org/licenses/LICENSE-2.0

# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

- id: line
  type: EChart
  properties:
    option:
      {
        xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
        yAxis: { type: 'value' },
        series: [{ data: [150, 230, 224, 218, 135, 147, 260], type: 'line' }],
      }
- id: pie
  type: EChart
  properties:
    init:
      height: '600'
    option:
      {
        legend: { top: 'bottom' },
        toolbox:
          {
            show: true,
            feature:
              {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true },
              },
          },
        series:
          [
            {
              name: 'Data Pie',
              type: 'pie',
              radius: [50, 250],
              center: ['50%', '50%'],
              roseType: 'area',
              itemStyle: { borderRadius: 8 },
              data:
                [
                  { value: 40, name: 'rose 1' },
                  { value: 38, name: 'rose 2' },
                  { value: 32, name: 'rose 3' },
                  { value: 30, name: 'rose 4' },
                  { value: 28, name: 'rose 5' },
                  { value: 26, name: 'rose 6' },
                  { value: 22, name: 'rose 7' },
                  { value: 18, name: 'rose 8' },
                ],
            },
          ],
      }
- id: area with custom theme
  type: EChart
  properties:
    theme:
      {
        'color':
          [
            '#dd6b66',
            '#759aa0',
            '#e69d87',
            '#8dc1a9',
            '#ea7e53',
            '#eedd78',
            '#73a373',
            '#73b9bc',
            '#7289ab',
            '#91ca8c',
            '#f49f42',
          ],
        'backgroundColor': 'rgba(51,51,51,1)',
        'textStyle': {},
        'title': { 'textStyle': { 'color': '#eeeeee' }, 'subtextStyle': { 'color': '#aaaaaa' } },
        'line':
          {
            'itemStyle': { 'borderWidth': 1 },
            'lineStyle': { 'width': 2 },
            'symbolSize': 4,
            'symbol': 'circle',
            'smooth': false,
          },
        'radar':
          {
            'itemStyle': { 'borderWidth': 1 },
            'lineStyle': { 'width': 2 },
            'symbolSize': 4,
            'symbol': 'circle',
            'smooth': false,
          },
        'bar': { 'itemStyle': { 'barBorderWidth': 0, 'barBorderColor': '#ccc' } },
        'pie': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
        'scatter': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
        'boxplot': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
        'parallel': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
        'sankey': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
        'funnel': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
        'gauge': { 'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' } },
        'candlestick':
          {
            'itemStyle':
              {
                'color': '#fd1050',
                'color0': '#0cf49b',
                'borderColor': '#fd1050',
                'borderColor0': '#0cf49b',
                'borderWidth': 1,
              },
          },
        'graph':
          {
            'itemStyle': { 'borderWidth': 0, 'borderColor': '#ccc' },
            'lineStyle': { 'width': 1, 'color': '#aaa' },
            'symbolSize': 4,
            'symbol': 'circle',
            'smooth': false,
            'color':
              [
                '#dd6b66',
                '#759aa0',
                '#e69d87',
                '#8dc1a9',
                '#ea7e53',
                '#eedd78',
                '#73a373',
                '#73b9bc',
                '#7289ab',
                '#91ca8c',
                '#f49f42',
              ],
            'label': { 'color': '#eee' },
          },
        'map':
          {
            'itemStyle':
              {
                'normal': { 'areaColor': '#eee', 'borderColor': '#444', 'borderWidth': 0.5 },
                'emphasis':
                  { 'areaColor': 'rgba(255,215,0,0.8)', 'borderColor': '#444', 'borderWidth': 1 },
              },
            'label':
              {
                'normal': { 'textStyle': { 'color': '#000' } },
                'emphasis': { 'textStyle': { 'color': 'rgb(100,0,0)' } },
              },
          },
        'geo':
          {
            'itemStyle':
              {
                'normal': { 'areaColor': '#eee', 'borderColor': '#444', 'borderWidth': 0.5 },
                'emphasis':
                  { 'areaColor': 'rgba(255,215,0,0.8)', 'borderColor': '#444', 'borderWidth': 1 },
              },
            'label':
              {
                'normal': { 'textStyle': { 'color': '#000' } },
                'emphasis': { 'textStyle': { 'color': 'rgb(100,0,0)' } },
              },
          },
        'categoryAxis':
          {
            'axisLine': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
            'axisTick': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
            'axisLabel': { 'show': true, 'textStyle': { 'color': '#eeeeee' } },
            'splitLine': { 'show': true, 'lineStyle': { 'color': ['#aaaaaa'] } },
            'splitArea': { 'show': false, 'areaStyle': { 'color': ['#eeeeee'] } },
          },
        'valueAxis':
          {
            'axisLine': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
            'axisTick': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
            'axisLabel': { 'show': true, 'textStyle': { 'color': '#eeeeee' } },
            'splitLine': { 'show': true, 'lineStyle': { 'color': ['#aaaaaa'] } },
            'splitArea': { 'show': false, 'areaStyle': { 'color': ['#eeeeee'] } },
          },
        'logAxis':
          {
            'axisLine': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
            'axisTick': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
            'axisLabel': { 'show': true, 'textStyle': { 'color': '#eeeeee' } },
            'splitLine': { 'show': true, 'lineStyle': { 'color': ['#aaaaaa'] } },
            'splitArea': { 'show': false, 'areaStyle': { 'color': ['#eeeeee'] } },
          },
        'timeAxis':
          {
            'axisLine': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
            'axisTick': { 'show': true, 'lineStyle': { 'color': '#eeeeee' } },
            'axisLabel': { 'show': true, 'textStyle': { 'color': '#eeeeee' } },
            'splitLine': { 'show': true, 'lineStyle': { 'color': ['#aaaaaa'] } },
            'splitArea': { 'show': false, 'areaStyle': { 'color': ['#eeeeee'] } },
          },
        'toolbox':
          {
            'iconStyle':
              { 'normal': { 'borderColor': '#999' }, 'emphasis': { 'borderColor': '#666' } },
          },
        'legend': { 'textStyle': { 'color': '#eeeeee' } },
        'tooltip':
          {
            'axisPointer':
              {
                'lineStyle': { 'color': '#eeeeee', 'width': '1' },
                'crossStyle': { 'color': '#eeeeee', 'width': '1' },
              },
          },
        'timeline':
          {
            'lineStyle': { 'color': '#eeeeee', 'width': 1 },
            'itemStyle':
              {
                'normal': { 'color': '#dd6b66', 'borderWidth': 1 },
                'emphasis': { 'color': '#a9334c' },
              },
            'controlStyle':
              {
                'normal': { 'color': '#eeeeee', 'borderColor': '#eeeeee', 'borderWidth': 0.5 },
                'emphasis': { 'color': '#eeeeee', 'borderColor': '#eeeeee', 'borderWidth': 0.5 },
              },
            'checkpointStyle': { 'color': '#e43c59', 'borderColor': '#c23531' },
            'label':
              {
                'normal': { 'textStyle': { 'color': '#eeeeee' } },
                'emphasis': { 'textStyle': { 'color': '#eeeeee' } },
              },
          },
        'visualMap': { 'color': ['#bf444c', '#d88273', '#f6efa6'] },
        'dataZoom':
          {
            'backgroundColor': 'rgba(47,69,84,0)',
            'dataBackgroundColor': 'rgba(255,255,255,0.3)',
            'fillerColor': 'rgba(167,183,204,0.4)',
            'handleColor': '#a7b7cc',
            'handleSize': '100%',
            'textStyle': { 'color': '#eeeeee' },
          },
        'markPoint': { 'label': { 'color': '#eee' }, 'emphasis': { 'label': { 'color': '#eee' } } },
      }

    init:
      height: 600
    option:
      {
        title: { text: '堆叠区域图' },
        tooltip:
          {
            trigger: 'axis',
            axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } },
          },
        legend: { data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'] },
        toolbox: { feature: { saveAsImage: {} } },
        grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
        xAxis:
          [
            {
              type: 'category',
              boundaryGap: false,
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            },
          ],
        yAxis: [{ type: 'value' }],
        series:
          [
            {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              emphasis: { focus: 'series' },
              data: [120, 132, 101, 134, 90, 230, 210],
            },
            {
              name: '联盟广告',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              emphasis: { focus: 'series' },
              data: [220, 182, 191, 234, 290, 330, 310],
            },
            {
              name: '视频广告',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              emphasis: { focus: 'series' },
              data: [150, 232, 201, 154, 190, 330, 410],
            },
            {
              name: '直接访问',
              type: 'line',
              stack: '总量',
              areaStyle: {},
              emphasis: { focus: 'series' },
              data: [320, 332, 301, 334, 390, 330, 320],
            },
            {
              name: '搜索引擎',
              type: 'line',
              stack: '总量',
              label: { show: true, position: 'top' },
              areaStyle: {},
              emphasis: { focus: 'series' },
              data: [820, 932, 901, 934, 1290, 1330, 1320],
            },
          ],
      }