<template>
  <div class="hello">
    <h1>这是bus测试</h1>

    <dome-one></dome-one>
    <dome-two></dome-two>

    <hr />

    <h4>作品地址：</h4>
    <textarea id="text" @click="copy"></textarea>
    <button class="btn" @click="copy">复制</button>

    <hr />

    <h1>Echarts报表使用</h1>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;border:1px solid red"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import domeOne from "./demo01";
import domeTwo from "./demo02";

export default {
  name: "HelloWorld",
  components: {
    domeOne,
    domeTwo
  },
  mounted() {
    this.init("main");
  },
  data() {
    return {
      charts: ""
    };
  },
  methods: {
    copy() {
      let text = document.getElementById("text");
      text.select();
      document.execCommand("Copy");
    },

    init(id) {
      // 折线图案例
      // var option = {
      //   color: ["#f33464", "#558ff2"],   // 设置曲线图曲线颜色
      //   title: {						 // 设置主标题
      //     text: "温湿度趋势"
      //   },
      //   tooltip: {						 // 设置提示框组件
      //     trigger: "axis"				 // 坐标轴触发
      //   },
      //   legend: {						 // 设置图例组件
      //     icon: "circle",				 // 设置图标样式
      //     data: ["温度", "湿度"],		  //  设置图例数组数据
      //     top: "4%"						 // 设置图例距上方距离
      //   },
      //   grid: {							 // 设置直角坐标系内绘图网格
      //     left: "3%",					 // 设置距左侧距离
      //     right: "10%",					 // 设置距右侧距离
      //     bottom: "3%",					 // 设置距下侧距离
      //     containLabel: true             // grid 区域包含坐标轴的刻度标签
      //   },
      //   xAxis: {						 // 设置x轴
      //     name: "时间",					// x轴名称
      //     type: "category",				 // 坐标轴类型
      //     data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]   // x轴类目数据
      //   },
      //   yAxis: {						 // 设置y轴
      //     name: "数值",					// y轴名称
      //     type: "value"					 // y轴类型
      //   },
      //   series: [						 // 设置系列列表
      //     {
      //       name: "温度",					// 第一个系列的数据名称
      //       type: "line",				 // 图表以折线图展示
      //       smooth: true,				 // 平滑显示
      //       data: [24, 26, 30, 27, 29, 26, 32]  // 数据值
      //     },
      //     {
      //       name: "湿度",					// 第二个系列的数据名称
      //       type: "line",				 // 图表以折线图展示
      //       smooth: true,				 // 平滑显示
      //       data: [40, 51, 41, 50, 43, 52, 49]  // 数据值
      //     }
      //   ]
      // };

      // 柱状图案例
      // var option = {
      //   color: ["#558ff2"],   // 设置曲线图曲线颜色
      //   title: {						      // 设置主标题
      //     text: "月销售额统计"
      //   },
      //   tooltip: {						    // 设置提示框组件
      //     trigger: "axis",			  // 坐标轴触发
      //     formatter: '{a}<br />时间：{b}<br /> 销售额：{c}万'
      //   },
      //   legend: {					    	  // 设置图例组件
      //     icon: "circle",				  // 设置图标样式
      //     data: ["设备"],	        //  设置图例数组数据
      //     top: "4%"						    // 设置图例距上方距离
      //   },
      //   xAxis: {                  // x轴设置
      //     name: '月份',           // x轴名称
      //     type: "category",       // x轴类型
      //     data: ["2020-01", "2020-02", "2020-03", "2020-04", "2020-05", "2020-06", "2020-07"]  // x轴类目数据
      //   },
      //   yAxis: {                  // y轴设置
      //     name: '销售额(万)',      // y轴名称
      //     type: "value"           // y轴类型
      //   },
      //   series: [                 // 数据配置
      //     {
      //       name: '设备',                              // 系列数据名称
      //       data: [120, 200, 150, 80, 70, 110, 130],   // 类目数据
      //       type: "bar"                                // 图表以柱形图展示
      //     }
      //   ]
      // };

      // 饼图案例
      // var option = {
      //   title: {                            // 标题设置
      //     text: "各部门成员数量占比",         // 主标题内容
      //     subtext: "纯属虚构",               // 副标题内容
      //     left: "center"                    // 显示位置
      //   },
      //   tooltip: {                          // 提示框显示
      //     trigger: "item",                  // 提示类型，数据项图形触发，主要饼图等无类目轴的图表中使用。
      //     formatter: "{a} <br/>{b} : {c}人 ({d}%)"   // 设置显示文本格式
      //   },
      //   legend: {                           // 图例设置
      //     orient: "vertical",               // 图例列表的布局朝向，垂直显示
      //     left: "left",                     // 图例显示位置
      //     data: ["市场部", "产品部", "设计部", "总务部", "研发部"]   // 图例数据项
      //   },
      //   series: [                           // 数据配置
      //     {
      //       name: "部门信息",               // 系列名称
      //       type: "pie",                   // 以饼状图形式展示
      //       radius: "55%",                 // 饼图的半径
      //       center: ["50%", "60%"],        // 饼图的中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标
      //       data: [                        // 饼图数据项
      //         { value: 335, name: "市场部" },
      //         { value: 310, name: "产品部" },
      //         { value: 234, name: "设计部" },
      //         { value: 135, name: "总务部" },
      //         { value: 1548, name: "研发部" }
      //       ],
      //       emphasis: {                    // 高亮的扇区和标签样式。
      //         itemStyle: {
      //           shadowBlur: 10,            // 图形阴影的模糊大小
      //           shadowOffsetX: 0,          // 阴影水平方向上的偏移距离
      //           shadowColor: "rgba(0, 0, 0, 0.5)"   // 阴影颜色
      //         }
      //       }
      //     }
      //   ]
      // };


      // 热力图案例
      var option = {
        title: {                            // 标题设置
          text: "一周游客游览量量热力图",     // 主标题内容
          subtext: "纯属虚构",               // 副标题内容
          left: "center"                    // 显示位置
        },
        tooltip: {                          // 提示框设置
          position: "top"
        },
        grid: {
          height: "65%",                    // 直接坐标系绘制网格高度
          top: "15%"                        // 直角坐标系绘制网格距离上部距离
        },
        xAxis: {                            // x轴设置
          type: "category",                 // x轴类型
          data: ['8时', '9时', '10时', '11时', '12时', '13时','14时', '15时', '16时','17时'],  // x轴类目数据
          splitArea: {
            show: true                     // 显示坐标轴在 grid 区域中的分隔区域
          }
        },
        yAxis: {                           // y轴设置
          type: "category",                // y轴类型
          data: ['周六', '周五', '周四','周三', '周二', '周一', '周天'],  // y轴类目数据
          splitArea: {
            show: true                     // 显示坐标轴在 grid 区域中的分隔区域
          }
        },
        visualMap: {                      // 觉映射组件设置
          min: 0,                         // 指定 visualMapContinuous 组件的允许的最小值
          max: 10,                        // 指定 visualMapContinuous 组件的允许的最大值
          calculable: true,               // 显示拖拽用的手柄
          orient: "horizontal",           // 水平放置 visualMap 组件
          left: "center",                 // 组件位置
          bottom: "4%"                    // 组件距下侧距离
        },
        series: [
          {
            name: "游客访问量等级",        // 类目名称
            type: "heatmap",              // 以热力图的形式展示
            data: [[0,0,8],[1,0,9],[2,0,10],[3,0,7],[4,0,8],[5,0,9],[6,0,9],[7,0,8],[8,0,4],[9,0,7],
                  [0,1,6],[1,1,6],[2,1,7],[3,1,7],[4,1,5],[5,1,5],[6,1,4],[7,1,4],[8,1,4],[9,1,3],
                  [0,2,1],[1,2,1],[2,2,2],[3,2,2],[4,2,3],[5,2,3],[6,2,4],[7,2,4],[8,2,7],[9,2,6],
                  [0,3,4],[1,3,9],[2,3,5],[3,3,7],[4,3,3],[5,3,3],[6,3,5],[7,3,8],[8,3,4],[9,3,7],
                  [0,4,1],[1,4,2],[2,4,4],[3,4,2],[4,4,4],[5,4,5],[6,4,4],[7,4,4],[8,4,5],[9,4,9],
                  [0,5,1],[1,5,1],[2,5,2],[3,5,7],[4,5,3],[5,5,2],[6,5,4],[7,5,4],[8,5,4],[9,5,5],
                  [0,6,2],[1,6,1],[2,6,3],[3,6,2],[4,6,3],[5,6,3],[6,6,1],[7,6,4],[8,6,4],[9,6,6]],
            label: {
              show: true                 // 显示文本标签
            },
            emphasis: {                  // 高亮设置
              itemStyle: {
                shadowBlur: 10,      
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };

      // 初始化图表
      this.charts = echarts.init(document.getElementById(id));
      // 清除图表旧数据
      this.charts.clear();
      // 重新加载新数据
      this.charts.setOption(option);
    }
  }
};
</script>

<style scoped lang="scss">
</style>