visualization-design/src/services/echarts.ts

import { ReplaceMode } from '@meta2d/chart-diagram';
import { cdn } from './api';
import i18n from '../i18n';
const $t = i18n.global.t;
//注册所有主题
export function registerTheme() {
  fetch((cdn ? cdn + '/v/' : '') + 'theme/dark.json')
    .then((r) => r.json())
    .then((theme) => {
      echarts.registerTheme('le-dark', theme);
    });
  fetch((cdn ? cdn + '/v/' : '') + 'theme/light.json')
    .then((r) => r.json())
    .then((theme) => {
      echarts.registerTheme('le-light', 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: $t('折线图'),
    show: true,
    list: [
      {
        name: $t('基础折线图-hover'),
        icon: 'l-line-chart',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 20,
                left: 20,
                right: 20,
                top: 100,
                containLabel: true,
              },
              title: {
                text: $t("标题"),
                textStyle: {
                  fontSize: 16,
                },
                padding: 5,
                top: 16,
                left: 16
              },
              // 图例
              legend:{
                data:[$t('系列1')], // 该数组中的内容要与series中的每项的name对应
                textStyle:{
                  fontSize: 12,
                },
                itemWidth: 25,
                itemHeight: 14,
                top: 48,
                padding:5,
              },
              // 提示框组件
              tooltip: {
                backgroundColor: 'rgba(24,24,24,0.95)',
                borderColor: 'rgba(24,24,24,0.95)',
                trigger: 'axis',
                axisPointer: {
                  type: "shadow"
                },
                textStyle: {
                  fontSize: 12,
                  fontWeight: 400
                }
                },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10
                },
                axisTick:{
                  alignWithLabel:true
                }
              },
              yAxis: {
                type: 'value',
                name: $t('单位'),
                nameGap: 15,
                nameTextStyle:{
                  fontSize: 12,
                  align:'right',
                  padding:[0,6,0,6]
                },
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  name:$t("系列1"),
                  type: 'line',
                  data: [40, 20, 90, 60, 70, 80],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5, //小圆点的大小
                },
              ],
            },
            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: $t('2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('3月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('4月'),
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('5月'),
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('6月'),
              type: 'float',
              enableMock: true,
              mock: '60-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('基础折线图'),
        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: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  margin: 10,
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  data: [40, 20, 90, 60, 70, 80],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: $t('1月'),
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('3月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('4月'),
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('5月'),
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('6月'),
              type: 'float',
              enableMock: true,
              mock: '60-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('多折线图'),
        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: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                    margin: 10
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  data: [40, 35, 80, 40, 45, 25],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
                {
                  type: 'line',
                  data: [25, 40, 20, 30, 25, 40],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: $t('折线一的1月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: $t('折线二的1月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('折线一的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: $t('折线二的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('折线一的3月'),
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: $t('折线二的3月'),
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('折线一的4月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: $t('折线二的4月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('折线一的5月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: $t('折线二的5月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('折线一的6月'),
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: $t('折线二的6月'),
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('折线趋势图'),
        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,
                  margin: 10
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  data: [],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
              ],
            },
            replaceMode: 0,
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: $t('数据点'),
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('基础曲线图'),
        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: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                    margin: 10
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  smooth: true,
                  data: [40, 20, 90, 60, 70, 80],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: $t('1月'),
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('3月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('4月'),
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('5月'),
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('6月'),
              type: 'float',
              enableMock: true,
              mock: '60-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('多曲线图'),
        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: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                    margin: 10
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  smooth: true,
                  data: [40, 35, 80, 40, 45, 25],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
                {
                  type: 'line',
                  smooth: true,
                  data: [25, 40, 20, 30, 25, 40],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: $t('折线一的1月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: $t('折线二的1月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('折线一的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: $t('折线二的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('折线一的3月'),
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: $t('折线二的3月'),
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('折线一的4月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: $t('折线二的4月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('折线一的5月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: $t('折线二的5月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('折线一的6月'),
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: $t('折线二的6月'),
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('曲线趋势图'),
        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,
                  margin: 10
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                    margin: 10
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  smooth: true,
                  data: [],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
              ],
            },
            replaceMode: 0,
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data',
              label: $t('数据点'),
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },

      {
        name: $t('渐变单曲线图1'),
        icon: 'l-quxian',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 40,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: ['0', '6', '12', '18', '24'],
                axisLabel: {
                  fontSize: 12,
                  fontFamily:'PingFang SC, PingFang SC-Regular',
                  fontWeight:400,
                  margin: 10,
                  color:'#b3d1ff'
                },
                axisTick:{
                  show: false
                },
                axisLine:{
                  lineStyle:{
                    color:'rgba(255,255,255,0.2)'
                  }
                }
              },
              yAxis: {
                type: 'value',
                name: $t('单位：kwh '),
                nameGap:15,
                min:0,
                max:100,
                interval:25,
                nameTextStyle: {
                  fontSize: 12,
                  padding:[0,6,0,6],
                  color:'rgba(179,209,255,0.6)',

                },
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  fontFamily:'PingFang SC, PingFang SC-Regular',
                  fontWeight:400,
                  margin:10,
                  color: 'rgba(179,209,255,0.5)',
                },
              },
              series: [
                {
                  type: 'line',
                  smooth: true,
                  data: [50, 40, 80, 50, 60, 30],
                  lineStyle:{
                    width: 2,
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [{
                        offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
                      },  {
                        offset: 0.5, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
                      },
                        {
                          offset: 1, color: 'rgba(69,131,255,0.0)' // 100% 处的颜色
                        }],
                      global: false // 缺省为 false
                    }
                  },
                  areaStyle:{
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [{
                        offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
                      },  {
                          offset: 0.5, color: 'rgba(69,131,255,0.50)' // 100% 处的颜色
                        },
                        {
                          offset: 1, color: 'rgba(69,131,255,0.0)' // 100% 处的颜色
                        }],
                      global: false // 缺省为 false
                    }
                  },
                  symbolSize: 0,
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '0',
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '6',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '12',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '18',
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '24',
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('渐变单曲线图2'),
        icon: 'l-quxian',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 40,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: ['0', '6', '12', '18', '24'],
                axisLabel: {
                  fontSize: 12,
                  fontFamily:'PingFang SC, PingFang SC-Regular',
                  fontWeight:400,
                  margin: 10,
                  color:'#b3d1ff'
                },
                axisTick:{
                  show: false
                },
                axisLine:{
                  lineStyle:{
                    color:'rgba(255,255,255,0.2)'
                  }
                },
                axisPointer:{
                  show: true,
                  type: 'line',
                  label:{
                    show:false
                  },
                  snap: true,
                  lineStyle:{
                    type: 'solid',
                    color:'rgba(255,255,255,0.30)'
                  }
                }
              },
              yAxis: {
                type: 'value',
                name: $t('单位：A '),
                nameGap:15,
                min:0,
                max:100,
                interval:25,
                nameTextStyle: {
                  fontSize: 12,
                  padding:[0,6,0,6],
                  color:'rgba(179,209,255,0.6)',

                },
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  fontFamily:'PingFang SC, PingFang SC-Regular',
                  fontWeight:400,
                  margin:10,
                  color: 'rgba(179,209,255,0.5)',
                },
              },
              series: [
                {
                  type: 'line',
                  smooth: true,
                  data: [50, 40, 80, 50, 60, 30],
                  lineStyle:{
                    width: 2,
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [{
                        offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
                      },  {
                        offset: 0.5, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
                      },
                        {
                          offset: 1, color: 'rgba(69,131,255,0.0)' // 100% 处的颜色
                        }],
                      global: false // 缺省为 false
                    }
                  },
                  areaStyle:{
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [{
                        offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
                      },  {
                        offset: 0.5, color: 'rgba(69,131,255,0.50)' // 100% 处的颜色
                      },
                        {
                          offset: 1, color: 'rgba(69,131,255,0.0)' // 100% 处的颜色
                        }],
                      global: false // 缺省为 false
                    }
                  },
                  itemStyle:{
                    color:'rgb(69,131,255)'
                  },
                  symbol: 'emptyCircle',
                  showSymbol:false,
                  symbolSize: 3,
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '0',
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '6',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '12',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '18',
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '24',
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('渐变单曲线图3'),
        icon: 'l-quxian',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 40,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: ['0', '6', '12', '18', '24'],
                axisLabel: {
                  fontSize: 12,
                  fontFamily:'PingFang SC, PingFang SC-Regular',
                  fontWeight:400,
                  margin: 10,
                  color:'#b3d1ff'
                },
                axisTick:{
                  show: false
                },
                axisLine:{
                  lineStyle:{
                    color:'rgba(255,255,255,0.2)'
                  }
                },
                axisPointer:{
                  show: true,
                  type: 'line',
                  label:{
                    show:false
                  },
                  snap: true,
                  lineStyle:{
                    type: 'solid',
                    color:'rgba(255,255,255,0.30)'
                  },
                  triggerTooltip:false
                }
              },
              yAxis: {
                type: 'value',
                name: $t('单位：V'),
                nameGap:15,
                min:0,
                max:100,
                interval:25,
                nameTextStyle: {
                  fontSize: 12,
                  padding:[0,6,0,6],
                  color:'rgba(179,209,255,0.6)',

                },
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  fontFamily:'PingFang SC, PingFang SC-Regular',
                  fontWeight:400,
                  margin:10,
                  color: 'rgba(179,209,255,0.5)',
                },
              },
              series: [
                {
                  type: 'line',
                  smooth: true,
                  data: [50, 40, 80, 50, 60, 30],
                  lineStyle:{
                    width: 2,
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [{
                        offset: 0, color: 'rgba(50,167,192,0.0)' // 0% 处的颜色
                      },  {
                        offset: 0.5, color: 'rgba(50,167,192,1.0)' // 100% 处的颜色
                      },
                        {
                          offset: 1, color: 'rgba(50,167,192,0.0)' // 100% 处的颜色
                        }],
                      global: false // 缺省为 false
                    }
                  },
                  areaStyle:{
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 1,
                      y2: 0,
                      colorStops: [{
                        offset: 0, color: 'rgba(50,167,192,0.0)' // 0% 处的颜色
                      },  {
                        offset: 0.5, color: 'rgba(50,167,192,0.50)' // 100% 处的颜色
                      },
                        {
                          offset: 1, color: 'rgba(50,167,192,0.0)' // 100% 处的颜色
                        }],
                      global: false // 缺省为 false
                    }
                  },
                  itemStyle:{
                    color:'#37B3CC'
                  },
                  symbol: 'emptyCircle',
                  showSymbol:false,
                  symbolSize: 3,
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: '0',
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: '6',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: '12',
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: '18',
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: '24',
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },

      {
        name: $t('阶梯折线图'),
        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: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                    margin: 10
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  step: 'start',
                  data: [40, 20, 90, 60, 70, 80],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: $t('1月'),
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('3月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('4月'),
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('5月'),
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('6月'),
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('面积图'),
    show: true,
    list: [
      {
        name: $t('基础面积图'),
        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: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  data: [40, 20, 90, 60, 70, 80],
                  areaStyle: { opacity: 0.3 },
                  smooth: true,
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: $t('1月'),
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('3月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('4月'),
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('5月'),
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('6月'),
              type: 'float',
              enableMock: true,
              mock: '60-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('堆叠面积图'),
        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: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10
                },
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'line',
                  areaStyle: { opacity: 0.3 },
                  smooth: true,
                  data: [40, 35, 80, 40, 45, 25],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
                {
                  type: 'line',
                  areaStyle: { opacity: 0.3 },
                  smooth: true,
                  data: [25, 40, 20, 30, 25, 40],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: $t('折线一的1月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: $t('折线二的1月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('折线一的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: $t('折线二的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('折线一的3月'),
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: $t('折线二的3月'),
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('折线一的4月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: $t('折线二的4月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('折线一的5月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: $t('折线二的5月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('折线一的6月'),
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: $t('折线二的6月'),
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('柱状图'),
    show: true,
    list: [
      {
        // 由于原生背景无法自定义阴影宽度，所以 采用两个bar堆叠的方式实现，通过tooltip配置和
        name: $t('基础柱状图'),
        icon: 'l-bar-chart',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              barWidth: 10,
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              tooltip: {
                backgroundColor: 'rgba(24,24,24,0.95)',
                borderColor: 'rgba(24,24,24,0.95)',
                trigger: 'axis',
                axisPointer: {
                  type: "none"
                },
                textStyle: {
                  fontSize: 12,
                  fontWeight: 400
                }
              },
              fontSize: 10,
              xAxis:[ {
                type: 'category',
                data: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10
                },
                axisTick:{
                  show:false
                },
              }, {
                type: 'category',
                show: false,
                data: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  fontFamily:'PingFang SC, PingFang SC-Regular',
                  fontWeight:400,
                  margin: 10,
                  color:'rgba(255,255,255,0.7)',
                },
                axisTick:{
                  show:false
                },
              }],
              yAxis: {
                type: 'value',
                max: 100,
                min: 0,
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'bar',
                  name: '系列1',
                  data: [
                    {
                      value: 40,
                    },
                    {
                      value: 20,
                    },
                    {
                      value: 90,
                    },
                    {
                      value: 60,
                    },
                    {
                      value: 70,
                    },
                    {
                      value: 80,
                    },
                  ],
                  itemStyle:{
                    color:'#4583ff'
                  },
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                },
                {
                  xAxisIndex: 1,
                  itemStyle: {
                    color: 'rgba(180, 180, 180, 0.2)',
                    opacity: 0
                  },
                  data: [100,100,100,100,100,100],
                  barWidth: 30,
                  emphasis: {
                    itemStyle: {
                      color: 'rgba(255,255,255,0.05)',
                      opacity: 1
                    },
                  },
                  type: 'bar',
                  tooltip:{
                    show: false,
                  }
                }
              ],
            },
            max: 100,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value',
              label: $t('1月'),
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1.value',
              label: $t('2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2.value',
              label: $t('3月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3.value',
              label: $t('4月'),
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4.value',
              label: $t('5月'),
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5.value',
              label: $t('6月'),
              type: 'float',
              enableMock: true,
              mock: '60-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('分组柱状图'),
        icon: 'l-fenzuzhuzhuangtu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              barWidth: '10',
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              xAxis: {
                type: 'category',
                data: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  fontFamily:'PingFang SC, PingFang SC-Regular',
                  fontWeight:400,
                  margin: 10,
                  color:'rgba(255,255,255,0.7)',
                },
                axisTick:{
                  show: false
                }
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                  textStyle: {
                    color: '#FFFFFF66', //Y轴内容文字颜色
                  },
                },
              },
              series: [
                {
                  type: 'bar',
                  data: [40, 35, 80, 40, 45, 25],
                  barGap:'100%'
                },
                {
                  type: 'bar',
                  data: [25, 40, 20, 30, 25, 40],
                },
              ],
            },
            max: 30,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0',
              label: $t('分组一的1月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: $t('分组二的1月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('分组一的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: $t('分组二的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('分组一的3月'),
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: $t('分组二的3月'),
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('分组一的4月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: $t('分组二的4月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('分组一的5月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: $t('分组二的5月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('分组一的6月'),
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: $t('分组二的6月'),
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('堆叠柱状图'),
        icon: 'l-duidiezhuzhuangtu',
        data: {
          name: 'echarts',
          width: 366,
          height: 206,
          externElement: true,
          disableAnchor: true,
          echarts: {
            option: {
              barWidth: '10',
              grid: {
                bottom: 8,
                left: 8,
                right: 8,
                top: 12,
                containLabel: true,
              },
              xAxis: {
                type: 'category',
                data: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  fontFamily:'PingFang SC, PingFang SC-Regular',
                  fontWeight:400,
                  margin: 10,
                  color:'rgba(255,255,255,0.7)',
                },
                axisTick:{
                  show: false
                }
              },
              yAxis: {
                type: 'value',
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                  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: $t('分组一的1月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: $t('分组二的1月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('分组一的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: $t('分组二的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('分组一的3月'),
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: $t('分组二的3月'),
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('分组一的4月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: $t('分组二的4月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('分组一的5月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: $t('分组二的5月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('分组一的6月'),
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: $t('分组二的6月'),
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('渐变柱状图'),
        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: 40,
                containLabel: true,
              },
              fontSize: 10,
              xAxis: {
                type: 'category',
                data: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  fontFamily:'PingFang SC, PingFang SC-Regular',
                  fontWeight:400,
                  margin: 10,
                  color:'#b3d1ff',
                  padding:[0,10,0,0]
                },
                axisTick:{
                  show:false
                }
              },
              yAxis: {
                name:$t('单位：万kwh'),
                nameGap:15,
                nameTextStyle: {
                  fontSize: 12,
                  padding:[0,6,0,6],
                  color:'rgba(179,209,255,0.6)',
                },
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  fontFamily:'PingFang SC, PingFang SC-Regular',
                  fontWeight:400,
                  margin:10,
                  color: 'rgba(179,209,255,0.5)',
                },
                type: 'value',
                splitNumber: 2,
                min:0,
                max:600,
                interval:150,
              },
              series: [
                {
                  type: 'bar',
                  barWidth: 12,
                  // barGap:'-180%',
                  data: [
                    {
                      value: 360,
                      itemStyle: {
                        color: {
                          type:'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
                          }, {
                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
                          }],
                          global: false // 缺省为 false
                        }
                      },
                    },
                    {
                      value: 160,
                      itemStyle: {
                        color: {
                          type:'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
                          }, {
                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
                          }],
                          global: false // 缺省为 false
                        }
                      },
                    },
                    {
                      value: 475,
                      itemStyle: {
                        color: {
                          type:'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                            offset: 0, color: 'rgba(50,167,192,0)' // 0% 处的颜色
                          }, {
                            offset: 1, color: 'rgba(50,167,192,1.0)' // 100% 处的颜色
                          }],
                          global: false // 缺省为 false
                        }
                      },
                    },
                    {
                      value: 200,
                      itemStyle: {
                        color: {
                          type:'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
                          }, {
                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
                          }],
                          global: false // 缺省为 false
                        }
                      },
                    },
                    {
                      value: 320,
                      itemStyle: {
                        color: {
                          type:'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
                          }, {
                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
                          }],
                          global: false // 缺省为 false
                        }
                      },
                    },
                    {
                      value: 430,
                      itemStyle: {
                        color:{
                          type:'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
                          }, {
                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
                          }],
                          global: false // 缺省为 false
                        }
                      },
                    },
                  ],
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                }, {
                  type: 'bar',
                  itemStyle: {
                    normal: {
                      color: 'rgba(255,255,255,0.05)'
                    }
                  },
                  silent: true,
                  barWidth: 28,
                  barGap: '-166.5%',
                  lineStyle:{
                    width: 2
                  },
                  symbolSize: 5,
                  data: [600, 600, 600, 600,600,600]
                },
                {
                  data: [{
                    value:360
                  }, {
                   value:160
                  }, {
                    value:475
                  }, {
                    value: 200
                  }, {
                    value:320
                  }, {
                    value:430
                  }],
                  type: "line",
                  symbol: "path://M0,0L0,0L0,0L0,0L0,0Z m106.00003051757812,653l806.9999694824219,0l0,99l-806.9999694824219,0l0,-99Z",
                  symbolOffset:[-4.7,0],
                  symbolSize:13.3,
                  barGap: '-190%',
                  barWidth:12,
                  lineStyle: {
                    color: "rgba(0, 0, 0, 0)"
                  },
                  itemStyle:{
                    color: "#ffffff"
                  }
                }
              ],
            },
            max: 100,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value',
              label: $t('1月'),
              type: 'float',
              enableMock: true,
              mock: '10-400',
              // triggers: [
              //   {
              //     name: $t('触发器1'),
              //     conditionType: 'and',
              //     conditions: [],
              //     actions: [
              //       {
              //         action: 5,
              //         params: '',
              //         value:
              //           "let v = pen.echarts.option.series[0].data[0].value;meta2d.setValue({id:pen.id,'echarts.option.series.2.data.0.value':v},{doEvent:false,render:true});",
              //         targetType: 'id',
              //         props: [],
              //         input: '',
              //       },
              //     ],
              //   },
              // ]
            },
            {
              key: 'echarts.option.series.0.data.1.value',
              label: $t('2月'),
              type: 'float',
              enableMock: true,
              mock: '0-500',
              // triggers: [
              //   {
              //     name: $t('触发器1'),
              //     conditionType: 'and',
              //     conditions: [],
              //     actions: [
              //       {
              //         action: 5,
              //         params: '',
              //         value:
              //           "let v = pen.echarts.option.series[0].data[1].value;meta2d.setValue({id:pen.id,'echarts.option.series.2.data.1.value':v},{doEvent:false,render:true});",
              //         targetType: 'id',
              //         props: [],
              //         input: '',
              //       },
              //     ],
              //   },
              // ]
            },
            {
              key: 'echarts.option.series.0.data.2.value',
              label: $t('3月'),
              type: 'float',
              enableMock: true,
              mock: '0-500',
              // triggers: [
              //   {
              //     name: $t('触发器1'),
              //     conditionType: 'and',
              //     conditions: [],
              //     actions: [
              //       {
              //         action: 5,
              //         params: '',
              //         value:
              //           "let v = pen.echarts.option.series[0].data[2].value;meta2d.setValue({id:pen.id,'echarts.option.series.2.data.2.value':v},{doEvent:false});",
              //         targetType: 'id',
              //         props: [],
              //         input: '',
              //       },
              //     ],
              //   },
              // ]
            },
            {
              key: 'echarts.option.series.0.data.3.value',
              label: $t('4月'),
              type: 'float',
              enableMock: true,
              mock: '20-600',
              // triggers: [
              //   {
              //     name: $t('触发器1'),
              //     conditionType: 'and',
              //     conditions: [],
              //     actions: [
              //       {
              //         action: 5,
              //         params: '',
              //         value:
              //           "let v = pen.echarts.option.series[0].data[3].value;meta2d.setValue({id:pen.id,'echarts.option.series.2.data.3.value':v},{doEvent:false});",
              //         targetType: 'id',
              //         props: [],
              //         input: '',
              //       },
              //     ],
              //   },
              // ]
            },
            {
              key: 'echarts.option.series.0.data.4.value',
              label: $t('5月'),
              type: 'float',
              enableMock: true,
              mock: '0-600',
              // triggers: [
              //   {
              //     name: $t('触发器1'),
              //     conditionType: 'and',
              //     conditions: [],
              //     actions: [
              //       {
              //         action: 5,
              //         params: '',
              //         value:
              //           "let v = pen.echarts.option.series[0].data[4].value;meta2d.setValue({id:pen.id,'echarts.option.series.2.data.4.value':v},{doEvent:false});",
              //         targetType: 'id',
              //         props: [],
              //         input: '',
              //       },
              //     ],
              //   },
              // ]
            },
            {
              key: 'echarts.option.series.0.data.5.value',
              label: $t('6月'),
              type: 'float',
              enableMock: true,
              mock: '100-600',
              triggers: [
                {
                  name: $t('触发器1'),
                  conditionType: 'and',
                  conditions: [],
                  actions: [
                    {
                      action: 5,
                      params: '',
                      value:
                        `let v1 = pen.echarts.option.series[0].data[0].value;
                        let v2 = pen.echarts.option.series[0].data[1].value;
                        let v3 = pen.echarts.option.series[0].data[2].value;
                        let v4 = pen.echarts.option.series[0].data[3].value;
                        let v5 = pen.echarts.option.series[0].data[4].value;
                        let v6 = pen.echarts.option.series[0].data[5].value;

                        meta2d.setValue({id:pen.id,
                          'echarts.option.series.2.data.0.value':v1,
                          'echarts.option.series.2.data.1.value':v2,
                          'echarts.option.series.2.data.2.value':v3,
                          'echarts.option.series.2.data.3.value':v4,
                          'echarts.option.series.2.data.4.value':v5,
                          'echarts.option.series.2.data.5.value':v6
                        },{doEvent:false,render:true});
                        let arr = [v1,v2,v3,v4,v5,v6];
                        let max = 0;
                        for(let i = 0;i<arr.length;i++ ){
                          if(arr[i] > arr[max]){
                            max = i
                          }
                        };
                        pen.echarts.option.series[0].data.forEach((i)=>{
                            i.itemStyle.color = {
                          type:'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                            offset: 0, color: 'rgba(69,131,255,0.0)' // 0% 处的颜色
                          }, {
                            offset: 1, color: 'rgba(69,131,255,1.0)' // 100% 处的颜色
                          }],
                          global: false // 缺省为 false
                        }
                        })
                         pen.echarts.option.series[0].data[max].itemStyle.color = {
                          type:'linear',
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                            offset: 0, color: 'rgba(50,167,192,0)' // 0% 处的颜色
                          }, {
                            offset: 1, color: 'rgba(50,167,192,1.0)' // 100% 处的颜色
                          }],
                          global: false // 缺省为 false
                        }
                        `,
                      targetType: 'id',
                      props: [],
                      input: '',
                    },
                  ],
                },
              ]
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },

    ],
  },
  {
    name: $t('条形图'),
    show: true,
    list: [
      {
        name: $t('基础条形图'),
        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: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10
                },
              },
              xAxis: {
                type: 'value',
                max: 100,
                min: 0,
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                  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: $t('1月'),
              type: 'float',
              enableMock: true,
              mock: '10-40',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('3月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('4月'),
              type: 'float',
              enableMock: true,
              mock: '20-60',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('5月'),
              type: 'float',
              enableMock: true,
              mock: '0-80',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('6月'),
              type: 'float',
              enableMock: true,
              mock: '60-100',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('分组条形图'),
        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: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('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: $t('分组一的1月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: $t('分组二的1月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('分组一的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: $t('分组二的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('分组一的3月'),
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: $t('分组二的3月'),
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('分组一的4月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: $t('分组二的4月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('分组一的5月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: $t('分组二的5月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('分组一的6月'),
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: $t('分组二的6月'),
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('堆叠条形图'),
        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: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                },
              },
              xAxis: {
                type: 'value',
                max: 100,
                min: 0,
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                  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: $t('分组一的1月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: $t('分组二的1月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('分组一的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: $t('分组二的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('分组一的3月'),
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: $t('分组二的3月'),
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('分组一的4月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: $t('分组二的4月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('分组一的5月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: $t('分组二的5月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('分组一的6月'),
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: $t('分组二的6月'),
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('正负条形图'),
        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: [$t('1月'), $t('2月'), $t('3月'), $t('4月'), $t('5月'), $t('6月')],
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                },
              },
              xAxis: {
                type: 'value',
                max: 100,
                min: -50,
                splitNumber: 2,
                minInterval: 50,
                axisLabel: {
                  fontSize: 12,
                  margin: 10,
                  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: $t('分组一的1月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.0',
              label: $t('分组二的1月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.2.data.0',
              label: $t('分组三的1月'),
              type: 'float',
              enableMock: true,
              mock: '-10--2',
            },
            {
              key: 'echarts.option.series.0.data.1',
              label: $t('分组一的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-50',
            },
            {
              key: 'echarts.option.series.1.data.1',
              label: $t('分组二的2月'),
              type: 'float',
              enableMock: true,
              mock: '0-70',
            },
            {
              key: 'echarts.option.series.2.data.1',
              label: $t('分组三的2月'),
              type: 'float',
              enableMock: true,
              mock: '-30--10',
            },
            {
              key: 'echarts.option.series.0.data.2',
              label: $t('分组一的3月'),
              type: 'float',
              enableMock: true,
              mock: '8-80',
            },
            {
              key: 'echarts.option.series.1.data.2',
              label: $t('分组二的3月'),
              type: 'float',
              enableMock: true,
              mock: '1-70',
            },
            {
              key: 'echarts.option.series.2.data.2',
              label: $t('分组三的3月'),
              type: 'float',
              enableMock: true,
              mock: '-30--1',
            },
            {
              key: 'echarts.option.series.0.data.3',
              label: $t('分组一的4月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.3',
              label: $t('分组二的4月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.2.data.3',
              label: $t('分组三的4月'),
              type: 'float',
              enableMock: true,
              mock: '-50--10',
            },
            {
              key: 'echarts.option.series.0.data.4',
              label: $t('分组一的5月'),
              type: 'float',
              enableMock: true,
              mock: '20-100',
            },
            {
              key: 'echarts.option.series.1.data.4',
              label: $t('分组二的5月'),
              type: 'float',
              enableMock: true,
              mock: '10-70',
            },
            {
              key: 'echarts.option.series.2.data.4',
              label: $t('分组三的5月'),
              type: 'float',
              enableMock: true,
              mock: '-40--10',
            },
            {
              key: 'echarts.option.series.0.data.5',
              label: $t('分组一的6月'),
              type: 'float',
              enableMock: true,
              mock: '0-100',
            },
            {
              key: 'echarts.option.series.1.data.5',
              label: $t('分组二的6月'),
              type: 'float',
              enableMock: true,
              mock: '30-80',
            },
            {
              key: 'echarts.option.series.2.data.5',
              label: $t('分组三的6月'),
              type: 'float',
              enableMock: true,
              mock: '-30--20',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('饼环图'),
    show: true,
    list: [
      {
        name: $t('饼图'),
        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',
                      },
                    },
                  },
                  labelLine:{
                    length: 25,
                    length2: 15
                  },
                  data: [
                    { value: 335, name: '2D' },
                    { value: 310, name: '3D' },
                    { value: 234, name: $t('大屏') },
                    { value: 135, name: $t('物联网平台') },
                    { value: 1548, name: $t('图形库') },
                  ],
                },
              ],
            },
            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: $t('大屏'),
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.3.value',
              label: $t('物联网平台'),
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.4.value',
              label: $t('图形库'),
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('环图'),
        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',
                      },
                    },
                  },
                  labelLine:{
                    length: 25,
                    length2: 15
                  },
                  data: [
                    { value: 335, name: '2D' },
                    { value: 310, name: '3D' },
                    { value: 234, name: $t('大屏') },
                    { value: 135, name: $t('物联网平台') },
                    { value: 1548, name: $t('图形库') },
                  ],
                },
              ],
            },
            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: $t('大屏'),
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.3.value',
              label: $t('物联网平台'),
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.4.value',
              label: $t('图形库'),
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('圆角环图'),
        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,
                  },
                  labelLine:{
                    length: 25,
                    length2: 15
                  },
                  data: [
                    { value: 335, name: '2D' },
                    { value: 310, name: '3D' },
                    { value: 234, name: $t('大屏') },
                    { value: 135, name: $t('物联网平台') },
                    { value: 1548, name: $t('图形库') },
                  ],
                },
              ],
            },
            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: $t('大屏'),
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.3.value',
              label: $t('物联网平台'),
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
            {
              key: 'echarts.option.series.0.data.4.value',
              label: $t('图形库'),
              type: 'integer',
              enableMock: true,
              mock: '300-1000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('散点图'),
    show: true,
    list: [
      {
        name: $t('散点图'),
        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: $t('点1.X'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.0.1',
              label: $t('点1.Y'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.1.0',
              label: $t('点2.X'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.1.1',
              label: $t('点2.Y'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.2.0',
              label: $t('点3.X'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.2.1',
              label: $t('点3.Y'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('涟漪散点图'),
        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: $t('点1.X'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.0.1',
              label: $t('点1.Y'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.1.0',
              label: $t('点2.X'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.1.1',
              label: $t('点2.Y'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.2.0',
              label: $t('点3.X'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
            {
              key: 'echarts.option.series.0.data.2.1',
              label: $t('点3.Y'),
              type: 'float',
              enableMock: true,
              mock: '10.00-16',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('雷达图'),
    show: true,
    list: [
      {
        name: $t('雷达图'),
        icon: 'l-leidatu',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              radar: {
                indicator: [
                  { name: $t('销售'), max: 65000 },
                  { name: $t('管理'), max: 16000 },
                  { name: $t('数据'), max: 30000 },
                  { name: $t('支持'), max: 38000 },
                  { name: $t('开发'), max: 52000 },
                  { name: $t('营销'), 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: $t('预算'),
                    },
                    {
                      value: [60000, 14000, 28000, 26000, 42000, 21000],
                      name: $t('消费'),
                    },
                  ],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value.0',
              label: $t('预算.销售'),
              type: 'integer',
              enableMock: true,
              mock: '40000-65000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.1',
              label: $t('预算.管理'),
              type: 'integer',
              enableMock: true,
              mock: '14000-16000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.2',
              label: $t('预算.数据'),
              type: 'integer',
              enableMock: true,
              mock: '20000-30000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.3',
              label: $t('预算.支持'),
              type: 'integer',
              enableMock: true,
              mock: '30000-38000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.4',
              label: $t('预算.开发'),
              type: 'integer',
              enableMock: true,
              mock: '30000-52000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.5',
              label: $t('预算.营销'),
              type: 'integer',
              enableMock: true,
              mock: '10000-25000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('圆形雷达图'),
        icon: 'l-yuanxingleidatu',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              radar: {
                shape: 'circle',
                indicator: [
                  { name: $t('销售'), max: 65000 },
                  { name: $t('管理'), max: 16000 },
                  { name: $t('数据'), max: 30000 },
                  { name: $t('支持'), max: 38000 },
                  { name: $t('开发'), max: 52000 },
                  { name: $t('营销'), 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: $t('预算'),
                    },
                    {
                      value: [60000, 14000, 28000, 26000, 42000, 21000],
                      name: $t('消费'),
                    },
                  ],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value.0',
              label: $t('预算.销售'),
              type: 'integer',
              enableMock: true,
              mock: '40000-65000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.1',
              label: $t('预算.管理'),
              type: 'integer',
              enableMock: true,
              mock: '14000-16000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.2',
              label: $t('预算.数据'),
              type: 'integer',
              enableMock: true,
              mock: '20000-30000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.3',
              label: $t('预算.支持'),
              type: 'integer',
              enableMock: true,
              mock: '30000-38000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.4',
              label: $t('预算.开发'),
              type: 'integer',
              enableMock: true,
              mock: '30000-52000',
            },
            {
              key: 'echarts.option.series.0.data.0.value.5',
              label: $t('预算.营销'),
              type: 'integer',
              enableMock: true,
              mock: '10000-25000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('关系图'),
    show: true,
    list: [
      {
        name: $t('力引导布局'),
        icon: 'l-liyindaobuju',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              tooltip: {},
              series: [
                {
                  type: 'graph',
                  layout: 'force',
                  zoom: 1,
                  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: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('知识图谱'),
        icon: 'l-zhishitupu',
        data: {
          width: 400,
          height: 400,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              tooltip: {},
              series: [
                {
                  type: 'graph',
                  symbolSize: 58,
                  layout: 'force',
                  zoom: 1,
                  data: [
                    {
                      name: $t('操作系统'),
                      category: 0,
                    },
                    {
                      name: $t('浏览器'),
                      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: $t('浏览器'),
                      target: $t('操作系统'),
                      name: $t('包含'),
                      label: {
                        fontSize: 12
                      },
                      lineStyle: {
                        color: '#4583ff'
                      },
                    },
                    {
                      source: 'HTML',
                      target: $t('浏览器'),
                      name: $t('实现'),
                      label: {
                        fontSize: 12
                      },
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'CSS',
                      target: $t('浏览器'),
                      name: $t('实现'),
                      label: {
                        fontSize: 12
                      },
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'JavaScript',
                      target: $t('浏览器'),
                      name: $t('实现'),
                      label: {
                        fontSize: 12
                      },
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'Chrome',
                      target: $t('浏览器'),
                      name: $t('属于'),
                      label: {
                        fontSize: 12
                      },
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'IE',
                      target: $t('浏览器'),
                      name: $t('属于'),
                      label: {
                        fontSize: 12
                      },
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'Firefox',
                      target: $t('浏览器'),
                      name: $t('属于'),
                      label: {
                        fontSize: 12
                      },
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'Safari',
                      target: $t('浏览器'),
                      name: $t('属于'),
                      label: {
                        fontSize: 12
                      },
                      lineStyle: { color: '#4583ff' },
                    },
                    {
                      source: 'Chrome',
                      target: 'JavaScript',
                      name: $t('关联'),
                      label: {
                        fontSize: 12
                      },
                      lineStyle: { color: '#4583ff' },
                    },
                  ],
                  categories: [
                    {
                      name: 'A',
                      itemStyle: {
                        color: '#4583ff',
                      },
                    },
                    { name: 'B' },
                    { name: 'C' },
                    { name: 'D' },
                  ],
                  roam: true,
                  edgeSymbol: ['', 'arrow'],
                  edgeSymbolSize: 10,
                  label: {
                    show: true,
                    fontSize: 16
                  },
                  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: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('桑葚图'),
    show: true,
    list: [
      {
        name: $t('桑基图'),
        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',
                },
                nodeWidth: 20,
                nodeGap: 8,
                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: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('自定义桑基图'),
        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,
                },
                nodeWidth: 20,
                nodeGap: 8,
                label: {
                  color: '#fff',
                  fontSize: 10,
                },
                data: [
                  {
                    name: $t('华中'),
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: $t('华南'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('华东'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('华北'),
                    itemStyle: {
                      color: 'rgba(198,89,17)',
                      borderColor: 'rgba(198,89,17)',
                    },
                  },

                  {
                    name: $t('西北'),
                    itemStyle: {
                      color: 'rgba(112,173,71)',
                      borderColor: 'rgba(112,173,71)',
                    },
                  },
                  {
                    name: $t('西南'),
                    itemStyle: {
                      color: 'rgba(117,113,113)',
                      borderColor: 'rgba(117,113,113)',
                    },
                  },
                  {
                    name: $t('北京'),
                    itemStyle: {
                      color: 'rgba(198,89,17)',
                      borderColor: 'rgba(198,89,17)',
                    },
                  },
                  {
                    name: $t('上海'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('武汉'),
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: $t('济南'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('东莞'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('珠海'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('青岛'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('无锡'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('厦门'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('成都'),
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: $t('杭州'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('金华'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('南京'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('西安'),
                    itemStyle: {
                      color: 'rgba(112,173,71)',
                      borderColor: 'rgba(112,173,71)',
                    },
                  },
                  {
                    name: $t('中山'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('天津'),
                    itemStyle: {
                      color: 'rgba(198,89,17)',
                      borderColor: 'rgba(198,89,17)',
                    },
                  },
                  {
                    name: $t('苏州'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('威海'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('银川'),
                    itemStyle: {
                      color: 'rgba(112,173,71)',
                      borderColor: 'rgba(112,173,71)',
                    },
                  },
                  {
                    name: $t('贵阳'),
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: $t('佛山'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('东营'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('舟山'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('郑州'),
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: $t('烟台'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('嘉兴'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('三亚'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('宁波'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('潍坊'),
                    itemStyle: {
                      color: 'rgba(198,89,17)',
                      borderColor: 'rgba(198,89,17)',
                    },
                  },
                  {
                    name: $t('合肥'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('湖州'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('枣庄'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('太原'),
                    itemStyle: {
                      color: 'rgba(198,89,17)',
                      borderColor: 'rgba(198,89,17)',
                    },
                  },
                  {
                    name: $t('海口'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('长沙'),
                    itemStyle: {
                      color: 'rgba(0,176,80)',
                      borderColor: 'rgba(0,176,80)',
                    },
                  },
                  {
                    name: $t('淄博'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('聊城'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('常州'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('济宁'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('南宁'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('梅州'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('遵义'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('南昌'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('宿迁'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('福州'),
                    itemStyle: {
                      color: 'rgba(48,84,150)',
                      borderColor: 'rgba(48,84,150)',
                    },
                  },
                  {
                    name: $t('桂林'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('广州'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('深圳'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('惠州'),
                    itemStyle: {
                      color: 'rgba(112,48,160)',
                      borderColor: 'rgba(112,48,160)',
                    },
                  },
                  {
                    name: $t('拉萨'),
                    itemStyle: {
                      color: 'rgba(117,113,113)',
                      borderColor: 'rgba(117,113,113)',
                    },
                  },
                ],
                links: [
                  { source: $t('武汉'), target: $t('华中'), value: 1 },
                  { source: $t('深圳'), target: $t('华南'), value: 1 },
                  { source: $t('北京'), target: $t('华北'), value: 1 },
                  { source: $t('广州'), target: $t('华南'), value: 1 },
                  { source: $t('上海'), target: $t('华东'), value: 1 },
                  { source: $t('济南'), target: $t('华东'), value: 1 },
                  { source: $t('东莞'), target: $t('华南'), value: 1 },
                  { source: $t('珠海'), target: $t('华南'), value: 1 },
                  { source: $t('青岛'), target: $t('华东'), value: 1 },
                  { source: $t('无锡'), target: $t('华东'), value: 1 },
                  { source: $t('厦门'), target: $t('华东'), value: 1 },
                  { source: $t('成都'), target: $t('华中'), value: 1 },
                  { source: $t('杭州'), target: $t('华东'), value: 1 },
                  { source: $t('金华'), target: $t('华东'), value: 1 },
                  { source: $t('南京'), target: $t('华东'), value: 1 },
                  { source: $t('西安'), target: $t('西北'), value: 1 },
                  { source: $t('中山'), target: $t('华南'), value: 1 },
                  { source: $t('天津'), target: $t('华北'), value: 1 },
                  { source: $t('苏州'), target: $t('华东'), value: 1 },
                  { source: $t('威海'), target: $t('华东'), value: 1 },
                  { source: $t('银川'), target: $t('西北'), value: 1 },
                  { source: $t('贵阳'), target: $t('华中'), value: 1 },
                  { source: $t('佛山'), target: $t('华南'), value: 1 },
                  { source: $t('东营'), target: $t('华东'), value: 1 },
                  { source: $t('舟山'), target: $t('华东'), value: 1 },
                  { source: $t('郑州'), target: $t('华中'), value: 1 },
                  { source: $t('烟台'), target: $t('华东'), value: 1 },
                  { source: $t('嘉兴'), target: $t('华东'), value: 1 },
                  { source: $t('三亚'), target: $t('华南'), value: 1 },
                  { source: $t('宁波'), target: $t('华东'), value: 1 },
                  { source: $t('潍坊'), target: $t('华北'), value: 1 },
                  { source: $t('合肥'), target: $t('华东'), value: 1 },
                  { source: $t('湖州'), target: $t('华东'), value: 1 },
                  { source: $t('枣庄'), target: $t('华东'), value: 1 },
                  { source: $t('太原'), target: $t('华北'), value: 1 },
                  { source: $t('海口'), target: $t('华南'), value: 1 },
                  { source: $t('长沙'), target: $t('华中'), value: 1 },
                  { source: $t('淄博'), target: $t('华东'), value: 1 },
                  { source: $t('聊城'), target: $t('华东'), value: 1 },
                  { source: $t('常州'), target: $t('华东'), value: 1 },
                  { source: $t('济宁'), target: $t('华东'), value: 1 },
                  { source: $t('南宁'), target: $t('华南'), value: 1 },
                  { source: $t('梅州'), target: $t('华南'), value: 1 },
                  { source: $t('遵义'), target: $t('华东'), value: 1 },
                  { source: $t('南昌'), target: $t('华东'), value: 1 },
                  { source: $t('宿迁'), target: $t('华东'), value: 1 },
                  { source: $t('福州'), target: $t('华东'), value: 1 },
                  { source: $t('桂林'), target: $t('华南'), value: 1 },
                  { source: $t('惠州'), target: $t('华南'), value: 1 },
                  { source: $t('拉萨'), target: $t('西南'), 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: $t('武汉->华中'),
              type: 'integer',
              enableMock: true,
              mock: '1-18',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('仪表盘'),
    show: true,
    list: [
      {
        name: $t('基础仪表盘'),
        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,
                    length: 8,
                    lineStyle: {
                      color: '#6B9DD7',
                    },
                  },
                  splitLine: {
                    distance: 4,
                    length: 10,
                    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,
                    distance: 15
                  },
                  itemStyle: {
                    color: '#0c56eb',
                  },
                  pointer: {
                    length: 100,
                    width: 6,
                    itemStyle: {
                      borderWidth: 0,
                    },
                  },
                  data: [{ value: 70 }],
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value',
              label: $t('值'),
              type: 'integer',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('圆盘仪表盘'),
        icon: 'l-yuanpanyibiaopan',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              fontSize: 10,
              series: [
                {
                  name: $t('最外部进度条'),
                  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,
                    offsetCenter: [0,50],
                  },
                  data: [{ value: 60 }],
                  pointer: {
                    length: '40%',
                    radius: '20%',
                    width: 4,
                    itemStyle: {
                      color: '#45CAED',
                      borderWidth: 0,
                    },
                  },
                },
                {
                  name: $t('指针上的圆'),
                  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: $t('外层透明圆'),
                  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: $t('内圆'),
                  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: $t('值'),
              type: 'integer',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('进度仪表盘'),
        icon: 'l-jinduyibiaopan',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              fontSize: 10,
              series: [
                {
                  name: $t('最外部环'),
                  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: $t('仪表盘'),
                  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: $t('值'),
              type: 'integer',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('蓝色科技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',
                      width:3
                    },
                  },
                  itemStyle: {
                    show: false,
                    color: '#0c56eb',
                  },
                  progress: {
                    show: true,
                    width: 10
                  },
                  detail: {
                    offsetCenter: [0, 50],
                    textStyle: {
                      padding: [0, 0, 0, 0],
                      fontSize: 20,
                      color: '#0c56eb',
                    },
                  },

                  data: [
                    {
                      value: 58,
                    },
                  ],
                  pointer: {
                    show: true,
                    radius: '20%',
                    width: 5,
                    itemStyle: {
                      borderWidth: 0,
                    },
                  },
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value',
              label: $t('值'),
              type: 'integer',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('蓝色科技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',
                      width: 3
                    },
                  },
                  itemStyle: {
                    show: false,
                    color: '#0c56eb',
                  },
                  progress: {
                    show: true,
                    width: 10
                  },
                  detail: {
                    offsetCenter: [0, 50],
                    textStyle: {
                      padding: [0, 0, 0, 0],
                      fontSize: 20,
                      color: '#0c56eb',
                    },
                  },
                  data: [
                    {
                      value: 58,
                    },
                  ],
                  pointer: {
                    radius: '20%',
                    width: 5,
                    itemStyle: {
                      borderWidth: 0,
                    },
                  },
                },
              ],
            },
            replaceMode: ReplaceMode.Replace,
          },
          realTimes: [
            {
              key: 'echarts.option.series.0.data.0.value',
              label: $t('值'),
              type: 'integer',
              enableMock: true,
              mock: '30-80',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
      {
        name: $t('蓝色科技3'),
        icon: 'l-lansekeji3',
        data: {
          width: 300,
          height: 300,
          disableAnchor: true,
          externElement: true,
          name: 'echarts',
          echarts: {
            option: {
              fontSize: 10,
              series: [
                {
                  name: $t('最外部进度条'),
                  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,
                      color: '#EDFFFD',
                    },
                    fontSize: 16,
                  },
                  data: [
                    {
                      value: 40,
                    },
                  ],
                },
                {
                  name: $t('刻度线'),
                  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: {
                    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: $t('值'),
              type: 'integer',
              enableMock: true,
              mock: '30-80',
              triggers: [
                {
                  name: $t('触发器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: $t('echarts配置'),
                type: 'code',
              },
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('地图'),
    show: true,
    list: [
      {
        name: $t('中国地图'),
        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: {
                show: true,
                map: 'china',
                zoom: '1.6',
                scaleLimit:{
                  min: 1.6,
                  max: 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)',
                //     shadowColor: '#0ff',
                //     shadowBlur: 10,
                //     shadowOffsetX: 0,
                //     shadowOffsetY: 0,
                //   },
                //   emphasis: {
                //     areaColor: '#1677ff80',
                //     borderColor: '#1677ff',
                //   },
                // },
                itemStyle: {
                  normal: {
                    areaColor: 'rgba(0, 15, 40, 0.5)',
                    shadowColor: '#050E33',
                    shadowBlur: 0,
                    shadowOffsetX: 0,
                    shadowOffsetY: 10,
                    borderColor: 'rgba(0, 0, 0, 0.7)',
                    borderWidth: 0.5,
                  },
                  emphasis: {
                    areaColor: '#2AB8FF',
                    borderWidth: 1,
                    color: 'green',
                    label: {
                      show: false,
                    },
                  },
                },
              },
              series: [
                {
                  type: 'map',
                  roam: false,
                  center: [105, 35],
                  layoutSize: '100%',
                  label: {
                    normal: {
                      show: false,
                      textStyle: {
                        color: '#fff',
                        fontSize: 12
                      },
                    },
                    emphasis: {
                      textStyle: {
                        color: '#fff',
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      borderColor: '#4583ff',
                      // borderColor:'rgba(26,82,231, 1)',
                      borderWidth: 1,
                      areaColor:'#0A1D66',
                      // areaColor: 'rgba(7, 52, 126, 0.3)',
                      shadowColor: '#050E3399',
                      shadowBlur: 0,
                      shadowOffsetX: 0,
                      shadowOffsetY: 1,
                    },
                    emphasis: {
                      areaColor: '#112E8C',
                      borderColor: '#96C0FF',
                      borderWidth: 1,
                      shadowColor: 'rgba(0, 255, 255, 0.7)',
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowOffsetY: 1,
                      label: {
                        show: true,
                        fontSize: 12
                      },
                    },
                  },
                  select:{
                    itemStyle:{
                      areaColor:'#1F45B3',
                      color:'#fff'
                    },
                    label:{
                      show:true,
                      color:'#fff',
                      fontSize: 12
                    },
                  },
                  zoom: 1.6,
                  scaleLimit:{
                    min: 1.6,
                    max: 1.6
                  },
                  map: 'china',
                },
                {
                  name: $t('涟漪散点'),
                  tooltip: {
                    show: false,
                  },
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  data: [{ name: $t('武汉'), value: [114.31, 30.52] }],
                  symbolSize: 8,
                  showEffectOn: 'render',
                  rippleEffect: {
                    brushType: 'stroke',
                  },
                  hoverAnimation: true,
                  label: {
                    show: true,
                    formatter: '{b}',
                    position: 'bottom',
                    fontSize: 12,
                    color: 'yellow',
                    offset: [0, 4],
                  },
                  itemStyle: {
                    normal: {
                      color: 'yellow',
                      shadowBlur: 10,
                      shadowColor: 'yellow',
                    },
                  },
                  zlevel: 1
                },
                {
                  name: $t('散点'),
                  tooltip: {
                    show: false,
                  },
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  data: [
                    { name: $t('北京'), value: [116.4551, 40.2539] },
                    { name: $t('上海'), value: [121.4648, 31.2891] },
                    { name: $t('广州'), value: [113.12244, 23.009505] },
                    { name: $t('杭州'), value: [119.5313, 29.8773] },
                    { name: $t('成都'), value: [103.9526, 30.7617] },
                  ],
                  symbolSize: 8,
                  label: {
                    show: true,
                    formatter: '{b}',
                    position: 'bottom',
                    fontSize: 12,
                    color: '#36cfc9',
                    offset: [0, -2],
                  },
                  itemStyle: {
                    normal: {
                      color: '#36cfc9',
                    },
                  },
                  zlevel: 1,
                },
                {
                  name: $t('数据'),
                  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] },
                  ],
                },
              ],
            },
          },
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
              {
                label:$t('阴影'),
                type:'switch',
                key: 'echarts.option.geo.show',
              }
            ],
          },
        },
      },
      {
        name: $t('湖北地图'),
        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',
                show: true,
                zoom: 1.2,
                scaleLimit:{
                  min: 1.2,
                  max: 1.2
                },
                label: {
                  normal: {
                    show: false,
                  },
                  emphasis: {
                    show: false,
                  },
                },
                // 地图区域的样式设置
                itemStyle: {
                  normal: {
                    areaColor: 'rgba(0, 15, 40, 0.5)',
                    shadowColor: '#050E33',
                    shadowBlur: 0,
                    shadowOffsetX: 0,
                    shadowOffsetY: 10,
                    borderColor: 'rgba(0, 0, 0, 0.7)',
                    borderWidth: 0.5,
                  },
                  emphasis: {
                    areaColor: '#2AB8FF',
                    borderWidth: 1,
                    color: 'green',
                    label: {
                      show: false,
                    },
                  },
                },
              },
              series: [
                {
                  type: 'map',
                  roam: false,
                  layoutSize: '100%',
                  label: {
                    normal: {
                      show: false,
                      textStyle: {
                        color: '#fff',
                        fontSize: 12
                      },
                    },
                    emphasis: {
                      textStyle: {
                        color: '#fff',
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      borderColor: '#4583ff',
                      // borderColor:'rgba(26,82,231, 1)',
                      borderWidth: 1,
                      areaColor:'#0A1D66',
                      // areaColor: 'rgba(7, 52, 126, 0.3)',
                      shadowColor: '#050E3399',
                      shadowBlur: 0,
                      shadowOffsetX: 0,
                      shadowOffsetY: 1,
                    },
                    emphasis: {
                      areaColor: '#112E8C',
                      borderColor: '#96C0FF',
                      borderWidth: 1,
                      shadowColor: 'rgba(0, 255, 255, 0.7)',
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowOffsetY: 1,
                      label: {
                        show: true,
                        fontSize: 12
                      },
                    },
                  },
                  select:{
                    itemStyle:{
                      areaColor:'#1F45B3',
                      color:'#fff'
                    },
                    label:{
                      show:true,
                      color:'#fff',
                      fontSize: 12
                    },
                  },
                  zoom: 1.2,
                  scaleLimit:{
                    min: 1.2,
                    max: 1.2
                  },
                  map: 'hubei',
                },
                {
                  name: $t('涟漪'),
                  tooltip: {
                    show: false,
                  },
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  data: [
                    { name: $t('武汉'), value: [114.31, 30.52] },
                    { name: $t('襄阳'), value: [112.12207, 31.933056] },
                    { name: $t('宜昌'), value: [111.309082, 30.588625] },
                    { name: $t('荆州'), 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: $t('图标'),
                  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: $t('武汉'), value: [114.31, 30.52] },
                    { name: $t('襄阳'), value: [112.12207, 31.933056] },
                    { name: $t('宜昌'), value: [111.309082, 30.588625] },
                    { name: $t('荆州'), value: [112.24292, 30.266177] },
                  ],
                },
                {
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  tooltip: { formatter: $t('统计：{b}') },
                  animation: false,
                  label: {
                    normal: {
                      fontSize: 12,
                      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: $t('武汉'),
              type: 'integer',
              enableMock: true,
              mock: '2000-3000',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
              {
                label:$t('阴影'),
                type:'switch',
                key: 'echarts.option.geo.show',
              }
            ],
          },
        },
      },
      {
        name: $t('地图·流量'),
        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',
                show: true,
                zoom: 1.6,
                scaleLimit:{
                  min: 1.6,
                  max: 1.6
                },
                center: [105, 35],
                label: {
                  fontSize: 12,
                  normal: {
                    show: true,
                    fontSize: 10,
                    textStyle: {
                      color: '#fff',
                    },
                  },
                  emphasis: {
                    textStyle: {
                      color: '#fff',
                    },
                  },
                },
                // 地图区域的样式设置
                itemStyle: {
                  normal: {
                    areaColor: 'rgba(0, 15, 40, 0.5)',
                    shadowColor: '#050E33',
                    shadowBlur: 0,
                    shadowOffsetX: 0,
                    shadowOffsetY: 10,
                    borderColor: 'rgba(0, 0, 0, 0.7)',
                    borderWidth: 0.5,
                  },
                  emphasis: {
                    areaColor: '#2AB8FF',
                    borderWidth: 1,
                    color: 'green',
                    label: {
                      show: false,
                    },
                  },
                },
              },
              series: [
                {
                  type: 'map',
                  roam: false,
                  center: [105, 35],
                  layoutSize: '100%',
                  label: {
                    normal: {
                      show: false,
                      textStyle: {
                        color: '#fff',
                        fontSize: 12
                      },
                    },
                    emphasis: {
                      textStyle: {
                        color: '#fff',
                      },
                    },
                  },
                  itemStyle: {
                    normal: {
                      borderColor: '#4583ff',
                      // borderColor:'rgba(26,82,231, 1)',
                      borderWidth: 1,
                      areaColor:'#0A1D66',
                      // areaColor: 'rgba(7, 52, 126, 0.3)',
                      shadowColor: '#050E3399',
                      shadowBlur: 0,
                      shadowOffsetX: 0,
                      shadowOffsetY: 1,
                    },
                    emphasis: {
                      areaColor: '#112E8C',
                      borderColor: '#96C0FF',
                      borderWidth: 1,
                      shadowColor: 'rgba(0, 255, 255, 0.7)',
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowOffsetY: 1,
                      label: {
                        show: true,
                        fontSize: 12
                      },
                    },
                  },
                  select:{
                    itemStyle:{
                      areaColor:'#1F45B3',
                      color:'#fff'
                    },
                    label:{
                      show:true,
                      color:'#fff',
                      fontSize: 12
                    },
                  },
                  zoom: 1.6,
                  scaleLimit:{
                    min: 1.6,
                    max: 1.6
                  },
                  map: 'china',
                },
                {
                  name: $t('涟漪散点'),
                  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: $t('武汉'),
              type: 'integer',
              // enableMock: true,
              // mock: '100-150',
            },
          ],
          props: {
            custom: [
              {
                key: 'echarts',
                label: $t('echarts配置'),
                type: 'code',
              },
              {
                label:$t('阴影'),
                type:'switch',
                key: 'echarts.option.geo.show',
              }
            ],
          },
        },
      },
    ],
  },
  {
    name: $t('乐吾乐Charts'),
    show: true,
    list: [
      {
        name: $t('折线图'),
        icon: 'l-line-chart',
        data: {
          name: 'lineChart',
          width: 400,
          disableAnchor: true,
          height: 200,
          chartsColor: [
            '#1890ff',
            '#4583FF',
            '#37B3CC'
          ],
          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],
          ],
          props: {
            text:true,
            custom: [
              {
                key: 'chartsColor',
                label: $t('调色盘色值列表'),
                type: 'code',
              },
              {
                key: 'xAxisData',
                label: $t('横坐标轴数据'),
                type: 'code',
              },
              {
                key: 'data',
                label: $t('纵坐标数据'),
                type: 'code',
              },
              {
                key: 'smooth',
                label: $t('平滑线'),
                type: 'bool',
              }
            ]
          }
        },
      },
      {
        name: $t('柱状图'),
        icon: 'l-bar-chart',
        data: {
          name: 'histogram',
          x: 600,
          y: 100,
          width: 400,
          height: 200,
          disableAnchor: true,
          chartsColor: [
            '#1890ff',
            '#4583FF',
            '#37B3CC'
          ],
          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],
          ],
          props: {
            text:true,
            custom: [
              {
                key: 'chartsColor',
                label: $t('调色盘色值列表'),
                type: 'code',
              },
              {
                key: 'xAxisData',
                label: $t('横坐标轴数据'),
                type: 'code',
              },
              {
                key: 'data',
                label: $t('纵坐标数据'),
                type: 'code',
              }
            ]
          }
        },
      },
      {
        name: $t('饼图'),
        icon: 'l-pie-chart',
        data: {
          name: 'pieChart',
          x: 100,
          y: 300,
          width: 400,
          height: 200,
          disableAnchor: true,
          chartsColor: [
            '#1890ff',
            '#4583FF',
            '#37B3CC'
          ],
          tickLabel:{
            show:true,
            fontSize:16
          },
          data: [
            [
              { value: 1548, name: 'Search' },
              { value: 775, name: 'Direct' },
              { value: 679, name: 'Market' },
            ],
          ],
          chartsRadius: [
            ['60%', '70%'],
          ],
          props: {
            text:true,
            custom: [
              {
                key: 'chartsColor',
                label: $t('调色盘色值列表'),
                type: 'code',
              },
              {
                key: 'chartsRadius',
                label: $t('半径范围'),
                type: 'code',
              },
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              }
            ]
          }
        },
      },
      {
        name: $t('仪表盘'),
        icon: 'l-dashboard-chart',
        data: {
          name: 'gauge',
          x: 600,
          y: 300,
          width: 400,
          height: 400,
          disableAnchor: true,
          value: 90,
          fontSize:16,
          unit: 'm/s',
          axisLine: [
            [0.3, '#1890ff'],
            [0.7, '#4583FF'],
            [1, '#37B3CC'],
          ],
          tickLabel:{
            fontSize:20,
          },
          titleLabel: {
            fontSize:20,
          },
          animateCycle: 1,
          keepAnimateState: 0,
          props: {
            text:true,
            custom: [
              {
                key: 'startAngle',
                label: $t('起始角'),
                type: 'number',
              },
              {
                key: 'endAngle',
                label: $t('结束角'),
                type: 'number',
              },
              {
                key: 'max',
                label: $t('最大值'),
                type: 'number',
              },
              {
                key: 'min',
                label: $t('最小值'),
                type: 'number',
              },
              {
                key: 'unit',
                label: $t('单位'),
                type: 'string',
              }
            ]
          }
        },
      },
      {
        name: $t('时钟'),
        icon: 'l-07',
        data: {
          name: 'gauge',
          x: 600,
          y: 300,
          width: 400,
          height: 400,
          tickLabel:{
            fontSize:30
          },
          titleLabel:{
            fontSize: 16,
            color:'#13a9cb'
          },
          disableAnchor: true,
          isClock: true,
          startAngle: 90,
          endAngle: -270,
          min: 0,
          max: 12,
          splitNumber: 12,
          background: '#3A3A3A',
          color: '#1890ff',
        },
      },
      {
        name: $t('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: $t('大屏') },
            { value: 135, name: $t('物联网平台') },
            { value: 1548, name: $t('图形库') },
          ],
          props: {
            text:true,
            custom: [
              {
                key: 'data',
                label: $t('数据'),
                type: 'code',
              },
            ]
          },
          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: $t('大屏'),
              type: 'float',
              enableMock: true,
              mock: '10-100',
            },
            {
              key: 'data.3.value',
              label: $t('物联网平台'),
              type: 'float',
              enableMock: true,
              mock: '10-100',
            },
            {
              key: 'data.4.value',
              label: $t('图形库'),
              type: 'float',
              enableMock: true,
              mock: '10-100',
            },
          ],
        },
      },
    ],
  },
];