visualization-design/src/services/echarts.ts

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

//注册所有主题
export function registerTheme() {
  fetch((cdn ? cdn + '/v/' : '') + '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: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  data: [40, 20, 90, 60, 70, 80],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '1月',
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '3月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '4月',
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '5月',
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '6月',
              type: 'float',
              enableMock: true,
              mock: '60-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '多折线图',
        icon: 'l-duozhexiantu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  data: [40, 35, 80, 40, 45, 25],
                },
                {
                  type: 'line',
                  data: [25, 40, 20, 30, 25, 40],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '折线一的1月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: '折线二的1月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '折线一的2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: '折线二的2月',
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '折线一的3月',
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: '折线二的3月',
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '折线一的4月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: '折线二的4月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '折线一的5月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: '折线二的5月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '折线一的6月',
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: '折线二的6月',
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '折线趋势图',
        icon: 'l-zhexiantuqushitu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  data: [],
                },
              ],
            },
            replaceMode: 0,
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据点',
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '基础曲线图',
        icon: 'l-quxian',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  smooth: true,
                  data: [40, 20, 90, 60, 70, 80],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '1月',
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '3月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '4月',
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '5月',
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '6月',
              type: 'float',
              enableMock: true,
              mock: '60-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '多曲线图',
        icon: 'l-duoquxiantu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  smooth: true,
                  data: [40, 35, 80, 40, 45, 25],
                },
                {
                  type: 'line',
                  smooth: true,
                  data: [25, 40, 20, 30, 25, 40],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '折线一的1月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: '折线二的1月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '折线一的2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: '折线二的2月',
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '折线一的3月',
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: '折线二的3月',
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '折线一的4月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: '折线二的4月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '折线一的5月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: '折线二的5月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '折线一的6月',
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: '折线二的6月',
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '曲线趋势图',
        icon: 'l-quxiantuqushitu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: [],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  smooth: true,
                  data: [],
                },
              ],
            },
            replaceMode: 0,
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: '数据点',
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '阶梯折线图',
        icon: 'l-jietizhexian',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  step: 'start',
                  data: [40, 20, 90, 60, 70, 80],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '1月',
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '3月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '4月',
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '5月',
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '6月',
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: '面积图',
    show: true,
    list: [
      {
        name: '基础面积图',
        icon: 'l-mianjitu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  data: [40, 20, 90, 60, 70, 80],
                  areaStyle: { opacity: 0.3 },
                  smooth: true,
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '1月',
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '3月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '4月',
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '5月',
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '6月',
              type: 'float',
              enableMock: true,
              mock: '60-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '堆叠面积图',
        icon: 'l-duidiemianjitu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  areaStyle: { opacity: 0.3 },
                  smooth: true,
                  data: [40, 35, 80, 40, 45, 25],
                },
                {
                  type: 'line',
                  areaStyle: { opacity: 0.3 },
                  smooth: true,
                  data: [25, 40, 20, 30, 25, 40],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '折线一的1月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: '折线二的1月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '折线一的2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: '折线二的2月',
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '折线一的3月',
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: '折线二的3月',
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '折线一的4月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: '折线二的4月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '折线一的5月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: '折线二的5月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '折线一的6月',
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: '折线二的6月',
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: '柱状图',
    show: true,
    list: [
      {
        name: '基础柱状图',
        icon: 'l-bar-chart',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              barWidth: '20%',
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                max: 100,
                min: 0,
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'bar',
                  data: [
                    {
                      value: 40,
                      itemStyle: {
                        color: '#6851f1',
                      },
                    },
                    {
                      value: 20,
                      itemStyle: {
                        color: '#09bcb7',
                      },
                    },
                    {
                      value: 90,
                      itemStyle: {
                        color: '#f5804d',
                      },
                    },
                    {
                      value: 60,
                      itemStyle: {
                        color: '#0c56eb',
                      },
                    },
                    {
                      value: 70,
                      itemStyle: {
                        color: '#6851f1',
                      },
                    },
                    {
                      value: 80,
                      itemStyle: {
                        color: '#09bcb7',
                      },
                    },
                  ],
                },
              ],
            },
            max: 100,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value',
              label: '1月',
              type: 'float',
              enableMock: true,
              mock: '10-40',
              triggers: [
                {
                  name: '触发器1',
                  conditionType: 'and',
                  conditions: [
                    {
                      type: '',
                      operator: '>',
                      valueType: '',
                      value: '20',
                    },
                  ],
                  actions: [
                    {
                      action: 1,
                      params: '',
                      value: {
                        'echarts.option.series.0.data.0.itemStyle.color':
                          '#ff4000',
                      },
                      targetType: 'id',
                    },
                  ],
                },
                {
                  name: '触发器2',
                  conditionType: 'and',
                  conditions: [
                    {
                      type: '',
                      operator: '<=',
                      valueType: '',
                      value: '20',
                    },
                  ],
                  actions: [
                    {
                      action: 1,
                      params: '',
                      value: {
                        'echarts.option.series.0.data.0.itemStyle.color':
                          '#6851f1',
                      },
                      targetType: 'id',
                    },
                  ],
                },
              ],
            },
            {
              key: 'echarts.option.series.0.data.1.value',
              label: '2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2.value',
              label: '3月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3.value',
              label: '4月',
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4.value',
              label: '5月',
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5.value',
              label: '6月',
              type: 'float',
              enableMock: true,
              mock: '60-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '分组柱状图',
        icon: 'l-fenzuzhuzhuangtu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              barWidth: '20%',
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'bar',
                  data: [40, 35, 80, 40, 45, 25],
                },
                {
                  type: 'bar',
                  data: [25, 40, 20, 30, 25, 40],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '分组一的1月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: '分组二的1月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '分组一的2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: '分组二的2月',
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '分组一的3月',
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: '分组二的3月',
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '分组一的4月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: '分组二的4月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '分组一的5月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: '分组二的5月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '分组一的6月',
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: '分组二的6月',
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '堆叠柱状图',
        icon: 'l-duidiezhuzhuangtu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              barWidth: '20%',
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'bar',
                  stack: 'one',
                  data: [40, 35, 80, 40, 45, 25],
                },
                {
                  type: 'bar',
                  stack: 'one',
                  data: [25, 40, 20, 30, 25, 40],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '分组一的1月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: '分组二的1月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '分组一的2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: '分组二的2月',
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '分组一的3月',
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: '分组二的3月',
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '分组一的4月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: '分组二的4月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '分组一的5月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: '分组二的5月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '分组一的6月',
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: '分组二的6月',
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: '条形图',
    show: true,
    list: [
      {
        name: '基础条形图',
        icon: 'l-tiaoxingtu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              barWidth: '20%',
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              fontSize: 10,
              yAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              xAxis: {
                type: 'value',
                max: 100,
                min: 0,
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'bar',
                  data: [40, 20, 90, 60, 70, 80],
                },
              ],
            },
            max: 100,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '1月',
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '3月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '4月',
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '5月',
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '6月',
              type: 'float',
              enableMock: true,
              mock: '60-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '分组条形图',
        icon: 'l-fenzutiaoxingtu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              barWidth: '20%',
              grid: {
                top: 20,
                bottom: 40,
                left: 40,
                right: 20,
              },
              yAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              xAxis: {
                type: 'value',
                max: 100,
                min: 0,
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'bar',
                  data: [40, 35, 80, 40, 45, 25],
                },
                {
                  type: 'bar',
                  data: [25, 40, 20, 30, 25, 40],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '分组一的1月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: '分组二的1月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '分组一的2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: '分组二的2月',
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '分组一的3月',
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: '分组二的3月',
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '分组一的4月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: '分组二的4月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '分组一的5月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: '分组二的5月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '分组一的6月',
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: '分组二的6月',
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '堆叠条形图',
        icon: 'l-duidietiaoxingtu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              barWidth: '20%',
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              yAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              xAxis: {
                type: 'value',
                max: 100,
                min: 0,
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'bar',
                  stack: 'one',
                  data: [40, 35, 80, 40, 45, 25],
                },
                {
                  type: 'bar',
                  stack: 'one',
                  data: [25, 40, 20, 30, 25, 40],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '分组一的1月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: '分组二的1月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '分组一的2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: '分组二的2月',
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '分组一的3月',
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: '分组二的3月',
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '分组一的4月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: '分组二的4月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '分组一的5月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: '分组二的5月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '分组一的6月',
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: '分组二的6月',
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '正负条形图',
        icon: 'l-zhengfutiaoxingtu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              barWidth: '20%',
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              yAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
                axisLabel: {
                  fontSize: 12,
                },
              },
              xAxis: {
                type: 'value',
                max: 100,
                min: -50,
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'bar',
                  stack: 'one',
                  data: [40, 35, 80, 40, 45, 25],
                },
                {
                  type: 'bar',
                  stack: 'one',
                  data: [25, 40, 20, 30, 25, 40],
                },
                {
                  type: 'bar',
                  stack: 'one',
                  data: [-5, -30, -10, -20, -25, -16],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '分组一的1月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: '分组二的1月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.2.data.0',
              label: '分组三的1月',
              type: 'float',
              enableMock: true,
              mock: '-10--2',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '分组一的2月',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: '分组二的2月',
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.2.data.1',
              label: '分组三的2月',
              type: 'float',
              enableMock: true,
              mock: '-30--10',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '分组一的3月',
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: '分组二的3月',
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.2.data.2',
              label: '分组三的3月',
              type: 'float',
              enableMock: true,
              mock: '-30--1',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '分组一的4月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: '分组二的4月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.2.data.3',
              label: '分组三的4月',
              type: 'float',
              enableMock: true,
              mock: '-50--10',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '分组一的5月',
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: '分组二的5月',
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.2.data.4',
              label: '分组三的5月',
              type: 'float',
              enableMock: true,
              mock: '-40--10',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: '分组一的6月',
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: '分组二的6月',
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
            {
              key: 'echarts.option.series.2.data.5',
              label: '分组三的6月',
              type: 'float',
              enableMock: true,
              mock: '-30--20',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    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%',
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 12,
                        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.0.value',
              label: '2D',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.1.value',
              label: '3D',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.2.value',
              label: '大屏',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.3.value',
              label: '物联网平台',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.4.value',
              label: '图形库',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '环图',
        icon: 'l-huanxingtu',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              tooltip: {
                trigger: 'item',
              },
              series: [
                {
                  type: 'pie',
                  radius: ['50%', '70%'],
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 12,
                        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.0.value',
              label: '2D',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.1.value',
              label: '3D',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.2.value',
              label: '大屏',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.3.value',
              label: '物联网平台',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.4.value',
              label: '图形库',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '圆角环图',
        icon: 'l-yuanjiaohuanxingtu',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              tooltip: {
                trigger: 'item',
              },
              series: [
                {
                  type: 'pie',
                  radius: ['50%', '70%'],
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 12,
                        color: '#ffffff',
                      },
                    },
                  },
                  itemStyle: {
                    borderRadius: 4,
                    borderWidth: 1,
                  },
                  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.0.value',
              label: '2D',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.1.value',
              label: '3D',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.2.value',
              label: '大屏',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.3.value',
              label: '物联网平台',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.4.value',
              label: '图形库',
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: '散点图',
    show: true,
    list: [
      {
        name: '散点图',
        icon: 'l-sandiantu',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              grid: {
                bottom: 12,
                left: 16,
                right: 16,
                top: 24,
                containLabel: true,
              },
              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.0.0',
              label: '点1.X',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.0.1',
              label: '点1.Y',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.1.0',
              label: '点2.X',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.1.1',
              label: '点2.Y',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.2.0',
              label: '点3.X',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.2.1',
              label: '点3.Y',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '涟漪散点图',
        icon: 'l-lianyisandianyu',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              grid: {
                bottom: 12,
                left: 16,
                right: 16,
                top: 24,
                containLabel: true,
              },
              xAxis: {
                axisLabel: {
                  fontSize: 12,
                  color: '#ffffff',
                },
              },
              yAxis: {
                axisLabel: {
                  fontSize: 12,
                  color: '#ffffff',
                },
              },
              series: [
                {
                  type: 'effectScatter',
                  symbolSize: 8,
                  data: [
                    [12.7, 15.2],
                    [13.4, 4],
                    [15.4, 2],
                  ],
                },
                {
                  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.0.0',
              label: '点1.X',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.0.1',
              label: '点1.Y',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.1.0',
              label: '点2.X',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.1.1',
              label: '点2.Y',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.2.0',
              label: '点3.X',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.2.1',
              label: '点3.Y',
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: '雷达图',
    show: true,
    list: [
      {
        name: '雷达图',
        icon: 'l-leidatu',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              radar: {
                indicator: [
                  { name: '销售', max: 65000 },
                  { name: '管理', max: 16000 },
                  { name: '数据', max: 30000 },
                  { name: '支持', max: 38000 },
                  { name: '开发', max: 52000 },
                  { name: '营销', max: 25000 },
                ],
                splitLine: {
                  lineStyle: {
                    opacity: 0.3,
                  },
                },
                name: {
                  textStyle: { fontSize: 12 },
                },
                axisLabel: {
                  fontSize: 12,
                },
                splitArea: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    opacity: 0.1,
                  },
                },
                nameGap: 10,
              },
              series: [
                {
                  type: 'radar',
                  lineStyle: { width: 1, opacity: 0.5 },
                  areaStyle: { opacity: 0.1 },
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 12,
                        color: '#ffffff',
                      },
                    },
                  },
                  data: [
                    {
                      value: [52000, 3000, 20000, 35000, 50000, 18000],
                      name: '预算',
                    },
                    {
                      value: [60000, 14000, 28000, 26000, 42000, 21000],
                      name: '消费',
                    },
                  ],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value.0',
              label: '预算.销售',
              type: 'integer',
              enableMock: true,
              mock: '40000-65000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.1',
              label: '预算.管理',
              type: 'integer',
              enableMock: true,
              mock: '14000-16000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.2',
              label: '预算.数据',
              type: 'integer',
              enableMock: true,
              mock: '20000-30000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.3',
              label: '预算.支持',
              type: 'integer',
              enableMock: true,
              mock: '30000-38000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.4',
              label: '预算.开发',
              type: 'integer',
              enableMock: true,
              mock: '30000-52000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.5',
              label: '预算.营销',
              type: 'integer',
              enableMock: true,
              mock: '10000-25000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '圆形雷达图',
        icon: 'l-yuanxingleidatu',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              radar: {
                shape: 'circle',
                indicator: [
                  { name: '销售', max: 65000 },
                  { name: '管理', max: 16000 },
                  { name: '数据', max: 30000 },
                  { name: '支持', max: 38000 },
                  { name: '开发', max: 52000 },
                  { name: '营销', max: 25000 },
                ],
                splitLine: {
                  lineStyle: {
                    opacity: 0.3,
                  },
                },
                name: {
                  textStyle: { fontSize: 12 },
                },
                axisLabel: {
                  fontSize: 12,
                },
                splitArea: {
                  show: false,
                },
                axisLine: {
                  lineStyle: {
                    opacity: 0.1,
                  },
                },
                nameGap: 10,
              },
              series: [
                {
                  type: 'radar',
                  lineStyle: { width: 1, opacity: 0.5 },
                  areaStyle: { opacity: 0.1 },
                  label: {
                    normal: {
                      show: true,
                      textStyle: {
                        fontSize: 12,
                        color: '#ffffff',
                      },
                    },
                  },
                  data: [
                    {
                      value: [52000, 3000, 20000, 35000, 50000, 18000],
                      name: '预算',
                    },
                    {
                      value: [60000, 14000, 28000, 26000, 42000, 21000],
                      name: '消费',
                    },
                  ],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value.0',
              label: '预算.销售',
              type: 'integer',
              enableMock: true,
              mock: '40000-65000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.1',
              label: '预算.管理',
              type: 'integer',
              enableMock: true,
              mock: '14000-16000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.2',
              label: '预算.数据',
              type: 'integer',
              enableMock: true,
              mock: '20000-30000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.3',
              label: '预算.支持',
              type: 'integer',
              enableMock: true,
              mock: '30000-38000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.4',
              label: '预算.开发',
              type: 'integer',
              enableMock: true,
              mock: '30000-52000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.5',
              label: '预算.营销',
              type: 'integer',
              enableMock: true,
              mock: '10000-25000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: '关系图',
    show: true,
    list: [
      {
        name: '力引导布局',
        icon: 'l-liyindaobuju',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              tooltip: {},
              series: [
                {
                  type: 'graph',
                  layout: 'force',
                  data: [
                    {
                      id: '0',
                      name: '1',
                      symbolSize: 6,
                      category: 0,
                    },
                    {
                      id: '1',
                      name: '2',
                      symbolSize: 6,
                      category: 0,
                    },
                    {
                      id: '2',
                      name: '3',
                      symbolSize: 6,
                      category: 0,
                    },
                    {
                      id: '3',
                      name: '4',
                      symbolSize: 6,
                      category: 0,
                    },
                    {
                      id: '4',
                      name: '5',
                      symbolSize: 6,
                      category: 0,
                    },
                    {
                      id: '5',
                      name: '6',
                      symbolSize: 6,
                      category: 0,
                    },
                    {
                      id: '6',
                      name: '7',
                      symbolSize: 6,
                      category: 1,
                    },
                    {
                      id: '7',
                      name: '8',
                      symbolSize: 6,
                      category: 1,
                    },
                    {
                      id: '8',
                      name: '9',
                      symbolSize: 6,
                      category: 2,
                    },
                    {
                      id: '9',
                      name: '10',
                      symbolSize: 6,
                      category: 2,
                    },
                    {
                      id: '10',
                      name: '11',
                      symbolSize: 6,
                      category: 2,
                    },
                    {
                      id: '11',
                      name: '12',
                      symbolSize: 6,
                      category: 2,
                    },
                    {
                      id: '12',
                      name: '13',
                      symbolSize: 6,
                      category: 2,
                    },
                    {
                      id: '13',
                      name: '14',
                      symbolSize: 6,
                      category: 3,
                    },
                    {
                      id: '14',
                      name: '15',
                      symbolSize: 6,
                      category: 3,
                    },
                    {
                      id: '15',
                      name: '16',
                      symbolSize: 6,
                      category: 3,
                    },
                    {
                      id: '16',
                      name: '17',
                      symbolSize: 6,
                      category: 3,
                    },
                    {
                      id: '17',
                      name: '18',
                      symbolSize: 6,
                      category: 3,
                    },
                    {
                      id: '18',
                      name: '19',
                      symbolSize: 6,
                      category: 3,
                    },
                  ],
                  links: [
                    { source: '0', target: '3' },
                    { source: '1', target: '3' },
                    { source: '2', target: '3' },
                    { source: '3', target: '5' },
                    { source: '4', target: '3' },
                    { source: '5', target: '8' },
                    { source: '6', target: '5' },
                    { source: '7', target: '5' },
                    { source: '8', target: '10' },
                    { source: '9', target: '8' },
                    { source: '10', target: '12' },
                    { source: '11', target: '12' },
                    { source: '12', target: '10' },
                    { source: '13', target: '12' },
                    { source: '14', target: '9' },
                    { source: '15', target: '14' },
                    { source: '16', target: '8' },
                    { source: '17', target: '12' },
                    { source: '18', target: '8' },
                  ],
                  categories: [
                    { name: 'A' },
                    { name: 'B' },
                    { name: 'C' },
                    { name: 'D' },
                  ],
                  roam: true,
                  force: {
                    repulsion: 30,
                    gravity: 0.03,
                    edgeLength: 50,
                    layoutAnimation: true,
                  },
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: 'data',
              type: 'array',
            },
            {
              key: 'echarts.option.series.0.links',
              label: 'links',
              type: 'array',
            },
            {
              key: 'echarts.option.series.0.categories',
              label: 'categories',
              type: 'array',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '知识图谱',
        icon: 'l-zhishitupu',
        data: {
          width: 400,
          height: 400,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              tooltip: {},
              series: [
                {
                  type: 'graph',
                  symbolSize: 58,
                  layout: 'force',
                  data: [
                    {
                      name: '操作系统',
                      category: 0,
                    },
                    {
                      name: '浏览器',
                      category: 0,
                    },
                    {
                      name: 'HTML',
                      category: 0,
                    },
                    {
                      name: 'JavaScript',
                      category: 0,
                    },
                    {
                      name: 'CSS',
                      category: 0,
                    },
                    {
                      name: 'Chrome',
                      category: 1,
                    },
                    {
                      name: 'IE',
                      category: 1,
                    },
                    {
                      name: 'Firefox',
                      category: 1,
                    },
                    {
                      name: 'Safari',
                      category: 1,
                    },
                  ],

                  links: [
                    {
                      source: '浏览器',
                      target: '操作系统',
                      name: '包含',
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'HTML',
                      target: '浏览器',
                      name: '实现',
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'CSS',
                      target: '浏览器',
                      name: '实现',
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'JavaScript',
                      target: '浏览器',
                      name: '实现',
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'Chrome',
                      target: '浏览器',
                      name: '属于',
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'IE',
                      target: '浏览器',
                      name: '属于',
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'Firefox',
                      target: '浏览器',
                      name: '属于',
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'Safari',
                      target: '浏览器',
                      name: '属于',
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'Chrome',
                      target: 'JavaScript',
                      name: '关联',
                      lineStyle: { color: '#4583ff' },
                    },
                  ],
                  categories: [
                    {
                      name: 'A',
                      itemStyle: {
                        color: '#4583ff',
                      },
                    },
                    { name: 'B' },
                    { name: 'C' },
                    { name: 'D' },
                  ],
                  roam: true,
                  edgeSymbol: ['', 'arrow'],
                  label: {
                    show: true,
                  },
                  edgeLabel: {
                    normal: {
                      show: true,
                      color: '#4583ff',
                      formatter(x) {
                        return x.data.name;
                      },
                    },
                  },
                  force: {
                    repulsion: 500,
                    edgeLength: 120,
                  },
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: 'data',
              type: 'array',
            },
            {
              key: 'echarts.option.series.0.links',
              label: 'links',
              type: 'array',
            },
            {
              key: 'echarts.option.series.0.categories',
              label: 'categories',
              type: 'array',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: '桑葚图',
    show: true,
    list: [
      {
        name: '桑基图',
        icon: 'l-sangjitu',
        data: {
          width: 300,
          height: 200,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              series: {
                right: 30.0,
                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.data',
              label: 'data',
              type: 'array',
            },
            {
              key: 'echarts.option.series.links',
              label: 'links',
              type: 'array',
            },
            {
              key: 'echarts.option.series.links.0.value',
              label: 'a->a1',
              type: 'integer',
              enableMock: true,
              mock: '3-8',
            },
            {
              key: 'echarts.option.series.links.1.value',
              label: 'a->a2',
              type: 'integer',
              enableMock: true,
              mock: '1-8',
            },
            {
              key: 'echarts.option.series.links.2.value',
              label: 'b->b1',
              type: 'integer',
              enableMock: true,
              mock: '1-8',
            },
            {
              key: 'echarts.option.series.links.3.value',
              label: 'a->b1',
              type: 'integer',
              enableMock: true,
              mock: '1-8',
            },
            {
              key: 'echarts.option.series.links.4.value',
              label: 'b1->a1',
              type: 'integer',
              enableMock: true,
              mock: '1-8',
            },
            {
              key: 'echarts.option.series.links.5.value',
              label: 'b1->c',
              type: 'integer',
              enableMock: true,
              mock: '1-8',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '自定义桑基图',
        icon: 'l-zidingyisangjitu',
        data: {
          width: 400,
          height: 500,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              series: {
                right: 30.0,
                type: 'sankey',
                layout: 'none',
                layoutIterations: 0,
                emphasis: {
                  focus: 'adjacency',
                },
                lineStyle: {
                  color: 'source',
                  opacity: 0.45,
                  curveness: 0.5,
                },

                label: {
                  color: '#fff',
                  fontSize: 10,
                },
                data: [
                  {
                    name: '华中',
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: '华南',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '华东',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '华北',
                    itemStyle: {
                      color: 'rgba(198,89,17)',
                      borderColor: 'rgba(198,89,17)',
                    },
                  },

                  {
                    name: '西北',
                    itemStyle: {
                      color: 'rgba(112,173,71)',
                      borderColor: 'rgba(112,173,71)',
                    },
                  },
                  {
                    name: '西南',
                    itemStyle: {
                      color: 'rgba(117,113,113)',
                      borderColor: 'rgba(117,113,113)',
                    },
                  },
                  {
                    name: '北京',
                    itemStyle: {
                      color: 'rgba(198,89,17)',
                      borderColor: 'rgba(198,89,17)',
                    },
                  },
                  {
                    name: '上海',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '武汉',
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: '济南',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '东莞',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '珠海',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '青岛',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '无锡',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '厦门',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '成都',
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: '杭州',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '金华',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '南京',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '西安',
                    itemStyle: {
                      color: 'rgba(112,173,71)',
                      borderColor: 'rgba(112,173,71)',
                    },
                  },
                  {
                    name: '中山',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '天津',
                    itemStyle: {
                      color: 'rgba(198,89,17)',
                      borderColor: 'rgba(198,89,17)',
                    },
                  },
                  {
                    name: '苏州',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '威海',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '银川',
                    itemStyle: {
                      color: 'rgba(112,173,71)',
                      borderColor: 'rgba(112,173,71)',
                    },
                  },
                  {
                    name: '贵阳',
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: '佛山',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '东营',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '舟山',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '郑州',
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: '烟台',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '嘉兴',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '三亚',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '宁波',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '潍坊',
                    itemStyle: {
                      color: 'rgba(198,89,17)',
                      borderColor: 'rgba(198,89,17)',
                    },
                  },
                  {
                    name: '合肥',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '湖州',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '枣庄',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '太原',
                    itemStyle: {
                      color: 'rgba(198,89,17)',
                      borderColor: 'rgba(198,89,17)',
                    },
                  },
                  {
                    name: '海口',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '长沙',
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: '淄博',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '聊城',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '常州',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '济宁',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '南宁',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '梅州',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '遵义',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '南昌',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '宿迁',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '福州',
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: '桂林',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '广州',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '深圳',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '惠州',
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: '拉萨',
                    itemStyle: {
                      color: 'rgba(117,113,113)',
                      borderColor: 'rgba(117,113,113)',
                    },
                  },
                ],
                links: [
                  { source: '武汉', target: '华中', value: 1 },
                  { source: '深圳', target: '华南', value: 1 },
                  { source: '北京', target: '华北', value: 1 },
                  { source: '广州', target: '华南', value: 1 },
                  { source: '上海', target: '华东', value: 1 },
                  { source: '济南', target: '华东', value: 1 },
                  { source: '东莞', target: '华南', value: 1 },
                  { source: '珠海', target: '华南', value: 1 },
                  { source: '青岛', target: '华东', value: 1 },
                  { source: '无锡', target: '华东', value: 1 },
                  { source: '厦门', target: '华东', value: 1 },
                  { source: '成都', target: '华中', value: 1 },
                  { source: '杭州', target: '华东', value: 1 },
                  { source: '金华', target: '华东', value: 1 },
                  { source: '南京', target: '华东', value: 1 },
                  { source: '西安', target: '西北', value: 1 },
                  { source: '中山', target: '华南', value: 1 },
                  { source: '天津', target: '华北', value: 1 },
                  { source: '苏州', target: '华东', value: 1 },
                  { source: '威海', target: '华东', value: 1 },
                  { source: '银川', target: '西北', value: 1 },
                  { source: '贵阳', target: '华中', value: 1 },
                  { source: '佛山', target: '华南', value: 1 },
                  { source: '东营', target: '华东', value: 1 },
                  { source: '舟山', target: '华东', value: 1 },
                  { source: '郑州', target: '华中', value: 1 },
                  { source: '烟台', target: '华东', value: 1 },
                  { source: '嘉兴', target: '华东', value: 1 },
                  { source: '三亚', target: '华南', value: 1 },
                  { source: '宁波', target: '华东', value: 1 },
                  { source: '潍坊', target: '华北', value: 1 },
                  { source: '合肥', target: '华东', value: 1 },
                  { source: '湖州', target: '华东', value: 1 },
                  { source: '枣庄', target: '华东', value: 1 },
                  { source: '太原', target: '华北', value: 1 },
                  { source: '海口', target: '华南', value: 1 },
                  { source: '长沙', target: '华中', value: 1 },
                  { source: '淄博', target: '华东', value: 1 },
                  { source: '聊城', target: '华东', value: 1 },
                  { source: '常州', target: '华东', value: 1 },
                  { source: '济宁', target: '华东', value: 1 },
                  { source: '南宁', target: '华南', value: 1 },
                  { source: '梅州', target: '华南', value: 1 },
                  { source: '遵义', target: '华东', value: 1 },
                  { source: '南昌', target: '华东', value: 1 },
                  { source: '宿迁', target: '华东', value: 1 },
                  { source: '福州', target: '华东', value: 1 },
                  { source: '桂林', target: '华南', value: 1 },
                  { source: '惠州', target: '华南', value: 1 },
                  { source: '拉萨', target: '西南', value: 1 },
                ],
              },
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.data',
              label: 'data',
              type: 'array',
            },
            {
              key: 'echarts.option.series.links',
              label: 'links',
              type: 'array',
            },
            {
              key: 'echarts.option.series.links.0.value',
              label: '武汉->华中',
              type: 'integer',
              enableMock: true,
              mock: '1-18',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: '仪表盘',
    show: true,
    list: [
      {
        name: '基础仪表盘',
        icon: 'l-dashboard-chart',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              fontSize: 10,
              series: [
                {
                  type: 'gauge',
                  radius: '100%',
                  axisLine: {
                    roundCap: true,
                    lineStyle: {
                      color: [[1, 'rgba(107,157,215,.25)']],
                      width: 8,
                    },
                  },
                  axisTick: {
                    distance: 4,
                    lineStyle: {
                      color: '#6B9DD7',
                    },
                  },
                  splitLine: {
                    distance: 4,
                    lineStyle: {
                      width: 2,
                      color: 'rgb(107,157,215)',
                    },
                  },
                  detail: {
                    color: '#0c56eb',
                    fontSize: 16,
                  },
                  progress: {
                    show: true,
                    roundCap: true,
                    width: 8,
                  },
                  axisLabel: {
                    color: '#ddd',
                    fontSize: 12,
                  },
                  itemStyle: {
                    color: '#0c56eb',
                  },
                  pointer: {
                    itemStyle: {
                      borderWidth: 0,
                    },
                  },
                  data: [{ value: 70 }],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value',
              label: '值',
              type: 'integer',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '圆盘仪表盘',
        icon: 'l-yuanpanyibiaopan',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              fontSize: 10,
              series: [
                {
                  name: '最外部进度条',
                  type: 'gauge',
                  radius: '96%',
                  splitNumber: 10,
                  axisLine: {
                    lineStyle: {
                      color: [[1, 'rgba(107,157,215,.25)']],
                      width: 8,
                    },
                  },
                  progress: {
                    show: true,
                    width: 8,
                  },
                  axisTick: {
                    distance: 8,
                    splitNumber: 5,
                    lineStyle: {
                      color: '#42E5FB',
                      width: 1,
                    },
                    length: 8,
                  },
                  splitLine: {
                    distance: 8,
                    length: 15,
                    lineStyle: {
                      width: 2,
                      color: '#42E5FB',
                    },
                  },
                  axisLabel: {
                    show: false,
                    fontSize: 12,
                  },
                  itemStyle: {
                    show: false,
                  },
                  detail: {
                    color: '#ACCFFF',
                    fontSize: 16,
                    fontWeight: 400,
                    offsetCenter: [0, '24%'],
                  },
                  data: [{ value: 60 }],
                  pointer: {
                    length: '40%',
                    radius: '20%',
                    width: 4,
                    itemStyle: {
                      color: '#45CAED',
                      borderWidth: 0,
                    },
                  },
                },
                {
                  name: '指针上的圆',
                  type: 'pie',
                  z: 5,
                  hoverAnimation: false,
                  legendHoverLink: false,
                  radius: ['0%', '6%'],
                  center: ['50%', '50%'],
                  label: {
                    normal: {
                      show: false,
                    },
                  },
                  labelLine: {
                    normal: {
                      show: false,
                    },
                  },
                  data: [
                    {
                      value: 10,
                      itemStyle: {
                        normal: {
                          color: '#45CAED',
                          borderWidth: 0,
                        },
                      },
                    },
                  ],
                },
                {
                  name: '外层透明圆',
                  type: 'pie',
                  radius: '60%',
                  startAngle: 0,
                  endAngle: 360,
                  hoverAnimation: false,
                  center: ['50%', '50%'],
                  avoidLabelOverlap: false,
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  data: [
                    {
                      value: 1,
                    },
                  ],
                  itemStyle: {
                    normal: {
                      color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                          {
                            offset: 0,
                            color: '#17A1FF',
                          },
                          {
                            offset: 1,
                            color: 'rgba(17, 90, 233, 0.16)',
                          },
                        ],
                      },
                      opacity: 0.2,
                    },
                  },
                },
                {
                  name: '内圆',
                  type: 'pie',
                  radius: '48%',
                  center: ['50%', '50%'],
                  startAngle: 0,
                  endAngle: 360,
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  data: [
                    {
                      value: 1,
                    },
                  ],
                  itemStyle: {
                    color: {
                      colorStops: [
                        {
                          offset: 0,
                          color: '#23A6FF',
                        },
                        {
                          offset: 1,
                          color: 'rgba(17, 90, 233, 0.21)  ',
                        },
                      ],
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      type: 'linear',
                      global: false,
                    },
                    opacity: 0.5,
                    borderWidth: 0,
                  },
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value',
              label: '值',
              type: 'integer',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '进度仪表盘',
        icon: 'l-jinduyibiaopan',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              fontSize: 10,
              series: [
                {
                  name: '最外部环',
                  type: 'gauge',
                  radius: '96%',
                  splitNumber: 10,
                  axisLine: {
                    lineStyle: {
                      color: [[1, '#33507A']],
                      width: 8,
                    },
                  },
                  axisTick: {
                    distance: 8,
                    splitNumber: 10,
                    lineStyle: {
                      color: '#42E5FB',
                      width: 1,
                    },
                    length: 8,
                  },
                  splitLine: {
                    distance: 8,
                    length: 15,
                    lineStyle: {
                      width: 2,
                      color: '#42E5FB',
                    },
                  },
                  axisLabel: {
                    show: false,
                    fontSize: 12,
                  },

                  itemStyle: {
                    show: false,
                  },
                  detail: {
                    show: false,
                    fontSize: 16,
                  },
                  title: {
                    show: false,
                  },
                  data: [],
                  pointer: {
                    show: false,
                  },
                },
                {
                  name: '仪表盘',
                  type: 'gauge',
                  radius: '70%',
                  z: 4,
                  axisLine: {
                    lineStyle: {
                      color: [[1, 'rgba(0,0,0,0)']],
                      width: 20,
                    },
                  },
                  axisLabel: {
                    show: false,
                  },
                  axisTick: {
                    show: false,
                  },
                  splitLine: {
                    show: false,
                  },
                  itemStyle: {
                    color: 'rgba(0,191,194,0.5)',
                  },
                  progress: {
                    width: 20,
                    show: true,
                  },
                  detail: {
                    offsetCenter: [0, 50],
                    textStyle: {
                      padding: [0, 0, 0, 0],
                      fontSize: 30,
                      color: '#468EFD',
                    },
                  },
                  data: [
                    {
                      value: 36,
                    },
                  ],
                  pointer: {
                    width: 3,
                    itemStyle: {
                      borderWidth: 0,
                    },
                  },
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.1.data.0.value',
              label: '值',
              type: 'integer',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '蓝色科技1',
        icon: 'l-lansekeji1',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              fontSize: 10,
              series: [
                {
                  type: 'gauge',
                  radius: '98%',
                  splitNumber: 10,
                  axisLine: {
                    lineStyle: {
                      color: [[1, 'rgba(107,157,215,.25)']],
                      width: 8,
                    },
                  },
                  axisLabel: {
                    color: '#4d5bd1',
                    distance: 16,
                    fontSize: 12,
                  },
                  axisTick: {
                    distance: 16,
                    splitNumber: 5,
                    lineStyle: {
                      color: '#468EFD',
                      width: 1,
                    },
                    length: 8,
                  },
                  splitLine: {
                    distance: 16,
                    length: 16,
                    lineStyle: {
                      color: '#468EFD',
                    },
                  },
                  itemStyle: {
                    show: false,
                    color: '#0c56eb',
                  },
                  progress: {
                    show: true,
                  },
                  detail: {
                    offsetCenter: [0, 50],
                    textStyle: {
                      padding: [0, 0, 0, 0],
                      fontSize: 18,
                      fontWeight: '700',
                      color: '#0c56eb',
                    },
                    fontSize: 16,
                  },

                  data: [
                    {
                      value: 58,
                    },
                  ],
                  pointer: {
                    length: '75%',
                    radius: '20%',
                    width: 5,
                    itemStyle: {
                      borderWidth: 0,
                    },
                  },
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value',
              label: '值',
              type: 'integer',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '蓝色科技2',
        icon: 'l-lansekeji2',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              fontSize: 10,
              series: [
                {
                  type: 'gauge',
                  radius: '60%',
                  splitNumber: 10,
                  axisLine: {
                    lineStyle: {
                      color: [[1, 'rgba(107,157,215,.25)']],
                      width: 8,
                    },
                  },
                  axisLabel: {
                    color: '#4d5bd1',
                    distance: 16,
                    fontSize: 12,
                  },
                  axisTick: {
                    distance: -50,
                    splitNumber: 5,
                    lineStyle: {
                      color: '#468EFD',
                      width: 1,
                    },
                    length: 8,
                  },
                  splitLine: {
                    distance: -58,
                    length: 16,
                    lineStyle: {
                      color: '#468EFD',
                    },
                  },
                  itemStyle: {
                    show: false,
                    color: '#0c56eb',
                  },
                  progress: {
                    show: true,
                  },
                  detail: {
                    offsetCenter: [0, 50],
                    textStyle: {
                      padding: [0, 0, 0, 0],
                      fontSize: 18,
                      fontWeight: '700',
                      color: '#0c56eb',
                    },
                    fontSize: 12,
                  },
                  data: [
                    {
                      value: 58,
                    },
                  ],
                  pointer: {
                    length: '75%',
                    radius: '20%',
                    width: 5,
                    itemStyle: {
                      borderWidth: 0,
                    },
                  },
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value',
              label: '值',
              type: 'integer',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '蓝色科技3',
        icon: 'l-lansekeji3',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              fontSize: 10,
              series: [
                {
                  name: '最外部进度条',
                  type: 'gauge',
                  radius: '100%',
                  z: 3,
                  axisLine: {
                    lineStyle: {
                      color: [[1, 'rgba(28,128,245,0)']],
                      width: 3,
                    },
                  },
                  axisLabel: {
                    show: false,
                    fontSize: 16,
                  },
                  axisTick: {
                    show: false,
                  },
                  splitLine: {
                    show: false,
                  },
                  pointer: {
                    show: false,
                  },
                  progress: {
                    show: true,
                    width: 5,
                    itemStyle: {
                      color: 'rgba(133,165,255,0.3)',
                      borderWidth: 0,
                    },
                  },
                  detail: {
                    offsetCenter: [0, 2],
                    textStyle: {
                      fontSize: 16,
                      fontWeight: 400,
                      color: '#EDFFFD',
                    },
                    fontSize: 16,
                  },
                  data: [
                    {
                      value: 40,
                    },
                  ],
                },
                {
                  name: '刻度线',
                  type: 'gauge',
                  radius: '80%',
                  splitNumber: 10,
                  axisLine: {
                    lineStyle: {
                      color: [[1, '#0063E7']],
                      width: -3,
                    },
                  },
                  axisLabel: {
                    color: '#69b1ff',
                    distance: 8,
                    fontSize: 12,
                  },
                  axisTick: {
                    distance: 6,
                    splitNumber: 5,
                    lineStyle: {
                      color: '#002c8c',
                      width: 1,
                    },
                    length: 4,
                  },
                  splitLine: {
                    distance: 6,
                    length: 10,
                    lineStyle: {
                      color: '#002c8c',
                      width: 2,
                    },
                  },
                  progress: {
                    show: true,
                    width: 60,
                    itemStyle: {
                      color: 'rgba(145,207,255,0.12)',
                      borderWidth: 0,
                    },
                  },
                  detail: {
                    show: false,
                  },
                  pointer: {
                    length: '100%',
                    radius: '20%',
                    width: 3,
                    itemStyle: {
                      borderWidth: 0,
                      color: 'rgba(69,131,255,0.3)',
                    },
                  },
                  anchor: {
                    show: true,
                    showAbove: true,
                    size: 50,
                    itemStyle: {
                      color: 'rgb(42,65,111)',
                    },
                  },
                  data: [
                    {
                      value: 40,
                    },
                  ],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.1.data.0.value',
              label: '值',
              type: 'integer',
              enableMock: true,
              mock: '30-80',
              triggers: [
                {
                  name: '触发器1',
                  conditionType: 'and',
                  conditions: [],
                  actions: [
                    {
                      action: 5,
                      params: '',
                      value:
                        "let v = pen.echarts.option.series[1].data[0].value;meta2d.setValue({id:pen.id,'echarts.option.series.0.data.0.value':v},{doEvent:false});",
                      targetType: 'id',
                      props: [],
                      input: '',
                    },
                  ],
                },
              ],
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: '地图',
    show: true,
    list: [
      {
        name: '中国地图',
        icon: 'l-earth',
        data: {
          name: 'echarts',
          width: 500,
          height: 400,
          externElement: true,
          disableAnchor: true,
          echarts: {
            geoName: 'china',
            geoUrl: 'https://assets.le5lecdn.com/v/geo/china.json',
            option: {
              tooltip: {},
              geo: {
                map: 'china',
                zoom: 1.6,
                center: [105, 35],

                label: {
                  normal: {
                    show: false,
                  },
                  emphasis: {
                    show: false,
                  },
                },
                // 地图区域的样式设置
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(26,82,231, 1)',
                    borderWidth: 1,
                    areaColor: 'rgba(7, 52, 126, 0.3)',
                  },
                  emphasis: {
                    areaColor: '#1677ff80',
                    borderColor: '#1677ff',
                  },
                },
              },
              series: [
                {
                  name: '涟漪散点',
                  tooltip: {
                    show: false,
                  },
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  data: [{ name: '武汉', value: [114.31, 30.52] }],
                  symbolSize: 8,
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke',
                  },
                  hoverAnimation: true,
                  label: {
                    show: true,
                    formatter: '{b}',
                    position: 'bottom',
                    color: 'yellow',
                    offset: [0, 4],
                  },
                  itemStyle: {
                    normal: {
                      color: 'yellow',
                      shadowBlur: 10,
                      shadowColor: 'yellow',
                    },
                  },
                  zlevel: 1,
                },
                {
                  name: '散点',
                  tooltip: {
                    show: false,
                  },
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  data: [
                    { name: '北京', value: [116.4551, 40.2539] },
                    { name: '上海', value: [121.4648, 31.2891] },
                    { name: '广州', value: [113.12244, 23.009505] },
                    { name: '杭州', value: [119.5313, 29.8773] },
                    { name: '成都', value: [103.9526, 30.7617] },
                  ],
                  symbolSize: 8,
                  label: {
                    show: true,
                    formatter: '{b}',
                    position: 'bottom',
                    color: '#36cfc9',
                    offset: [0, -2],
                  },
                  itemStyle: {
                    normal: {
                      color: '#36cfc9',
                    },
                  },
                  zlevel: 1,
                },
                {
                  name: '数据',
                  tooltip: { formatter: '{b}' },
                  animation: false,
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  symbol: 'pin',
                  symbolSize: 40,
                  label: {
                    normal: {
                      show: true,
                      formatter: '{b}',
                      textStyle: {
                        color: '#fff',
                        fontSize: 9,
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      color: '#F62157',
                    },
                  },
                  zlevel: 6,
                  data: [
                    { name: 128, value: [114.31, 30.52] },
                    { name: 96, value: [116.4551, 40.2539] },
                    { name: 94, value: [121.4648, 31.2891] },
                    { name: 86, value: [113.12244, 23.009505] },
                    { name: 92, value: [119.5313, 29.8773] },
                    { name: 82, value: [103.9526, 30.7617] },
                  ],
                },
              ],
            },
          },
          realTimes: [
            {
              key: 'echarts.option.series.2.data.0.name',
              label: '武汉',
              type: 'integer',
              enableMock: true,
              mock: '100-150',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '湖北地图',
        icon: 'l-hubei',
        data: {
          name: 'echarts',
          width: 500,
          height: 400,
          externElement: true,
          disableAnchor: true,
          echarts: {
            geoName: 'hubei',
            geoUrl: 'https://assets.le5lecdn.com/v/geo/hubei.json',
            option: {
              tooltip: {},
              geo: {
                map: 'hubei',
                zoom: 1.2,
                label: {
                  normal: {
                    show: false,
                  },
                  emphasis: {
                    show: false,
                  },
                },
                // 地图区域的样式设置
                itemStyle: {
                  normal: {
                    areaColor: {
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: '#001d66a0',
                        },
                        {
                          offset: 1,
                          color: '#061E3Da0',
                        },
                      ],
                    },
                    borderColor: 'rgba(26,82,231, 1)',
                    borderWidth: 1,
                  },
                  emphasis: {
                    areaColor: '#1677ff80',
                    borderColor: '#1677ff',
                  },
                },
              },
              series: [
                {
                  name: '涟漪',
                  tooltip: {
                    show: false,
                  },
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  data: [
                    { name: '武汉', value: [114.31, 30.52] },
                    { name: '襄阳', value: [112.12207, 31.933056] },
                    { name: '宜昌', value: [111.309082, 30.588625] },
                    { name: '荆州', value: [112.24292, 30.266177] },
                  ],
                  rippleEffect: {
                    scale: 10,
                    brushType: 'stroke',
                  },
                  showEffectOn: 'render',
                  itemStyle: {
                    normal: {
                      shadowColor: '#0ff',
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      color: {
                        colorStops: [
                          {
                            offset: 0,
                            color: '#61c0f1',
                          },
                          {
                            offset: 1,
                            color: '#6f2eb6',
                          },
                        ],
                        x: 1,
                        y: 0,
                        x2: 0,
                        y2: 0,
                        type: 'linear',
                        global: false,
                      },
                    },
                  },
                  label: {
                    normal: {
                      color: '#fff',
                    },
                  },
                  symbol: 'circle',
                  symbolSize: [10, 5],
                },
                {
                  tooltip: {
                    show: false,
                  },
                  name: '图标',
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  symbol:
                    'image://https://assets.le5lecdn.com/v%2Fmaterial%2F%E5%B8%B8%E7%94%A8%E5%9B%BE%E6%A0%87%2F%E5%9C%B0%E5%9B%BE%E6%A0%87%E6%B3%A8.svg',
                  symbolSize: [32, 32],
                  symbolOffset: [0, -20],
                  z: 9999,
                  data: [
                    { name: '武汉', value: [114.31, 30.52] },
                    { name: '襄阳', value: [112.12207, 31.933056] },
                    { name: '宜昌', value: [111.309082, 30.588625] },
                    { name: '荆州', value: [112.24292, 30.266177] },
                  ],
                },
                {
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  tooltip: { formatter: '统计：{b}' },
                  animation: false,
                  label: {
                    normal: {
                      show: true,
                      formatter: '{b}',
                      color: '#fff',
                    },
                    emphasis: {
                      show: true,
                    },
                  },
                  itemStyle: {
                    color: '#4583ff70',
                  },
                  symbol:
                    'image://https://assets.le5lecdn.com/v/material/%E9%9D%A2%E6%9D%BF/%E9%9D%A2%E6%9D%BF8.svg',
                  symbolSize: [80, 36],
                  symbolOffset: [0, -60],
                  z: 999,
                  data: [
                    { name: '2514', value: [114.31, 30.52] },
                    { name: '1265', value: [112.12207, 31.933056] },
                    { name: '1563', value: [111.309082, 30.588625] },
                    { name: '1654', value: [112.24292, 30.266177] },
                  ],
                },
              ],
            },
          },
          realTimes: [
            {
              key: 'echarts.option.series.2.data.0.name',
              label: '武汉',
              type: 'integer',
              enableMock: true,
              mock: '2000-3000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: '地图·流量',
        icon: 'l-dituliuliang',
        data: {
          name: 'echarts',
          width: 500,
          height: 400,
          externElement: true,
          disableAnchor: true,
          echarts: {
            geoName: 'china',
            geoUrl: 'https://assets.le5lecdn.com/v/geo/china.json',
            option: {
              tooltip: {},
              geo: {
                map: 'china',
                zoom: 1.6,
                center: [105, 35],
                label: {
                  normal: {
                    show: true,
                    fontSize: 10,
                    textStyle: {
                      color: '#fff',
                    },
                  },
                  emphasis: {
                    textStyle: {
                      color: '#fff',
                    },
                  },
                },
                // 地图区域的样式设置
                itemStyle: {
                  normal: {
                    borderColor: 'rgba(26,82,231, 1)',
                    borderWidth: 1,
                    areaColor: 'rgba(7, 52, 126, 0.3)',
                  },
                  emphasis: {
                    areaColor: '#1677ff80',
                    borderColor: '#1677ff',
                  },
                },
              },
              series: [
                {
                  name: '涟漪散点',
                  tooltip: {
                    show: false,
                  },
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  data: [
                    {
                      value: [118.8062, 31.9208],
                      itemStyle: { color: '#4ab2e5' },
                    },
                    {
                      value: [127.9688, 45.368],
                      itemStyle: { color: '#4fb6d2' },
                    },
                    {
                      value: [110.3467, 41.4899],
                      itemStyle: { color: '#52b9c7' },
                    },
                    {
                      value: [125.8154, 44.2584],
                      itemStyle: { color: '#5abead' },
                    },
                    {
                      value: [116.4551, 40.2539],
                      itemStyle: { color: '#f34e2b' },
                    },
                    {
                      value: [123.1238, 42.1216],
                      itemStyle: { color: '#f56321' },
                    },
                    {
                      value: [119.4543, 25.9222],
                      itemStyle: { color: '#f56f1c' },
                    },
                    {
                      value: [117.4219, 39.4189],
                      itemStyle: { color: '#f58414' },
                    },
                    {
                      value: [112.3352, 37.9413],
                      itemStyle: { color: '#f58f0e' },
                    },
                    {
                      value: [109.1162, 34.2004],
                      itemStyle: { color: '#f5a305' },
                    },
                    {
                      value: [103.5901, 36.3043],
                      itemStyle: { color: '#e7ab0b' },
                    },
                    {
                      value: [106.3586, 38.1775],
                      itemStyle: { color: '#dfae10' },
                    },
                    {
                      value: [101.4038, 36.8207],
                      itemStyle: { color: '#d5b314' },
                    },
                    {
                      value: [103.9526, 30.7617],
                      itemStyle: { color: '#c1bb1f' },
                    },
                    {
                      value: [108.384366, 30.439702],
                      itemStyle: { color: '#b9be23' },
                    },
                    {
                      value: [113.0823, 28.2568],
                      itemStyle: { color: '#a6c62c' },
                    },
                    {
                      value: [102.9199, 25.46639],
                      itemStyle: { color: '#96cc34' },
                    },
                    { value: [114.31, 30.52] },
                  ],
                  symbolSize: 8,
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke',
                  },
                  hoverAnimation: true,
                  label: {
                    show: true,
                    formatter: '{b}',
                    position: 'bottom',
                    color: 'yellow',
                    offset: [0, 4],
                  },
                  itemStyle: {
                    normal: {
                      color: '#1DE9B6',
                      shadowBlur: 10,
                      shadowColor: '#333',
                    },
                  },
                  zlevel: 1,
                },
                {
                  type: 'lines',
                  zlevel: 2,
                  effect: {
                    show: true,
                    period: 4, //箭头指向速度，值越小速度越快
                    trailLength: 0.4, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', //箭头图标
                    symbolSize: 7, //图标大小
                  },
                  lineStyle: {
                    normal: {
                      color: '#1DE9B6',
                      width: 1,
                      opacity: 0.1, //尾迹线条透明度
                      curveness: 0.3, //尾迹线条曲直度
                    },
                  },
                  data: [
                    {
                      coords: [
                        [118.8062, 31.9208],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#4ab2e5' },
                    },
                    {
                      coords: [
                        [127.9688, 45.368],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#4fb6d2' },
                    },
                    {
                      coords: [
                        [110.3467, 41.4899],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#52b9c7' },
                    },
                    {
                      coords: [
                        [125.8154, 44.2584],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#5abead' },
                    },
                    {
                      coords: [
                        [116.4551, 40.2539],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#f34e2b' },
                    },
                    {
                      coords: [
                        [123.1238, 42.1216],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#f56321' },
                    },
                    {
                      coords: [
                        [119.4543, 25.9222],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#f56f1c' },
                    },
                    {
                      coords: [
                        [117.4219, 39.4189],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#f58414' },
                    },
                    {
                      coords: [
                        [112.3352, 37.9413],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#f58f0e' },
                    },
                    {
                      coords: [
                        [109.1162, 34.2004],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#f5a305' },
                    },
                    {
                      coords: [
                        [103.5901, 36.3043],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#e7ab0b' },
                    },
                    {
                      coords: [
                        [106.3586, 38.1775],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#dfae10' },
                    },
                    {
                      coords: [
                        [101.4038, 36.8207],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#d5b314' },
                    },
                    {
                      coords: [
                        [103.9526, 30.7617],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#c1bb1f' },
                    },
                    {
                      coords: [
                        [108.384366, 30.439702],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#b9be23' },
                    },
                    {
                      coords: [
                        [113.0823, 28.2568],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#a6c62c' },
                    },
                    {
                      coords: [
                        [102.9199, 25.46639],
                        [114.31, 30.52],
                      ],
                      lineStyle: { color: '#96cc34' },
                    },
                  ],
                },
              ],
            },
          },
          realTimes: [
            {
              key: 'echarts.option.series.2.data.0.name',
              label: '武汉',
              type: 'integer',
              // enableMock: true,
              // mock: '100-150',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: 'echarts配置',
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    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: '3d-饼图',
        icon: 'l-pie-chart',
        data: {
          name: 'pie3D',
          width: 400,
          disableAnchor: true,
          height: 200,
          data: [
            { value: 335, name: '2D' },
            { value: 310, name: '3D' },
            { value: 234, name: '大屏' },
            { value: 135, name: '物联网平台' },
            { value: 1548, name: '图形库' },
          ],
          realTimes: [
            {
              key: 'data.0.value',
              label: '2D',
              type: 'float',
              enableMock: true,
              mock: '10-100',
            },
            {
              key: 'data.1.value',
              label: '3D',
              type: 'float',
              enableMock: true,
              mock: '10-100',
            },
            {
              key: 'data.2.value',
              label: '大屏',
              type: 'float',
              enableMock: true,
              mock: '10-100',
            },
            {
              key: 'data.3.value',
              label: '物联网平台',
              type: 'float',
              enableMock: true,
              mock: '10-100',
            },
            {
              key: 'data.4.value',
              label: '图形库',
              type: 'float',
              enableMock: true,
              mock: '10-100',
            },
          ],
        },
      },
    ],
  },
];