h5-colexiu/src/tenant/exercise-record/echats.ts

export const lineChartOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        width: 2,
        color: '#FFA3C2'
      }
    }
  },
  legend: {
    show: false,
    selected: {
      //在这里设置默认展示就ok了
      训练时长: true,
      使用次数: true
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: true,
    axisLabel: {
      show: true,
      interval: 0
    },
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    // splitLine: {
    //   show: true,
    //   lineStyle: {
    //     width: 2,
    //     type: 'solid',
    //     color: 'rgba(226,226,226,0.5)'
    //   }
    // }
    // axisTick: {
    //   show: false
    // }
  },
  yAxis: [
    {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      },
      axisTick: {
        show: false
      },
      splitArea: {
        show: false,
        areaStyle: {
          color: ['rgba(255,255,255,0.2)']
        }
      },
      minInterval: 1,
      splitNumber: 5
    }
  ],
  grid: {
    left: '1%',
    right: '1%',
    top: '5%',
    bottom: 0,
    containLabel: true
  },
  series: [
    {
      // smooth: true,
      data: ['0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
      symbolSize: 10,
      type: 'line',
      name: '训练时长',
      symbol: 'circle',
      smooth: true,
      itemStyle: {
        color: '#FF7AA7',
        borderColor: '#fff',
        borderWidth: 3
      },
      lineStyle: {
        width: 3 //设置线条粗细
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(255, 243, 246, 1)'
              // 0% 处的颜色
            },
            {
              offset: 1,
              // 100% 处的颜色
              color: 'rgba(255, 246, 248, 0)'
            }
          ]
        }
      },
      emphasis: {
        disabled: true
      }
    },
    {
      data: ['0.00', '0.00', '0.00', '0.00', '0.00', '0.00', '0.00'],
      type: 'line',
      name: '使用次数',
      symbolSize: 10,
      symbol: 'circle',
      smooth: true,
      itemStyle: {
        color: '#3583FA',
        borderColor: '#fff',
        borderWidth: 3
      },
      lineStyle: {
        width: 2 //设置线条粗细
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgba(212, 231, 255, 1)'
              // 0% 处的颜色
            },
            {
              offset: 1,
              color: 'rgba(221, 235, 254, 0)' // 100% 处的颜色
            }
          ]
        }
      },
      emphasis: {
        disabled: true
      }
    }
  ],
  formatter: (item: any) => {
    if (Array.isArray(item)) {
      // console.log(item, 'formatter')
      return [
        item[0].axisValueLabel,
        ...item.map(
          (d: any, index: number) =>
            `<br/>${
              d.marker
            }<span style="margin-top:10px;margin-left:5px;font-size: 13px;font-weight: 500;
                  color: #333333;
                  line-height: 18px;">${d.seriesName}: ${d.value}${
              index === 0 ? '分钟' : '次'
            } </span>`
        )
      ].join('')
    } else {
      return item
    }
  }
  // dataZoom: [
  //   {
  //     type: 'slider',
  //     start: 5,
  //     end: 100,
  //     filterMode: 'empty'
  //   }
  // ]
}

// 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'
  ]
}