<template>
  <div style="margin-left:100px;position:relative">
    <!-- <div id="echarts1" style="width:620px;height:280px;margin-top: -40px"></div> -->
    <!-- <div id="echarts1" style="width: 800px;height:500px;"></div> -->
    <!-- <div id="echarts2" style="width: 160px;height:450px;"></div> -->
    <!-- <div id="echarts3" style="width: 600px;height:450px;"></div> -->
    <!-- <div id="echarts4" style="width: 800px; height: 500px;"></div> -->
    <!-- <div class="test-wrapper" style="display:flex;justify-content:space-between;flex-wrap:wrap">
      <div class="test1" style="width:650px;height:500px;background:#f00"></div>
      <div class="test2" style="width:650px;height:500px;background:#ff0"></div>
    </div> -->
    <div class="box1" :style="{height:(600/1000*100+'%')}">123</div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'test',
  data () {
    return {
      videoShow: false
    }
  },
  mounted () {
    this.getEchart1()
    // this.getEchart2()
    this.getEchart3()
    // this.getEchart4()
  },
  methods: {
    getEchart1 () {
      // let xdata = this.xdata
      // let ydata = this.ydata
      var option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        // yAxis: {
        //   type: 'value'
        // },
        yAxis: {
          // 设置坐标轴字体颜色和宽度
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          }
        },
        series: [{
          data: [10, 50, 30, 20, 60, 70, 80],
          type: 'bar',
          barWidth: 10
        }]
      }

      var echart = document.getElementById('echarts1')
      var myChart = echarts.init(echart)
      myChart.setOption(option)
    },
    getEchart2 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts2'))
      // 指定图表的配置项和数据
      var option = {
        xAxis: {
          type: 'category',
          // data: ['001', '002', '003'],
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          }
        },
        // yAxis: {
        //   type: 'value'
        // },
        yAxis: {
          // 设置坐标轴字体颜色和宽度
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            interval: 0,
            rotate: 90
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        series: [{
          data: [120, 200, 150],
          type: 'bar',
          barWidth: 10,
          itemStyle: {
            normal: {
              // 这里是重点
              color: function (params) {
                // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                var colorList = ['#ff0', '#ffc', '#2c0', '#d48265', '#91c7ae', '#749f83', '#ca8622']
                return colorList[params.dataIndex]
              }
            }
          }
        }]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    getEchart3 () {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('echarts3'))
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          position: 'top',
          splitLine: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            show: false
          },
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          axisLine: {
            show: false
          }
        },
        series: [
          {
            name: '2011年',
            type: 'bar',
            barWidth: 10,
            data: [120, 200, 150],
            itemStyle: {
              normal: {
                // 这里是重点
                color: function (params) {
                  // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = ['#ff0', '#ffc', '#2c0', '#d48265', '#91c7ae', '#749f83', '#ca8622']
                  return colorList[params.dataIndex]
                }
              }
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    getEchart4 () {
      // 基于准备好的dom，初始化echarts实例
      var lineData = [4, 9, 8, 6, 8, 7, 3, 8]
      var barData = [50002, 34120, 48370, 57370, 67582, 90892, 32321, 57370]
      var xData = ['1号机', '2号机', '3号机', '4号机', '5号机', '6号机', '7号机', '8号机']
      var myChart = echarts.init(document.getElementById('echarts4'))
      var option = {
        // title: {
        //   text: '2015-2020年中国移动电商市场交易额(纯属虚构）',
        //   subtext: 'Transaction volume of China mobile e-commerce market from 2015 to 2020',
        //   left: '20%',
        //   textStyle: {
        //     color: 'red',
        //     fontSize: 30
        //   }
        // },
        legend: {
          right: '45%',
          top: '10%'
        },
        xAxis: {
          // name: '部门',
          type: 'category',
          data: xData,
          nameGap: 60, // 坐标轴名称与轴线之间的距离。
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: { // x轴标签样式
            textStyle: {fontSize: 12}
          },
          nameTextStyle: { // 坐标轴名字样式
            fontSize: 12
          }
        },
        yAxis: [
          {
            // name: '交易额（亿元）',
            type: 'value',
            min: 0,
            max: 100000,
            splitNumber: 10,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: { // 坐标轴标签样式设置
              textStyle: {fontSize: 12},
              formatter: '{value}' // 给坐标轴标签加单位
            },
            nameTextStyle: {fontSize: 12}
          },
          {
            // name: '增长率',
            type: 'value',
            min: 0,
            max: 10,
            splitNumber: 10,
            position: 'right',
            formatter: '{value}',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              textStyle: {fontSize: 12},
              formatter: '{value}' // 给坐标轴标签加单位
            },
            nameTextStyle: {fontSize: 12},
            itemStyle: {
              color: '#F7B502'
            }
          }
        ],
        series: [
          {
            type: 'bar',
            data: barData,
            barWidth: 10,
            itemStyle: {
              color: '#32C5FF'
            },
            label: {
              show: true,
              position: 'top'
            }
          },
          {
            name: '折线图',
            type: 'line',
            data: lineData,
            barWith: '40%',
            label: {
              show: true,
              position: 'top',
              formatter: '{c}'
            },
            lineStyle: {
              color: '#ffb122'
            },
            yAxisIndex: 1
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  }
}

</script>

<style lang="stylus" scoped>
// @media screen and (min-width: 1441px)
//   div
//     width 19.2rem
//     color yellow
// @media screen and (max-width:800px )
//   div
//     color yellow
// @media screen and (max-width: 800px) and (min-width: 600px)
// @media screen and (max-width: 1440px)
//   div
//     width 14.4rem
//     color red !important
#echarts1
  // margin-left 2rem
  position absolute
  top 0
  left 0
  z-index 999
#echarts3
  // margin-left 2rem
  position absolute
  top -30px
  left 60px
  z-index 1000
#echarts2
  // margin-left 3.2rem
  position absolute
  top -130px
  // top -38px
  // left -190px
  z-index 999
  transform rotate(90deg)
.box1
  width 100px
  height 200px
  border 1px solid #f00
</style>
