<template>
  <div class="Ba_echart">
    <BarCharts id="hover" :option="inHourDataOption" />
  </div>
</template>

<script>
import BarCharts from './components/echart/commonChartsBar.vue'
import { mapGetters } from 'vuex'
const barOption = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
  },
  // toolbox: {
  //   feature: {
  //     saveAsImage: {}
  //   }
  // },
  grid: {
    top: '20%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      show: true,
      boundaryGap: false,
      axisLine:{
        lineStyle:{
          color:'#000000',
          width:1
        }
      },
      splitLine: {  
        show:false,   //X网格线
        lineStyle:{   //x网格线
          color: '#000000'
        }
      },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value',
        //y轴颜色
      axisLine: {
        lineStyle: {   // Y 轴颜色配置
          color: '#000000'  
        } 
      },
      splitArea: {
        show: true  //y网格区域颜色
      },
      splitLine: {
        show:false,     //y网格线
        lineStyle:{
          color: '#000000'
        }
      },
    }
  ],
  series: [
    {
        markPoint: {
          data: [
              {type: 'max', name: '最大值'},
              {type: 'min', name: '最小值'}
          ]
      },
      markLine: {
          data: [
              {type: 'average', name: '平均值'}
          ]
      },
      name: 'Email',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      symbol: 'circle',
      // itemStyle: {
      //   normal: {
      //     color: "#1F824E", //改变折线点的颜色
      //     lineStyle: {
      //       color: "#1F824E", //改变折线颜色
      //     },
      //   },
      // },
      // emphasis: {
      //   focus: 'series'
      // },
      data: [120, 132, 101, 134, 90, 230, 210]
    }
  ]
};
const hisOption = {
  title: {
    text: 'Stacked Area Chart'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  // legend: {
  //   data: ['Email']
  // },
  xAxis: {
    type: 'category',
    show: true,
      // boundaryGap: false,
      axisLine:{
        lineStyle:{
          color:'#000000',
          width:1
        }
      },
      splitLine: {  
        show:false,   //X网格线
        lineStyle:{   //x网格线
          color: '#000000'
        }
      },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    //y轴颜色
    axisLine: { 
      lineStyle: {   // Y 轴颜色配置
        color: '#000000'  
      } 
    },
    splitArea: {
      show: true  //y网格区域颜色
    },
    splitLine: {
      show:false,     //y网格线
      lineStyle:{
        color: '#000000'
      }
    },
  },
  series: [
    {
      name: 'Email',
      label: {
        show: true,
        position: 'inside'
      },
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar',
      barWidth: '20',
      showBackground: true,
      backgroundStyle: {
        color: 'rgba(180, 180, 180, 0.2)'
      },
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#595FAE", // 0% 处的颜色
            },
            {
              offset: 0.2,
              color: "#595FAE", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "#595FAE", // 100% 处的颜色
            },
          ],
        },
      }
    }
  ]
};
const cakeOption = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left',
    data: ['Search Engine','Direct','Email','Union Ads','Video Ads','搜索引擎','直接访问']
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ["40%", "60%"],
      // itemStyle: {
      //   normal: {
      //     color: function (params) {
      //       let colorList = ["#3893F0", "#4ECAE9"];
      //       return colorList[params.dataIndex];
      //     },
      //   },
      // },
      label: {
        show: false,
        position: 'left'
      },
      color: ["red",'yellow','blue','black','green'],
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      // emphasis: {
      //   itemStyle: {
      //     shadowBlur: 10,
      //     shadowOffsetX: 0,
      //     shadowColor: 'rgba(0, 0, 0, 0.5)'
      //   }
      // }
    },
    {
      name: "访问来源",
      type: "pie",
      // silent:true,
      radius: ["0%", "30%"],
      avoidLabelOverlap: false,
      label: {
        show: false,
      },
      color: ["red",'yellow','blue','black','green'],
      // color: ["red"],
      // itemStyle: {
      //   normal: {
      //     color: function (params) {
      //       let colorList = ["#3893F0", "#4ECAE9"];
      //       return colorList[params.dataIndex];
      //     },
      //   },
      // },
      labelLine: {
        show: false,
      },
      data: [
        { value: 0, name: "搜索引擎" },
        { value: 735, name: "直接访问" },
      ],
    },
  ]
};
const radarOption = {
  title: {
    text: 'Basic Radar Chart'
  },
  legend: {
    data: ['Allocated Budget', 'Actual Spending']
  },
  radar: {
    // shape: 'circle',
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [
    {
      name: 'Budget vs spending',
      type: 'radar',
      lineStyle: {
        //边缘颜色
        width: 1,
        color: 'black',
      },
        itemStyle: {
          borderWidth: 1,
          color: 'yellow',
          borderColor: '#F2F063',
        },
        areaStyle: {
          color: 'red',
          opacity: 0.1,
        },
      data: [
        {
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          name: 'Allocated Budget'
        }
      ]
    }
  ]
};
export default {
  name: 'Chartsr',
  props: {
    //数据的字段名
    fieldname: {
      type: Array,
      default: () => []
    },
    //图标名称
    echartname: {
      type: String,
      default: () => ''
    },
    //x轴列表
    axlist: {
      type: Array,
      default: () => []
    },
    //名称
    echrtstiele: {
      type: String,
      default: () => ''
    },
  },
  data() {
    return {
      inHourDataOption: this._.cloneDeep(barOption),
      listdata: [],
      page: 0, //当前table页面
    };
  },
  computed: {
    ...mapGetters(['authArrs']),
  },
  components: {
    BarCharts
  },
  mounted() {
    this.pageInit()
  },

  methods: {
    //页面初始化
    pageInit () {
      //获取页面查询参数
      const { query } = this.$route
      this.pageQuery = query
      //获取页面配置
      const { pagecode, qid, auth_id } = this.$route.meta
      //获取页面权限类型组件  pagetype 1模块  2页面  3按钮 4表格 5树形  6弹窗 
      const pageAuths = this.authArrs
      if (!pageAuths.length) return
      //获取当前页面权限类型
      const pageAuthArrs = pageAuths.filter(item => item['superiorid'] == auth_id)
      if (!pageAuthArrs.length) return
      console.log(pageAuthArrs)
    },
    //处理数据1模式
    processingdata (data) {
      let arr = []
      fieldname.forEach(res => {
        arr.push(data[res.name])
      });
      let series = [
        {
          name: this.echartname,
          data: arr,
          type: 'bar',
          barWidth: '20',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#595FAE", // 0% 处的颜色
                },
                {
                  offset: 0.2,
                  color: "#595FAE", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#595FAE", // 100% 处的颜色
                },
              ],
            },
          }
        }
      ]
      return series
    },
    //处理数据2模式
    processingdata1 (data) {
      let arr = []
      fieldname.forEach(res => {
        data.forEach(element => {
          arr.push(element[res.name])
        });
      });
      let series = [
        {
          name: this.echartname,
          data: arr,
          type: 'bar',
          barWidth: '20',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          },
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#595FAE", // 0% 处的颜色
                },
                {
                  offset: 0.2,
                  color: "#595FAE", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "#595FAE", // 100% 处的颜色
                },
              ],
            },
          }
        }
      ]
      return series
    },
    //x轴数据
    axisLinelist (data) {
      let xAxis = {
        type: 'category',
        show: true,
          // boundaryGap: false,
          axisLine:{
            lineStyle:{
              color:'red',
              width:2
            }
          },
          splitLine: {  
            show:false,   //X网格线
            lineStyle:{   //x网格线
              color: '#000000'
            }
          },
        data: this.axlist ? this.axlist : data
      }
      return xAxis
    },
    //表格标题
    cheartstitle () {
      let title = {
        text: this.echrtstiele
      }
      return title
    }
  },
};
</script>

<style lang="scss" scoped>
.Ba_echart{
  width: 100%;
  height: calc(100vh - 90px);
  padding: 20px;
}
</style>