h5-colexiu/src/teacher/income-consus/echarts.ts

import { position } from 'html2canvas/dist/types/css/property-descriptors/position'

export const lineChartOption = {
  legend: { show: false },
  emphasis: { lineStyle: { width: 2 } },
  xAxis: {
    boundaryGap: false,
    data: [
      '01月',
      '02月',
      '03月',
      '04月',
      '05月',
      '06月',
      '07月',
      '08月',
      '09月',
      '10月',
      '11月',
      '12月'
    ],
    type: 'category',
    axisLine: { lineStyle: { color: '#8C8C8C' } }
  },
  color: [
    '#5B8FF9',
    '#2DC7AA',
    '#91DD1C',
    '#FFA92C',
    '#BE7E2E',
    '#1C96DD',
    '#D22CFF',
    '#FF3C3C',
    '#1AEE3E',
    '#00c9ff',
    '#7c47ff'
  ],
  series: [
    {
      lineStyle: { width: 1 },
      data: [
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00'
      ],
      symbol: 'circle',
      name: '陪练课',
      type: 'line',
      emphasis: { lineStyle: { width: 1 } }
    },
    {
      lineStyle: { width: 1 },
      data: [
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00'
      ],
      symbol: 'circle',
      name: '直播课',
      type: 'line',
      emphasis: { lineStyle: { width: 1 } }
    },
    {
      lineStyle: { width: 1 },
      data: [
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00'
      ],
      symbol: 'circle',
      name: '视频课',
      type: 'line',
      emphasis: { lineStyle: { width: 1 } }
    },
    {
      lineStyle: { width: 1 },
      data: [
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00'
      ],
      symbol: 'circle',
      name: '乐谱',
      type: 'line',
      emphasis: { lineStyle: { width: 1 } }
    },
    {
      lineStyle: { width: 1 },
      data: [
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00'
      ],
      symbol: 'circle',
      name: '小酷Ai推广',
      type: 'line',
      emphasis: { lineStyle: { width: 1 } }
    },
    {
      lineStyle: { width: 1 },
      data: [
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00'
      ],
      symbol: 'circle',
      name: '直播课推荐',
      type: 'line',
      emphasis: { lineStyle: { width: 1 } }
    },
    {
      lineStyle: { width: 1 },
      data: [
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00'
      ],
      symbol: 'circle',
      name: '视频课推荐',
      type: 'line',
      emphasis: { lineStyle: { width: 1 } }
    },
    {
      lineStyle: { width: 1 },
      data: [
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00'
      ],
      symbol: 'circle',
      name: '商品推荐',
      type: 'line',
      emphasis: { lineStyle: { width: 1 } }
    },
    {
      lineStyle: { width: 1 },
      data: [
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00'
      ],
      symbol: 'circle',
      name: '乐谱推荐',
      type: 'line',
      emphasis: { lineStyle: { width: 1 } }
    },
    {
      lineStyle: { width: 1 },
      data: [
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00'
      ],
      symbol: 'circle',
      name: '专辑推荐',
      type: 'line',
      emphasis: { lineStyle: { width: 1 } }
    },
    {
      lineStyle: { width: 1 },
      data: [
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00',
        '0.00'
      ],
      symbol: 'circle',
      name: '活动报名',
      type: 'line',
      emphasis: { lineStyle: { width: 1 } }
    }
  ],
  title: { show: false },
  grid: {
    bottom: '3%',
    containLabel: true,
    left: '3%',
    right: '5%',
    top: '7%'
  },
  tooltip: {
    trigger: 'axis',
    confine: true
    // position: function (point, params, dom, rect, size) {
    //   // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
    //   // 提示框位置
    //   var x = 0 // x坐标位置
    //   var y = 0 // y坐标位置

    //   // 当前鼠标位置
    //   var pointX = point[0]
    //   var pointY = point[1]

    //   // 外层div大小
    //   // var viewWidth = size.viewSize[0];
    //   // var viewHeight = size.viewSize[1];

    //   // 提示框大小
    //   var boxWidth = size.contentSize[0]
    //   var boxHeight = size.contentSize[1]

    //   // boxWidth > pointX 说明鼠标左边放不下提示框 --- 情况
    //   if (boxWidth > pointX) {
    //     x = 5 // 自己定个x坐标值，以防出屏
    //     y -= 15 // 防止点被覆盖住，可根据情况自行调节
    //   } else {
    //     // 左边放的下
    //     x = pointX - boxWidth - 15
    //   }

    //   // boxHeight > pointY 说明鼠标上边放不下提示框 --- 情况
    //   if (boxHeight + 20 > pointY) {
    //     y = pointY + 15
    //   } else if (boxHeight > pointY) {
    //     y = 5
    //   } else {
    //     // 上边放得下
    //     y += pointY - boxHeight
    //   }
    //   //return [x, y]
    //   return [x, '20%'] //这里采用固定y轴 x轴随鼠标位置变化
    //   // return [point[0], '10%']
    // }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      axisLine: { lineStyle: { color: '#8C8C8C' } },
      lineStyle: { color: ['#E2E2E2'] }
    }
  },
  dataZoom: [{ type: 'inside', throttle: 100 }],
  toolbox: { feature: { saveAsImage: { show: false } } }
}

export const pieChartOption = {
  tooltip: {
    position: ['30%', '30%'],
    trigger: 'item',
    padding: 3,
    textStyle: { fontSize: 12 },
    borderWidth: 0,
    formatter: '{b} : {c} ({d}%)'
  },
  series: [
    {
      avoidLabelOverlap: false,
      label: { show: false },
      data: [
        { name: '陪练课', value: '0.00' },
        { name: '直播课', value: '0.00' },
        { name: '视频课', value: '0.00' },
        { name: '乐谱', value: '0.00' },
        { name: '小酷Ai推广', value: '0.00' },
        { name: '直播课推荐', value: '0.00' },
        { name: '视频课推荐', value: '0.00' },
        { name: '商品推荐', value: '0.00' },
        { name: '乐谱推荐', value: '0.00' },
        { name: '专辑推荐', value: '0.00' },
        { name: '活动报名', value: '0.00' }
      ],
      type: 'pie',
      radius: ['50%', '80%']
    }
  ],
  grid: {
    bottom: '0%',
    containLabel: true,
    left: '0%',
    right: '0%',
    top: '0%'
  },
  toolbox: { feature: { saveAsImage: { show: false } } },
  color: [
    '#5B8FF9',
    '#2DC7AA',
    '#91DD1C',
    '#FFA92C',
    '#BE7E2E',
    '#1C96DD',
    '#D22CFF',
    '#FF3C3C',
    '#1AEE3E',
    '#00c9ff',
    '#7c47ff'
  ]
}