visualization-design/src/services/echarts.ts

import { ReplaceMode } from '@meta2d/chart-diagram';

//注册所有主题
export function registerTheme() {
  fetch('theme/dark.json')
    .then((r) => r.json())
    .then((theme) => {
      echarts.registerTheme('le-dark', theme);
    });
}

export function changeTheme(theme: string) {
  charts.forEach((item) => {
    item.list.forEach((chart) => {
      if (chart.data.name === 'echarts') {
        chart.data.echarts.theme = theme;
      }
    });
  });
}

export const charts = [
  {
    name: 'Echarts - 基础图表',
    show: true,
    list: [
      {
        name: '折线图',
        icon: 'l-line-chart',
        data: {
          name: 'echarts',
          width: 400,
          height: 300,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              tooltip: {
                trigger: 'axis',
              },
              grid: {
                top: 10,
                bottom: 20,
                left: 40,
                right: 5,
              },
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisLabel: {
                  fontSize: 12,
                  // color: '#ffffff',
                },
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  fontSize: 12,
                  // color: '#ffffff',
                },
              },
              series: [
                {
                  type: 'line',
                  data: [820, 932, 901, 934, 1290, 1330, 1320],
                },
              ],
            },
            max: 100,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
            {
              key: 'echarts.max',
              label: '最大数量',
              type: 'number',
            },
          ],
        },
      },
      {
        name: '柱状图',
        icon: 'l-bar-chart',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              tooltip: {
                trigger: 'axis',
              },
              grid: {
                top: 10,
                bottom: 20,
                left: 40,
                right: 5,
              },
              xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                axisTick: {
                  alignWithLabel: true,
                },
                axisLabel: {
                  fontSize: 12,
                  color: '#ffffff',
                },
              },
              yAxis: {
                type: 'value',
                axisLabel: {
                  fontSize: 12,
                  color: '#ffffff',
                },
              },
              series: [
                {
                  name: '直接访问',
                  type: 'bar',
                  barWidth: '60%',
                  label: {
                    color: '#ffffff',
                  },
                  data: [10, 52, 200, 334, 390, 330, 220],
                },
              ],
            },
            max: 100,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
            {
              key: 'echarts.max',
              label: '最大数量',
              type: 'number',
            },
          ],
        },
      },
      {
        name: '饼图',
        icon: 'l-pie-chart',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              tooltip: {
                trigger: 'item',
              },
              series: [
                {
                  type: 'pie',
                  radius: ['50%', '70%'],
                  label: {
                    color: '#ffffff',
                  },
                  data: [
                    { value: 335, name: '2D' },
                    { value: 310, name: '3D' },
                    { value: 234, name: '大屏' },
                    { value: 135, name: '物联网平台' },
                    { value: 1548, name: '图形库' },
                  ],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
          ],
        },
      },
      {
        name: '散点图',
        icon: 'l-sandiantu',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              grid: {
                top: 10,
                bottom: 20,
                left: 40,
                right: 10,
              },
              xAxis: {
                axisLabel: {
                  fontSize: 12,
                  color: '#ffffff',
                },
              },
              yAxis: {
                axisLabel: {
                  fontSize: 12,
                  color: '#ffffff',
                },
              },
              series: [
                {
                  symbolSize: 10,
                  data: [
                    [10.0, 8.04],
                    [8.07, 6.95],
                    [13.0, 7.58],
                    [9.05, 8.81],
                    [11.0, 8.33],
                    [14.0, 7.66],
                    [13.4, 6.81],
                    [10.0, 6.33],
                    [14.0, 8.96],
                    [12.5, 6.82],
                    [9.15, 7.2],
                    [11.5, 7.2],
                    [3.03, 4.23],
                    [12.2, 7.83],
                    [2.02, 4.47],
                    [1.05, 3.33],
                    [4.05, 4.96],
                    [6.03, 7.24],
                    [12.0, 6.26],
                    [12.0, 8.84],
                    [7.08, 5.82],
                    [5.02, 5.68],
                  ],
                  type: 'scatter',
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
          ],
        },
      },
      {
        name: 'K线图',
        icon: 'l-kxiantu',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              grid: {
                top: 20,
                bottom: 30,
                left: 40,
                right: 10,
              },
              xAxis: {
                axisLabel: {
                  fontSize: 12,
                  color: '#ffffff',
                },
                data: ['2017-10-24', '2017-10-25', '2017-10-26', '2017-10-27'],
              },
              yAxis: {
                axisLabel: {
                  fontSize: 12,
                  color: '#ffffff',
                },
              },
              series: [
                {
                  type: 'candlestick',
                  data: [
                    [20, 34, 10, 38],
                    [40, 35, 30, 50],
                    [31, 38, 33, 44],
                    [38, 15, 5, 42],
                  ],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
          ],
        },
      },
      {
        name: '雷达图',
        icon: 'l-leidatu',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              grid: {
                top: 20,
                bottom: 30,
                left: 40,
                right: 10,
              },
              radar: {
                // shape: 'circle',
                indicator: [
                  { name: 'Sales', max: 6500 },
                  { name: 'Administration', max: 16000 },
                  { name: 'Information Technology', max: 30000 },
                  { name: 'Customer Support', max: 38000 },
                  { name: 'Development', max: 52000 },
                  { name: 'Marketing', max: 25000 },
                ],
              },
              series: [
                {
                  name: 'Budget vs spending',
                  type: 'radar',
                  data: [
                    {
                      value: [4200, 3000, 20000, 35000, 50000, 18000],
                      name: 'Allocated Budget',
                    },
                    {
                      value: [5000, 14000, 28000, 26000, 42000, 21000],
                      name: 'Actual Spending',
                    },
                  ],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
          ],
        },
      },
      {
        name: '旭日图',
        icon: 'l-xuritu',
        data: {
          width: 200,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              series: [
                {
                  radius: ['15%', '80%'],
                  type: 'sunburst',
                  data: [
                    {
                      children: [
                        {
                          value: 5,
                          children: [
                            {
                              value: 1,
                              itemStyle: {
                                color: '#F54F4A',
                              },
                            },
                            {
                              value: 2,
                              children: [
                                {
                                  value: 1,
                                  itemStyle: {
                                    color: '#FF8C75',
                                  },
                                },
                              ],
                            },
                            {
                              children: [
                                {
                                  value: 1,
                                },
                              ],
                            },
                          ],
                          itemStyle: {
                            color: '#F54F4A',
                          },
                        },
                        {
                          value: 10,
                          children: [
                            {
                              value: 6,
                              children: [
                                {
                                  value: 1,
                                  itemStyle: {
                                    color: '#F54F4A',
                                  },
                                },
                                {
                                  value: 1,
                                },
                                {
                                  value: 1,
                                  itemStyle: {
                                    color: '#FF8C75',
                                  },
                                },
                                {
                                  value: 1,
                                },
                              ],
                              itemStyle: {
                                color: '#FFB499',
                              },
                            },
                            {
                              value: 2,
                              children: [
                                {
                                  value: 1,
                                },
                              ],
                              itemStyle: {
                                color: '#FFB499',
                              },
                            },
                            {
                              children: [
                                {
                                  value: 1,
                                  itemStyle: {
                                    color: '#FF8C75',
                                  },
                                },
                              ],
                            },
                          ],
                          itemStyle: {
                            color: '#F54F4A',
                          },
                        },
                      ],
                      itemStyle: {
                        color: '#F54F4A',
                      },
                    },
                    {
                      value: 9,
                      children: [
                        {
                          value: 4,
                          children: [
                            {
                              value: 2,
                              itemStyle: {
                                color: '#FF8C75',
                              },
                            },
                            {
                              children: [
                                {
                                  value: 1,
                                  itemStyle: {
                                    color: '#F54F4A',
                                  },
                                },
                              ],
                            },
                          ],
                          itemStyle: {
                            color: '#F54F4A',
                          },
                        },
                        {
                          children: [
                            {
                              value: 3,
                              children: [
                                {
                                  value: 1,
                                },
                                {
                                  value: 1,
                                  itemStyle: {
                                    color: '#FF8C75',
                                  },
                                },
                              ],
                            },
                          ],
                          itemStyle: {
                            color: '#FFB499',
                          },
                        },
                      ],
                      itemStyle: {
                        color: '#FF8C75',
                      },
                    },
                    {
                      value: 7,
                      children: [
                        {
                          children: [
                            {
                              value: 1,
                              itemStyle: {
                                color: '#FFB499',
                              },
                            },
                            {
                              value: 3,
                              children: [
                                {
                                  value: 1,
                                  itemStyle: {
                                    color: '#FF8C75',
                                  },
                                },
                                {
                                  value: 1,
                                },
                              ],
                              itemStyle: {
                                color: '#FF8C75',
                              },
                            },
                            {
                              value: 2,
                              children: [
                                {
                                  value: 1,
                                },
                                {
                                  value: 1,
                                  itemStyle: {
                                    color: '#F54F4A',
                                  },
                                },
                              ],
                              itemStyle: {
                                color: '#F54F4A',
                              },
                            },
                          ],
                          itemStyle: {
                            color: '#FFB499',
                          },
                        },
                      ],
                      itemStyle: {
                        color: '#F54F4A',
                      },
                    },
                    {
                      children: [
                        {
                          value: 6,
                          children: [
                            {
                              value: 1,
                              itemStyle: {
                                color: '#FF8C75',
                              },
                            },
                            {
                              value: 2,
                              children: [
                                {
                                  value: 2,
                                  itemStyle: {
                                    color: '#FF8C75',
                                  },
                                },
                              ],
                              itemStyle: {
                                color: '#F54F4A',
                              },
                            },
                            {
                              value: 1,
                              itemStyle: {
                                color: '#FFB499',
                              },
                            },
                          ],
                          itemStyle: {
                            color: '#FFB499',
                          },
                        },
                        {
                          value: 3,
                          children: [
                            {
                              value: 1,
                            },
                            {
                              children: [
                                {
                                  value: 1,
                                  itemStyle: {
                                    color: '#FF8C75',
                                  },
                                },
                              ],
                            },
                            {
                              value: 1,
                            },
                          ],
                          itemStyle: {
                            color: '#FFB499',
                          },
                        },
                      ],
                      itemStyle: {
                        color: '#F54F4A',
                      },
                    },
                  ],
                  label: {
                    rotate: 'radial',
                    color: '#ffffff',
                  },
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
          ],
        },
      },
      {
        name: '桑基图',
        icon: 'l-sangshentu',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              series: {
                type: 'sankey',
                layout: 'none',
                emphasis: {
                  focus: 'adjacency',
                },
                data: [
                  {
                    name: 'a',
                  },
                  {
                    name: 'b',
                  },
                  {
                    name: 'a1',
                  },
                  {
                    name: 'a2',
                  },
                  {
                    name: 'b1',
                  },
                  {
                    name: 'c',
                  },
                ],
                links: [
                  {
                    source: 'a',
                    target: 'a1',
                    value: 5,
                  },
                  {
                    source: 'a',
                    target: 'a2',
                    value: 3,
                  },
                  {
                    source: 'b',
                    target: 'b1',
                    value: 8,
                  },
                  {
                    source: 'a',
                    target: 'b1',
                    value: 3,
                  },
                  {
                    source: 'b1',
                    target: 'a1',
                    value: 1,
                  },
                  {
                    source: 'b1',
                    target: 'c',
                    value: 2,
                  },
                ],
                lineStyle: {
                  color: 'source',
                  curveness: 0.5,
                },
                label: {
                  color: '#ffffff',
                  fontSize: 10,
                },
              },
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
          ],
        },
      },
      {
        name: '漏斗图',
        icon: 'l-loudoutu',
        data: {
          width: 200,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c}%',
              },
              series: [
                {
                  name: 'Expected',
                  type: 'funnel',
                  left: '2%',
                  width: '80%',
                  label: {
                    color: '#ffffff',
                    formatter: '{b}Expected',
                  },
                  labelLine: {
                    show: false,
                  },
                  itemStyle: {
                    opacity: 0.7,
                  },
                  emphasis: {
                    label: {
                      position: 'inside',
                      formatter: '{b}Expected: {c}%',
                    },
                  },
                  data: [
                    { value: 60, name: 'Visit' },
                    { value: 40, name: 'Inquiry' },
                    { value: 20, name: 'Order' },
                    { value: 80, name: 'Click' },
                    { value: 100, name: 'Show' },
                  ],
                },
                {
                  name: 'Actual',
                  type: 'funnel',
                  left: '2%',
                  width: '80%',
                  maxSize: '80%',
                  label: {
                    position: 'inside',
                    formatter: '{c}%',
                    color: '#fff',
                  },
                  itemStyle: {
                    opacity: 0.5,
                    borderColor: '#fff',
                    borderWidth: 2,
                  },
                  emphasis: {
                    label: {
                      position: 'inside',
                      formatter: '{b}Actual: {c}%',
                    },
                  },
                  data: [
                    { value: 30, name: 'Visit' },
                    { value: 10, name: 'Inquiry' },
                    { value: 5, name: 'Order' },
                    { value: 50, name: 'Click' },
                    { value: 80, name: 'Show' },
                  ],
                  z: 100,
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
          ],
        },
      },
      {
        name: '仪表盘',
        icon: 'l-dashboard-chart',
        data: {
          width: 200,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              tooltip: {
                formatter: '{a} <br/>{b} : {c}%',
              },
              series: [
                {
                  type: 'gauge',
                  axisLine: {
                    roundCap: true,
                  },
                  progress: {
                    show: true,
                    roundCap: true,
                  },
                  data: [{ value: 70 }],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
          ],
        },
      },
    ],
  },
  {
    name: '乐吾乐Charts',
    show: true,
    list: [
      {
        name: '折线图',
        icon: 'l-line-chart',
        data: {
          name: 'lineChart',
          width: 400,
          disableAnchor: true,
          height: 200,
          chartsColor: [
            '#1890ff',
            '#2FC25B',
            '#FACC14',
            '#c23531',
            '#2f4554',
            '#61a0a8',
            '#d48265',
          ],
          xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          smooth: true,
          data: [
            [1820, 1932, 1901, 1934, 1990, 1830, 1920],
            [1710, 1932, 1901, 1834, 1700, 1830, 1720],
          ],
        },
      },
      {
        name: '柱状图',
        icon: 'l-bar-chart',
        data: {
          name: 'histogram',
          x: 600,
          y: 100,
          width: 400,
          height: 200,
          disableAnchor: true,
          chartsColor: [
            '#1890ff',
            '#2FC25B',
            '#FACC14',
            '#c23531',
            '#2f4554',
            '#61a0a8',
            '#d48265',
          ],
          xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: [
            [120, 200, 150, 80, 70, 110, 130],
            [140, 250, 150, 80, 60, 10, 30],
            [40, 50, 180, 210, 60, 70, 30],
          ],
        },
      },
      {
        name: '饼图',
        icon: 'l-pie-chart',
        data: {
          name: 'pieChart',
          x: 100,
          y: 300,
          width: 400,
          height: 200,
          disableAnchor: true,
          chartsColor: [
            '#1890ff',
            '#36CBCB',
            '#2FC25B',
            '#FACC14',
            '#F2637B',
            '#fc8452',
            '#9a60b4',
            '#ea7ccc',
          ],
          data: [
            [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' },
            ],
            [
              { value: 1548, name: 'Search' },
              { value: 775, name: 'Direct' },
              { value: 679, name: 'Market' },
            ],
          ],
          chartsRadius: [
            ['60%', '70%'],
            ['0%', '50%'],
          ],
        },
      },
      {
        name: '仪表盘',
        icon: 'l-dashboard-chart',
        data: {
          name: 'gauge',
          x: 600,
          y: 300,
          width: 400,
          height: 400,
          disableAnchor: true,
          value: 90,
          unit: 'm/s',
          axisLine: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d'],
          ],
          animateCycle: 1,
          keepAnimateState: 0,
        },
      },
      {
        name: '时钟',
        icon: 'l-07',
        data: {
          name: 'gauge',
          x: 600,
          y: 300,
          width: 400,
          height: 400,
          disableAnchor: true,
          isClock: true,
          startAngle: 90,
          endAngle: -270,
          min: 0,
          max: 12,
          splitNumber: 12,
          background: '#3A3A3A',
          color: '#C0911F',
        },
      },
    ],
  },
  {
    name: '折线图',
    show: true,
    list: [
      {
        name: '基础折线图',
        icon: 'l-line-chart',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                top: 20,
                bottom: 40,
                left: 40,
                right: 20,
              },
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
              },
              yAxis: {
                type: 'value',
                max: 100,
                min: 0,
                interval: 50,
              },
              series: [
                {
                  type: 'line',
                  data: [40, 20, 90, 60, 70, 80],
                },
              ],
            },
            max: 100,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
            {
              key: 'echarts.max',
              label: '最大数量',
              type: 'number',
            },
          ],
        },
      },
      {
        name: '双折线图',
        icon: 'l-line-chart',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                top: 20,
                bottom: 40,
                left: 40,
                right: 20,
              },
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
              },
              yAxis: {
                type: 'value',
                max: 100,
                min: 0,
                interval: 50,
              },
              series: [
                {
                  type: 'line',
                  data: [40, 35, 80, 40, 45, 25],
                },
                {
                  type: 'line',
                  data: [25, 40, 20, 30, 25, 40],
                },
              ],
            },
            max: 100,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
            {
              key: 'echarts.max',
              label: '最大数量',
              type: 'number',
            },
          ],
        },
      },
    ],
  },
];