BaseFrame-Vue/utils/echartOption.ts

import * as echarts from 'echarts';

export function homePieOption() {
  return {
    legend: {
      show: false
    },
    tooltip: {
      trigger: 'item',
      position: 'right'
    },
    grid: { left: '0%' },
    graphic: [
      {
        //环形图中间添加文字
        type: 'text', //通过不同top值可以设置上下显示
        left: '35%',
        top: '45%',
        style: {
          text: `总数`,
          textAlign: 'center',
          fontSize: 20,
          lineHeight: 20
        }
      }
    ],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['55%', '75%'],
        center: ['45%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: 'rgb(232, 239, 255)',
          borderWidth: 2
        },

        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 10,
            fontWeight: 'bold'
          }
        },
        data: [
          { value: 1048, name: '本平台发布服务' },
          { value: 735, name: '第三方注册服务' },
          { value: 580, name: '第三方发布服务' }
        ]
      },
      {
        data: [{ value: 10, name: '' }],
        type: 'pie',
        radius: ['75%', '90%'],
        center: ['45%', '50%'],
        avoidLabelOverlap: false,
        tooltip: {
          show: false
        },
        label: {
          show: false
        },
        itemStyle: {
          color: 'rgb(232, 239, 255)'
        }
      }
    ]
  };
}

export function homeLineOption() {
  return {
    legend: {
      orient: 'vertical',
      top: 0,
      right: 0,
      icon: 'roundRect',
      itemWidth: 15,
      itemHeight: 10,
      textStyle: {
        fontSize: 10
      }
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: ['1', '2', '3', '4', '5', '6', '7']
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      }
    },
    grid: {
      left: 30,
      top: 60,
      right: 0,
      bottom: 30
    },
    series: [
      {
        data: [62, 93, 40, 53, 96, 73, 22],
        type: 'line',
        smooth: true,
        symbolSize: 0,
        name: '服务新增统计',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(45,229,168,0.8)'
            },
            {
              offset: 1,
              color: 'rgba(45,229,168,0.3)'
            }
          ])
        }
      },
      {
        data: [72, 98, 30, 67, 89, 60, 32],
        type: 'line',
        smooth: true,
        symbolSize: 0,
        name: '服务共享统计',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(34,154,253,0.8)'
            },
            {
              offset: 1,
              color: 'rgba(34,154,253,0.3)'
            }
          ])
        }
      }
    ]
  };
}

export function homeCategoryOption() {
  return {
    grid: {
      left: 30,
      top: 30,
      bottom: 25,
      right: 10
    },
    xAxis: {
      axisTick: {
        show: false
      },

      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      type: 'category',
      data: ['基本功能', '定位工具', '地图洒点', '地图查询', '特效工具', '地图事件', '地图应用']
    },
    yAxis: {
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed'
        }
      },
      type: 'value'
    },
    series: [
      {
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar',
        barWidth: 10,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#349afe'
            },
            {
              offset: 1,
              color: '#e7f3ff'
            }
          ])
        }
      }
    ]
  };
}

export function inspectPieOption() {
  return {
    legend: {
      show: false
    },
    tooltip: {
      trigger: 'item',
      position: 'right'
    },
    grid: { left: '0%' },
    graphic: [
      {
        //环形图中间添加文字
        type: 'text', //通过不同top值可以设置上下显示
        left: '31%',
        top: '35%',
        style: {
          text: `总数据`,
          textAlign: 'center',
          fontSize: 14,
          lineHeight: 20
        }
      },
      {
        //环形图中间添加文字
        type: 'text', //通过不同top值可以设置上下显示
        left: '36%',
        top: '50%',
        style: {
          text: `260`,
          textAlign: 'center',
          fontSize: 18,
          lineHeight: 20
        }
      }
    ],
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['55%', '75%'],
        center: ['45%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: 'rgb(232, 239, 255)',
          borderWidth: 2
        },

        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: false,
            fontSize: 10,
            fontWeight: 'bold'
          }
        },
        data: [
          { value: 1048, name: '本平台发布服务' },
          { value: 735, name: '第三方注册服务' },
          { value: 580, name: '第三方发布服务' }
        ]
      },
      {
        data: [{ value: 10, name: '' }],
        type: 'pie',
        radius: ['75%', '90%'],
        center: ['45%', '50%'],
        avoidLabelOverlap: false,
        tooltip: {
          show: false
        },
        label: {
          show: false
        },
        itemStyle: {
          color: 'rgb(232, 239, 255)'
        }
      }
    ]
  };
}