<template>
  <div class="event-finished-num-chart">
      <LineChart :option="option" />
  </div>
</template>

<script>
import { Random } from "mockjs";
import { LineChart } from "dr-vue-echarts";
export default {
  name: "EventFinishedNumChart",
  components: {
    [LineChart.name]: LineChart
  },
  methods: {
    RandomData() {
      var thedataArray = [];
      for (var i = 0; i <= 6; i++) {
        thedataArray.push(Random.natural(0, 10));
      }
      return thedataArray;
    }
  },
  data() {
    return {
        option: {
        title: {
          text: "最近七日完成活動數"
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: true,
            lineStyle: {
              color: "gray"
            }
          },
          //座標軸線的設置
          axisLine: {
            lineStyle: {
              color: "gray",
              width: 2
            }
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "black"
          },
          boundaryGap: false,
          data: ["5/21","5/22", "5/23", "5/24", "5/25", "5/26","5/27"]
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              color: "gray"
            }
          },
          //座標軸線的設置
          axisLine: {
            lineStyle: {
              color: "gray",
              width: 2
            }
          },
          //座標軸的刻度顏色
          axisLabel: {
            color: "black"
          }
        },
        tooltip: {
          padding: [4, 12],
          backgroundColor: "white",
          textStyle: {
            color: "black",
            fontFamily: "Ariel",
            fontWeight: "bolder"
          },
          formatter:
            "<div>{b0}: <span class='mytooltipHrsColor'>{c0}</span> 項活動" //修改tooltip模板變量
        },
        series: [
          {
            data: this.RandomData(),
            type: "line",
            //處理線上的點點
            symbol: "roundRect",
            symbolSize: [10, 10],
            itemStyle: {
              color: "#29856C"
            },
            //處理線上的點點
            smooth: true,
            lineStyle: {
              color: "#29856C"
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#24B880" // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#24B880" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "white" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      }
    
    };
  }
};
</script>

<style scoped>
.event-finished-num-chart{
    width: 100%;
    height: 320px;
    margin-bottom:20px;
}
</style>