<template>
  <div>
    <div id="myChart" :style="{width: '45%', height: '600px'}" style="float: left;"></div>
    <div id="myChart1" :style="{width: '45%', height: '600px'}" style="float: left;"></div>
    <div id="myChart2" :style="{width: '45%', height: '600px'}" style="float: left;"></div>
    <div id="myChart3" :style="{width: '45%', height: '600px'}" style="float: left;"></div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import request from "../utils/request";
  import axios from "axios";

  //树状图
  export default {
    name: 'BingEcharts',

    //找的代码写道mounted里边  相当于初始化函数
    mounted() {
      request.get("/system/index/getProjectNumByTypeByJoin?statisticsType=city", ).then(res => {

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '各省份项目统计',
            subtext: '按省份统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}项 ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: res.data.legendData
          },
          series: [{
            name: '省份',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: res.data.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        })
      });

      request.get("/system/index/getProjectNumByTypeByJoin?statisticsType=deptId", ).then(res => {

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart1'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '各区域项目统计',
            subtext: '按区域统计',
            left: 'center'
          },
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}项 ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: res.data.legendData
          },
          series: [{
            name: '区域',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: res.data.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        })
      });

      request.get("/system/index/getProjectNumByTypeByJoin?statisticsType=deptId", ).then(res => {

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('myChart2'))
        // 绘制图表
        myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // Use axis to trigger tooltip
              type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
            }
          },
          legend: {},
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          series: [{
              name: 'Direct',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
              name: 'Mail Ad',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: 'Affiliate Ad',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: 'Video Ad',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [150, 212, 201, 154, 190, 330, 410]
            },
            {
              name: 'Search Engine',
              type: 'bar',
              stack: 'total',
              label: {
                show: true
              },
              emphasis: {
                focus: 'series'
              },
              data: [820, 832, 901, 934, 1290, 1330, 1320]
            }
          ]
        })
      });
      // request.get("/system/index/getProjectNumByTypeByJoin?statisticsType=deptId", ).then(res => {

      //   // 基于准备好的dom，初始化echarts实例
      //   let myChart = echarts.init(document.getElementById('myChart1'))
      //   // 绘制图表
      //   myChart.setOption({

      //     title: {
      //       text: '车辆类型'
      //     },
      //     tooltip: {
      //       trigger: 'axis',
      //       formatter: '{a} <br/>{b} : {c}(辆)',
      //       axisPointer: {
      //         type: 'shadow'
      //       }
      //     },
      //     legend: {},
      //     grid: {
      //       left: '3%',
      //       right: '4%',
      //       bottom: '3%',
      //       containLabel: true
      //     },
      //     xAxis: {
      //       type: 'value',
      //       boundaryGap: [0, 0.01]
      //     },
      //     yAxis: {
      //       type: 'category',
      //       data: res.data.name.split(',')
      //     },
      //     series: [{
      //       name: '车数量',
      //       type: 'bar',
      //       data: res.data.value.split(',')
      //     }]

      //   })
      // });

      //     request.get("/system/carbaseinfo/getPie?type=bar", ).then(res => {

      //       // 基于准备好的dom，初始化echarts实例
      //       let myChart = echarts.init(document.getElementById('myChart2'))
      //       // 绘制图表
      //       myChart.setOption({

      //         tooltip: {
      //           trigger: 'axis',
      //           formatter: '{b} : {c}(辆)',
      //           axisPointer: {
      //             type: 'shadow'
      //           }
      //         },
      //         xAxis: {
      //             type: 'category',
      //             boundaryGap: false,
      //             data: res.data.name.split(',')
      //           },
      //           yAxis: {
      //             type: 'value'
      //           },
      //           series: [
      //             {
      //               data: res.data.value.split(','),
      //               type: 'line',
      //               areaStyle: {}
      //             }
      //           ]

      //       })
      //     });

          request.get("/system/index/getProjectNumByTypeByJoin?statisticsType=deptId", ).then(res => {

            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('myChart3'))
            // 绘制图表
            myChart.setOption({
              color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
                title: {
                  text: 'Gradient Stacked Area Chart'
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross',
                    label: {
                      backgroundColor: '#6a7985'
                    }
                  }
                },
                legend: {
                  data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
                },
                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'
                  }
                ],
                series: [
                  {
                    name: 'Line 1',
                    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: 'rgb(128, 255, 165)'
                        },
                        {
                          offset: 1,
                          color: 'rgb(1, 191, 236)'
                        }
                      ])
                    },
                    emphasis: {
                      focus: 'series'
                    },
                    data: [140, 232, 101, 264, 90, 340, 250]
                  },
                  {
                    name: 'Line 2',
                    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: 'rgb(0, 221, 255)'
                        },
                        {
                          offset: 1,
                          color: 'rgb(77, 119, 255)'
                        }
                      ])
                    },
                    emphasis: {
                      focus: 'series'
                    },
                    data: [120, 282, 111, 234, 220, 340, 310]
                  },
                  {
                    name: 'Line 3',
                    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: 'rgb(55, 162, 255)'
                        },
                        {
                          offset: 1,
                          color: 'rgb(116, 21, 219)'
                        }
                      ])
                    },
                    emphasis: {
                      focus: 'series'
                    },
                    data: [320, 132, 201, 334, 190, 130, 220]
                  },
                  {
                    name: 'Line 4',
                    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: 'rgb(255, 0, 135)'
                        },
                        {
                          offset: 1,
                          color: 'rgb(135, 0, 157)'
                        }
                      ])
                    },
                    emphasis: {
                      focus: 'series'
                    },
                    data: [220, 402, 231, 134, 190, 230, 120]
                  },
                  {
                    name: 'Line 5',
                    type: 'line',
                    stack: 'Total',
                    smooth: true,
                    lineStyle: {
                      width: 0
                    },
                    showSymbol: false,
                    label: {
                      show: true,
                      position: 'top'
                    },
                    areaStyle: {
                      opacity: 0.8,
                      color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: 'rgb(255, 191, 0)'
                        },
                        {
                          offset: 1,
                          color: 'rgb(224, 62, 76)'
                        }
                      ])
                    },
                    emphasis: {
                      focus: 'series'
                    },
                    data: [220, 302, 181, 234, 210, 290, 150]
                  }
                ]
            })
          });

    }
  }
</script>
