epmet-work-pc/src/views/modules/visual/cpts/line-chart.vue

<template>
  <div class="m-chart">
    <div :id="id" style="width: 400px; height: 230px"></div>
  </div>
</template>

<script>
import nextTick from "dai-js/tools/nextTick";
import * as echarts from "echarts";
// ios下字体渲染有bug
const fontFamily = "PingFang SC";
const fontSize = 14;

let id = "myChart" + new Date().getDate();
let chart;
let srcData = [];

export default {
  name: "chart",
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
    width: {
      type: Number,
      default: 400,
    },
    height: {
      type: Number,
      default: 260,
    },
  },
  data() {
    return {
      iniLoading: false,
      id,
    };
  },
  watch: {
    list(data) {
      this.initCharts();
      srcData = data;
      addTextShape();
    },
  },
  async created() {
    await nextTick(200);

    //在这里调用初始化图表的方法
    await nextTick(200);
    this.iniLoading = true;
  },
  mounted() {
    console.log(this.config, "config");
    console.log(this.list, "list");
    let date = this.list
      .filter((item) => item.type == "支持")
      .map((item) => item.date);
    let data = this.list
      .filter((item) => item.type == "支持")
      .map((item) => item.value);
    let data1 = this.list
      .filter((item) => item.type == "反对")
      .map((item) => item.value);
    console.log(data);
    nextTick(1000);
    this.initCharts(date, data, data1);
  },
  methods: {
    // date x轴时间  data支持人数  data1 反对人数
    initCharts(date, data, data1) {
      console.log(this.id);
      let div = document.getElementById(this.id);
      let myChart = echarts.init(div);
      var option = {
        tooltip: {
          trigger: "axis",
        },
        color:['#1664d9','#fab616'],
        legend: {
          data: ["支持", "反对"],
          top:'92%',
          icon: 'rect',
          itemWidth: 20,
          itemHeight: 5,
          itemGap: 150,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "10%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        dataZoom: [
                        {
                            type: 'slider',
                            realtime: true,
                            start: 0,
                            // end: 20,  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
                            height: 5, //组件高度
                            left: '25%', //左边的距离
                            right: '25%', //右边的距离
                            bottom: '12%', //下边的距离
                            show: true,  // 是否展示
                            fillerColor: "rgba(2,110,252,1)", // 滚动条颜色
                            borderColor: "rgba(17, 100, 210, 0.12)",
                            backgroundColor: 'rgba(232,244,255,0.51)',//两边未选中的滑动条区域的颜色
                            handleSize: 0,      //两边手柄尺寸
                            showDetail: false, //拖拽时是否展示滚动条两侧的文字
                            zoomLock: true,         //是否只平移不缩放
                            moveOnMouseMove: false, //鼠标移动能触发数据窗口平移
                            //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放

                            //下面是自己发现的一个问题，当点击滚动条横向拖拽拉长滚动条时，会出现文字重叠，导致效果很不好，以此用下面四个属性进行设置，当拖拽时，始终保持显示六个柱状图，可结合自己情况进行设置。添加这个属性前后的对比见**图二**
                            startValue: 0, // 从头开始。
                            endValue: 3,  // 最多5个
                            // minValueSpan: 5,  // 放大到最少几个
                            // maxValueSpan: 5,  //  缩小到最多几个
                        },
                        {
                            type: "inside",  // 支持内部鼠标滚动平移
                            start: 0,
                            // end: 20,
                            startValue: 0, // 从头开始。
                            endValue: 5,  // 最多5个
                            zoomOnMouseWheel: false,  // 关闭滚轮缩放
                            moveOnMouseWheel: true, // 开启滚轮平移
                            moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
                        }
                    ],
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: date,
        },
        yAxis: {
          type: "value",
          minInterval: "1",
        },
        series: [
          {
            name: "支持",
            type: "line",

            data: data,
          },
          {
            name: "反对",
            type: "line",

            data: data1,
          },
        ],
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => myChartPieLeft.resize(), false);
    },
  },
};
</script>

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