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 && (chart.data.echarts.theme = theme);
      }
    });
  });
}

export const charts = [
  {
    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: '数据1',
              type: 'object',
            },
            {
              key: 'echarts.option.series.1.data',
              label: '数据2',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
            {
              key: 'echarts.max',
              label: '最大数量',
              type: 'number',
            },
          ],
        },
      },
    ],
  },
  {
    name: '面积图',
    show: true,
    list: [
      {
        name: '基础面积图',
        icon: 'l-line-chart',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
        },
      },
    ],
  },
  {
    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: 'bar',
                  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: 'bar',
                  data: [40, 20, 90, 60, 70, 80],
                },
                {
                  type: 'bar',
                  data: [50, 70, 20, 30, 70, 40],
                },
              ],
            },
            max: 100,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据1',
              type: 'object',
            },
            {
              key: 'echarts.option.series.1.data',
              label: '数据2',
              type: 'object',
            },
            {
              key: 'echarts.option',
              label: 'echarts',
              type: 'object',
            },
            {
              key: 'echarts.max',
              label: '最大数量',
              type: 'number',
            },
          ],
        },
      },
    ],
  },
  {
    name: '条形图',
    show: true,
    list: [],
  },
  {
    name: '饼环图',
    show: true,
    list: [
      {
        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: '散点图',
    show: true,
    list: [
      {
        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: '雷达图',
    show: true,
    list: [
      {
        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: '关系图',
    show: true,
    list: [],
  },
  {
    name: '桑葚图',
    show: true,
    list: [
      {
        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: '仪表盘',
    show: true,
    list: [
      {
        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',
        },
      },
    ],
  },
];