/*
 * uCharts®
 * 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
 * Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
 * Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
 * 复制使用请保留本段注释，感谢支持开源！
 *
 * uCharts®官方网站
 * https://www.uCharts.cn
 *
 * 开源地址:
 * https://gitee.com/uCharts/uCharts
 *
 * uni-app插件市场地址：
 * http://ext.dcloud.net.cn/plugin?id=271
 *
 */

// 通用配置项

// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
const color = [
  '#1890FF',
  '#91CB74',
  '#FAC858',
  '#EE6666',
  '#73C0DE',
  '#3CA272',
  '#FC8452',
  '#9A60B4',
  '#ea7ccc',
]

const cfe = {
  // demotype为自定义图表类型
  type: [
    'pie',
    'ring',
    'rose',
    'funnel',
    'line',
    'column',
    'area',
    'radar',
    'gauge',
    'candle',
    'demotype',
  ],
  // 增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
  categories: ['line', 'column', 'area', 'radar', 'gauge', 'candle', 'demotype'],
  // instance为实例变量承载属性，option为eopts承载属性，不要删除
  instance: {},
  option: {},
  // 下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
  formatter: {
    tooltipDemo1(res) {
      let result = ''
      for (const i in res) {
        if (i == 0) {
          result += `${res[i].axisValueLabel}年销售额`
        }
        let value = '--'
        if (res[i].data !== null) {
          value = res[i].data
        }
        // #ifdef H5
        result += `\n${res[i].seriesName}：${value} 万元`
        // #endif

        // #ifdef APP-PLUS
        result += `<br/>${res[i].marker}${res[i].seriesName}：${value} 万元`
        // #endif
      }
      return result
    },
    legendFormat(name) {
      return `自定义图例+${name}`
    },
    yAxisFormatDemo(value, index) {
      return `${value}元`
    },
    seriesFormatDemo(res) {
      return `${res.name}年${res.value}元`
    },
  },
  // 这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
  demotype: {
    color,
    // 在这里填写echarts的option即可
  },
  // 下面是自定义配置，请添加项目所需的通用配置
  column: {
    color,
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: 30,
      bottom: 50,
      right: 15,
      left: 40,
    },
    legend: {
      bottom: 'left',
    },
    toolbox: {
      show: false,
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#666666',
      },
      axisLine: {
        lineStyle: {
          color: '#CCCCCC',
        },
      },
      boundaryGap: true,
      data: [],
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#666666',
      },
      axisLine: {
        lineStyle: {
          color: '#CCCCCC',
        },
      },
    },
    seriesTemplate: {
      name: '',
      type: 'bar',
      data: [],
      barwidth: 20,
      label: {
        show: true,
        color: '#666666',
        position: 'top',
      },
    },
  },
  line: {
    color,
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: 30,
      bottom: 50,
      right: 15,
      left: 40,
    },
    legend: {
      bottom: 'left',
    },
    toolbox: {
      show: false,
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#666666',
      },
      axisLine: {
        lineStyle: {
          color: '#CCCCCC',
        },
      },
      boundaryGap: true,
      data: [],
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#666666',
      },
      axisLine: {
        lineStyle: {
          color: '#CCCCCC',
        },
      },
    },
    seriesTemplate: {
      name: '',
      type: 'line',
      data: [],
      barwidth: 20,
      label: {
        show: true,
        color: '#666666',
        position: 'top',
      },
    },
  },
  area: {
    color,
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'axis',
    },
    grid: {
      top: 30,
      bottom: 50,
      right: 15,
      left: 40,
    },
    legend: {
      bottom: 'left',
    },
    toolbox: {
      show: false,
    },
    xAxis: {
      type: 'category',
      axisLabel: {
        color: '#666666',
      },
      axisLine: {
        lineStyle: {
          color: '#CCCCCC',
        },
      },
      boundaryGap: true,
      data: [],
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: '#666666',
      },
      axisLine: {
        lineStyle: {
          color: '#CCCCCC',
        },
      },
    },
    seriesTemplate: {
      name: '',
      type: 'line',
      data: [],
      areaStyle: {},
      label: {
        show: true,
        color: '#666666',
        position: 'top',
      },
    },
  },
  pie: {
    color,
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'item',
    },
    grid: {
      top: 40,
      bottom: 30,
      right: 15,
      left: 15,
    },
    legend: {
      bottom: 'left',
    },
    seriesTemplate: {
      name: '',
      type: 'pie',
      data: [],
      radius: '50%',
      label: {
        show: true,
        color: '#666666',
        position: 'top',
      },
    },
  },
  ring: {
    color,
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'item',
    },
    grid: {
      top: 40,
      bottom: 30,
      right: 15,
      left: 15,
    },
    legend: {
      bottom: 'left',
    },
    seriesTemplate: {
      name: '',
      type: 'pie',
      data: [],
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        color: '#666666',
        position: 'top',
      },
      labelLine: {
        show: true,
      },
    },
  },
  rose: {
    color,
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: 'bottom',
    },
    seriesTemplate: {
      name: '',
      type: 'pie',
      data: [],
      radius: '55%',
      center: ['50%', '50%'],
      roseType: 'area',
    },
  },
  funnel: {
    color,
    title: {
      text: '',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c}%',
    },
    legend: {
      top: 'bottom',
    },
    seriesTemplate: {
      name: '',
      type: 'funnel',
      left: '10%',
      top: 60,
      bottom: 60,
      width: '80%',
      min: 0,
      max: 100,
      minSize: '0%',
      maxSize: '100%',
      sort: 'descending',
      gap: 2,
      label: {
        show: true,
        position: 'inside',
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: 'solid',
        },
      },
      itemStyle: {
        bordercolor: '#fff',
        borderwidth: 1,
      },
      emphasis: {
        label: {
          fontSize: 20,
        },
      },
      data: [],
    },
  },
  gauge: {
    color,
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%',
    },
    seriesTemplate: {
      name: '业务指标',
      type: 'gauge',
      detail: { formatter: '{value}%' },
      data: [{ value: 50, name: '完成率' }],
    },
  },
  candle: {
    xAxis: {
      data: [],
    },
    yAxis: {},
    color,
    title: {
      text: '',
    },
    dataZoom: [
      {
        type: 'inside',
        xAxisIndex: [0, 1],
        start: 10,
        end: 100,
      },
      {
        show: true,
        xAxisIndex: [0, 1],
        type: 'slider',
        bottom: 10,
        start: 10,
        end: 100,
      },
    ],
    seriesTemplate: {
      name: '',
      type: 'k',
      data: [],
    },
  },
}

export default cfe