import * as echarts from 'echarts';

let angle = 0;//角度，用来做简单的动画效果的
let value = 78; //图上角度数据
let result = [
  { name: '制造业', value: 5713, itemStyle: { color: '#FF7734' } },
  { name: '信息传输、软件和信息技术服务业', value: 3022, itemStyle: { color: '#FFC700' } },
  { name: '科学研究和技术服务业', value: 2647, itemStyle: { color: '#34FFE7' } },
  { name: '金融业', value: 2291 },
  { name: '批发和零售业', value: 1946 },
  { name: '交通运输、仓储和邮政业', value: 1812 },
  { name: '教育', value: 1756 },
  { name: '建筑业', value: 1712 },
  { name: '房地产业', value: 1666 },
  { name: '水利、环境和公共设施管理业', value: 1621 }
]

const optins = {

  /******首页***********/
  // 用户图表
  userChartOption: {
    color: [
      new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 1, color: 'transparent' },
        { offset: 0, color: '#0081C3' },
      ])
      , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 1, color: 'transparent' },
        { offset: 0, color: '#3E54BF' },
      ]), new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 1, color: 'transparent' },
        { offset: 0, color: '#4DBFD9' },
      ]),
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
    },
    // color: transparent;

    legend: {
      textStyle: {
        color: "white"
      }


    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['11.01', '11-02', '11-03', '11-04', '11-05',]
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',//背景色为虚线,
            color: '#256980'
          }
        }

      },

    ],
    series: [
      {
        name: '新增用户数量',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390, 330, 320],
        itemStyle: {
          borderWidth: 1,
          borderColor: "#384FB4",
        },

        backgroundStyle: {
          color: ['red']
        }
      },
      {
        name: '访问用户数量',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210],
        itemStyle: {
          borderWidth: 1,
          borderColor: "#3E54BF",
        },
      },
      {
        name: '累计用户数量',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310],
        itemStyle: {
          borderWidth: 1,
          borderColor: "#4EC1DB",
        },
      },

    ]
  },
  // 地方店铺数量统计
  storeNum: {
    backgroundColor: "#061740",
    title: {
      text: '{a|' + 70 + '}{c|%}',
      x: 'center',
      y: 'center',
      textStyle: {
        rich: {
          a: {
            fontSize: 10,
            color: '#ffffff',
            fontWeight: 'bold'
          },
          c: {
            fontSize: 10,
            color: '#ffffff',
            fontWeight: 'normal'
          }
        }
      }
    },
    series: [
      //内环
      {
        name: "",
        type: 'custom',
        coordinateSystem: "none",
        renderItem: function (params, api) {
          return {
            type: 'arc',
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: Math.min(api.getWidth(), api.getHeight()) / 2.3 * 0.65,
              startAngle: (0 + -angle) * Math.PI / 180,
              endAngle: (360 + -angle) * Math.PI / 180
            },
            style: {
              stroke: "#0CD3DB",
              fill: "transparent",
              lineWidth: 0.5
            },
            silent: true
          };
        },
        data: [0]
      },
      //外环
      {
        name: '',
        type: 'pie',
        radius: ['85%', '70%'],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            position: "center",
          }
        },
        data: [
          {
            value: 60,
            name: "",
            itemStyle: {
              normal: {
                //外环发光
                borderWidth: 0.5,
                shadowBlur: 20,
                borderColor: '#4bf3f9',
                shadowColor: '#9bfeff',
                color: { // 圆环的颜色
                  colorStops: [{
                    offset: 0,
                    color: '#4bf3f9', // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: '#4bf3f9', // 100% 处的颜色
                  }]
                },
              }
            }
          },
          {
            value: 100 - 70,
            name: "",
            label: {
              normal: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: "#173164"
              }
            }
          }
        ]
      },
    ]
  },
  // 成交用户统计信息表

  transactionUsers: {
    color: ['#015989', '#583936', '#416979'],
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['访客人数', '下单人数', '支付人数'],
      textStyle: {
        color: "white"
      }
      //   data: ['访客人数','下单人数','支付人数']

    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {}
    //   }
    // },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',//背景色为虚线,
            color: '#256980'
          }
        }
      }
    ],
    series: [
      {
        name: '访客人数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#18394A'
            },
            {
              offset: 1,
              color: '#2885A4'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [140, 232, 101, 264, 90, 340, 250]
      },
      {
        name: '下单人数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#004367'
            },
            {
              offset: 1,
              color: '#005886'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 282, 111, 234, 220, 340, 310]
      },
      {
        name: '支付人数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#5A3A37'
            },
            {
              offset: 1,
              color: '#355969'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 132, 201, 334, 190, 130, 220]
      },


    ]
  },

  /*******townDetail**********/
  // 订单金额
  orderAmount: {
    color: [
      new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 1, color: '#57D3ED' },
        { offset: 0, color: 'transparent' },
      ])
      , new echarts.graphic.LinearGradient(0, 1, 0, 0, [
        { offset: 1, color: '#4156C2' },
        { offset: 0, color: 'transparent' },
      ])
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    // color: transparent;

    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['0-4时', '4-8时', '8-12时', '12-16时', '16-20时', '20-0时']
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',//背景色为虚线,
            color: '#256980'
          }
        }

      },

    ],
    series: [
      {
        name: '昨日订单额',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390, 330, 322, 222],
        // itemStyle: {
        //     borderWidth: 1,
        //     borderColor: "#384FB4",
        // },

        backgroundStyle: {
          color: ['red']
        }
      },
      {
        name: '今日订单额',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210, 366],

      },


    ]





  },
  // 成交用户数据
  transactionUsersTown: {
    color: ['#015989', '#583936', '#416979'],
    title: {
      text: ''
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      data: ['访客人数', '下单人数', '支付人数',]
      //   data: ['访客人数','下单人数','支付人数']

    },
    // toolbox: {
    //   feature: {
    //     saveAsImage: {}
    //   }
    // },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      }
    ],
    yAxis: [
      {
        type: 'value',
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',//背景色为虚线,
            color: '#256980'
          }
        }
      }
    ],
    series: [
      {
        name: '访客人数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#18394A'
            },
            {
              offset: 1,
              color: '#2885A4'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [140, 232, 101, 264, 90, 340, 250]
      },
      {
        name: '下单人数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#2752A6'
            },
            {
              offset: 1,
              color: '#005886'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [120, 282, 111, 234, 220, 340, 310]
      },
      {
        name: '支付人数',
        type: 'line',
        stack: 'Total',
        smooth: true,
        lineStyle: {
          width: 0
        },
        showSymbol: false,
        areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: '#005685'
            },
            {
              offset: 1,
              color: '#355969'
            }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        data: [320, 132, 201, 334, 190, 130, 220]
      },


    ]
  },
  // 订单数据
  orderData: {

    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      boundaryGap: [0, 0.01],
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',//背景色为虚线,
          color: '#256980'
        }
      }
    },
    yAxis: {
      type: 'category',
      data: ['当日订单数', '当月订单数'],

    },
    series: [
      {
        barWidth: 15,
        barGap: '1000%',/*多个并排柱子设置柱子之间的间距*/
        barCategoryGap: '100%',/*多个并排柱子设置柱子之间的间距*/
        data: [120, 200],
        type: 'bar',
        itemStyle: {
          normal: {
            color: function (params) {
              var colorList = [new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 1, color: '#0298E5' },
                { offset: 0, color: 'transparent' },
              ]), new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 1, color: '#4358C8' },
                { offset: 0, color: 'transparent' },
              ])];
              return colorList[params.dataIndex]
            },
            borderColor: ['blue']

          },
          borderWidth: 2,
          borderColor: "red",
        },

      }
    ]
  }




}

export default optins