import * as echarts from '../ec-canvas/echarts'
import { mergeOptions } from '../ec-canvas/defaultOption'

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      onInit: initChart
    },
    barEc: {
      onInit: initBarChart
    },
    pieEc : {
      onInit: initSexPieChart
    },
    areaPieEc: {
      onInit: initAreaPieChart
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '新老客户统计'
    },
    series: [
      {
        data: [[0, 1000], [3, 500], [6, 750], [9, 1400], [12, 1250], [15, 1600], [18, 1800]],
        type: 'line',
        smooth: true,
        name: '新客户',
        areaStyle: {
          opacity: 0.1
        },
        symbolSize: 0
      },
      {
        data: [[0, 1250], [3, 600], [6, 800], [9, 1500], [12, 1400], [15, 1750], [18, 2000]],
        type: 'line',
        smooth: true,
        name: '老客户',
        areaStyle: {
          opacity: 0.1
        },
        symbolSize: 0
      },
    ]
  };

  chart.setOption(mergeOptions(option));
  return chart;
}

function initBarChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '客户来源统计'
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        align: 'center'
      }
    },
    yAxis: {
      type: 'category',
      data: ['网页', 'APP', '小程序', '其它'],
      axisLabel: {
        margin:  0
      }
    },
    series: [
      {
        type: 'bar',
        data: [{
          value: 2,
          itemStyle: {
            
          }
        }, 4.9, 7.0, 11],
        barGap: 0,
        barWidth: 10,
        itemStyle: {
          barBorderRadius:[0, 10, 10, 0],
        }
      }
    ]
  };
  chart.setOption(mergeOptions(option));
  return chart;
}

function initSexPieChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '客户性别统计'
    },
    xAxis: {
      show: false
    },
    yAxis: {
      show: false
    },
    color: ['#17D2D2','#FAD43B','#4DAEFF','#F69758','#738EFE','#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
    legend: {
      left: 'center',
      bottom: 0,
      top: null,
      data: ['男性：50%', '女性：50%', '1性：50%']
    },
    series: [
      {
        data: [[0, 1000], [3, 500], [6, 750], [9, 1400], [12, 1250], [15, 1600], [18, 1800]],
        type: 'pie',
        radius: ['30%', '50%'],
        data: [
          { value: 100, name: '男性：50%' },
          { value: 100, name: '女性：50%' },
          { value: 100, name: '1性：50%' },
        ],
        
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        }
      }
    ]
  };

  chart.setOption(mergeOptions(option));
  return chart;
}

function initAreaPieChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '客户区域统计'
    },
    xAxis: {
      show: false
    },
    yAxis: {
      show: false
    },
    color: ['#17D2D2','#FAD43B','#4DAEFF','#F69758','#738EFE','#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
    legend: {
      left: 'center',
      bottom: 0,
      top: null,
      data: ['男性：50%', '女性：50%', '1性：50%']
    },
    series: [
      {
        data: [[0, 1000], [3, 500], [6, 750], [9, 1400], [12, 1250], [15, 1600], [18, 1800]],
        type: 'pie',
        radius: ['30%', '50%'],
        data: [
          { value: 100, name: '男性：50%' },
          { value: 100, name: '女性：50%' },
          { value: 100, name: '1性：50%' },
        ],
        
        label: {
          show: false,
          position: 'center'
        },
        labelLine: {
          show: false
        }
      }
    ]
  };

  chart.setOption(mergeOptions(option));
  return chart;
}