echarts

<!-- 线性图 -->
<style lang="stylus" scoped>
.chart {
  margin-top: 50px;
  height: 70vh;
  background-size: 100% 100%;
  color: white;

  .main {
    width: 100%;
    height: calc(100% - 10px);
    margin-top: -15px;
  }
}
</style>

<template>
  <div style="margin-top:30px;">
    <el-row>
      <el-col :span="17">
        <el-select v-model="selectedChannel"  size="small" multiple placeholder="请选择" @change="selectChange">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="7">
        <el-date-picker
          size="small"
          @change="handleChange"
          v-model="timeRange"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          value-format="yyyy-MM-dd"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          :clearable="false"
        ></el-date-picker>
      </el-col>
      <el-col :span="1">
        <el-button-group>
          <!-- <el-button type="primary" size="small" icon="el-icon-time" @click.native="refreshChart('0')">日统计</el-button>
          <el-button type="primary" size="small" icon="el-icon-tickets" @click.native="refreshChart('1')">周统计</el-button>
          <el-button type="primary" size="small" icon="el-icon-date" @click.native="refreshChart('2')">月统计</el-button>-->
          <!-- <el-button type="primary" size="small" icon="edit" @click.native="batchExport">导出表格</el-button> -->
        </el-button-group>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="chart">
          <div class="main"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { channelClickList, channelList } from "@/api/channelClick";

import { mapGetters } from "vuex";
import echarts from "echarts";
import { cloneObj } from "@/util/util";
import waves from "@/directive/waves/index.js"; // 水波纹指令
import { start } from "repl";
export default {
  name: "lineChartWith",
  //props: ["id", "title", "params"],
  data() {
    return {
      count:1,
      obj:[],
      options: [],
      selectedChannel: [],
      optionsObj:{},
      channelArr: [],
      yArrs: [],
      listQuery: {},
      chart: {},
      timeRange: [],
      curType: [39, 38],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.chart = echarts.init(document.querySelector(".chart .main"));
    var posList = [
      "left",
      "right",
      "top",
      "bottom",
      "inside",
      "insideTop",
      "insideLeft",
      "insideRight",
      "insideBottom",
      "insideTopLeft",
      "insideTopRight",
      "insideBottomLeft",
      "insideBottomRight"
    ];

    app.configParameters = {
      rotate: {
        min: -90,
        max: 90
      },
      align: {
        options: {
          left: "left",
          center: "center",
          right: "right"
        }
      },
      verticalAlign: {
        options: {
          top: "top",
          middle: "middle",
          bottom: "bottom"
        }
      },
      position: {
        options: echarts.util.reduce(
          posList,
          function(map, pos) {
            map[pos] = pos;
            return map;
          },
          {}
        )
      },
      distance: {
        min: 0,
        max: 100
      }
    };

    app.config = {
      rotate: 90,
      align: "left",
      verticalAlign: "middle",
      position: "insideBottom",
      distance: 15,
      onChange: function() {
        var labelOption = {
          normal: {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          }
        };
        myChart.setOption({
          series: [
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            },
            {
              label: labelOption
            },
          ]
        });
      }
    };

    var labelOption = {
      normal: {
        show: true,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
        formatter: "{c}  {name|{a}}",
        fontSize: 16,
        rich: {
          name: {
            textBorderColor: "#fff"
          }
        }
      }
    };

    this.chart.setOption({
      color: [],
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow"
        }
      },
      legend: {
        data: [] //上方方块
      },
      toolbox: {
        show: true,
        orient: "vertical",
        left: "right",
        top: "center",
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: "category",
          axisTick: { show: false },
          data: []
        }
      ],
      yAxis: [
        {
          type: "value"
        }
      ],
      series: []
    });
    this.initDate();
    this.refreshChart();
  },
  methods: {
    initDate() {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
      end.setTime(end.getTime());
      this.timeRange = [start, end];
    },
    handleChange() {
      this.refreshChart();
    },
    selectChange() {
      this.count = 2
      this.refreshChart();
    },
    async refreshChart() {
      this.options = []
      let res = await channelList();
      res.data.data.forEach(item => {
          this.optionsObj.label = item.name;
          this.optionsObj.value = item.id;
          this.options.push(this.optionsObj);
          this.optionsObj = {};
      });
      if(this.count == 1){
        if (this.options.length >= 2) {
        this.options.forEach(ele=>{
          this.obj.push(ele.value)
        })
        this.selectedChannel = this.obj.slice(0,2)
        this.channelArr = this.selectedChannel.slice(0,2)
        }
      }else{
        this.channelArr = this.selectedChannel
      }
      let length = this.channelArr.length
      if (this.channelArr != []) {
        this.listQuery.channelIds = this.channelArr;
        this.listQuery.startDate = this.timeRange[0];
        this.listQuery.endDate = this.timeRange[1];
        channelClickList(this.listQuery).then(response => {
          let xarr = [];
          let legendArr = [];
          let resY = response.data.data.y;
          response.data.data.x.forEach(element => {
            xarr.push(element);
          });
          for (let key in resY) {
            legendArr.push(key);
          }
          this.redraw(xarr, resY,length);
        });
      }
    },
    redraw(xd, resY,length) {
      let ItemBar = function() {
        return {
          name: "",
          type: "bar",
          label: labelOption,!!!!!!!!!!!这句加上报错undefined 可是没有这个柱状条上会显示不出来箭头所示官网案例的那些文字
          barGap: 0,
          data: []
        };
      };
      let seriesTotal = [];
      let option = cloneObj(this.chart.getOption());
      let legendArr = [];
      let legend = { data: [] };
      let colors = new Array();
      for (var j = 0; j < length; j++) {
        //生成随机颜色
        function getColorRandom() {
          var c = "#";
          var cArray = [
            "0",
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "A",
            "B",
            "C",
            "D",
            "E",
            "F"
          ];
          for (var i = 0; i < 6; i++) {
            var cIndex = Math.round(Math.random() * 15);
            c += cArray[cIndex];
          }
          return c;
        }
        if (j === colors.length) {
          colors.push(getColorRandom());
        }
      }
      option.xAxis[0].data = xd;
      var itemBar = new ItemBar();
      for (let key in resY) {
        itemBar.data = resY[key];
        itemBar.name = key;
        seriesTotal.push(itemBar);
        legendArr.push(key);
        itemBar = new ItemBar();
      }
      legend.data = legendArr;
      option.legend = legend;
      option.series = seriesTotal;
      option.color = colors;
      this.chart.setOption(option);
    },
  },
  watch: {
    params: {
      handler(newVal, oldVal) {
        this.params = newVal;
        this.refreshChart();
      },
      deep: true
    }
  }
};
</script>