luohe_fronted/src/components/lineChart.vue

smooth:encode.bool,<template>
  <div class="chart" :id="id" @mouseenter="handleMouseEnter"></div>
</template>

<script>
import * as echarts from 'echarts'
const colors = ["#00F5FC", "#D5920F", "#FA6894","#4cff37"];
export default {
  props: {
    id: { type: String, required: true },
    dataset: { type: Array, required: true },
    encode: { type: Array, required: true },
    yAxisName: { type: String },
    xlabelFormat: { type: Function },
    tooltipFormat: { type: Function },
    colorIdx: { type: Number },
    colors: { type: Array, default: () => colors },
    top: { type: Number, default: 50 },
    right: { type: Number, default: 20 },
    bottom: { type: Number, default: 30 },
    left: { type: Number, default: 70 },
    legendRight: { type: Number, default: 20 },
    legendTop: { type: Number, default: 10 },
    markLine: { type: Object }, // 标线
    symbolSize: { type: Number, default: 4 },
    showArea: { type: Boolean, default: true },
    labelSize: { type: Number, default: 12 },
    isBig: { type: Boolean, default: false },
    autoStop: { type: Boolean, default: true }, // tooltip循环会否循环一轮后自动停止
    legendShow: { type: Boolean, default: true },
  },
  data() {
    return {
      option: {
        grid: {
          top: this.top,
          bottom: this.bottom,
          left: this.left,
          right: this.right,
        },
        legend: {
          right: this.legendRight,
          top: this.legendTop,
          icon: "circle",
          textStyle: {
            color: "#ffffff",
            fontSize: this.isBig ? 18 : this.labelSize,
          },
          selectedMode: false,
          show: this.legendShow,
        },
        tooltip: {
          trigger: "axis",
          confine: true,
          axisPointer: {
            lineStyle: { color: "#0081AC", type: "dashed" },
          },
          backgroundColor: "t",
          formatter: this.tooltipFormat,
          position: function (point, params, dom, rect, size) {
            let boxWidth = size.contentSize[0];
            let boxHeight = size.contentSize[1];
            return [point[0] - boxWidth / 2, point[1] - boxHeight - 10];
          },
          textStyle: {
            fontSize: this.labelSize,
          },
        },
        xAxis: {
          type: "category",
          axisLabel: {
            color: "#59BEED",
            fontSize: this.labelSize,
            interval: 0,
          },
          axisLine: {
            lineStyle: {
              color: "#1977C6",
            },
          },
          axisTick: false,
        },
        yAxis: {
          axisLabel: {
            color: "#59BEED",
            fontSize: this.labelSize,
          },
          nameTextStyle: {
            color: "#59BEED",
            fontSize: this.labelSize,
          },
          axisLine: {
            lineStyle: {
              color: "#1977C6",
            },
          },
          splitLine: {
            lineStyle: {
              color: "#082E81",
              type: "dashed",
            },
          },
          axisTick: false,
        },
        dataset: {},
        series: [],
      },
      i: 0,
    };
  },
  watch: {
    dataset: function (newV) {
      clearInterval(this.tooltipInterval);
      this.i = 0;
      const option = this.option;
      option.dataset.source = newV;
      this.chart.setOption(option);
      this.startInterval();
    },
  },
  mounted() {
    this.chart = echarts.init($(`#${this.id}`)[0]);
    const option = this.option;
    option.yAxis.name = this.yAxisName;
    if (this.xlabelFormat) {
      option.xAxis.axisLabel.formatter = this.xlabelFormat;
    }
    this.encode.map((encode, idx) => {
      option.series.push({
        name: encode.seriesName,
        type: "line",
        smooth:encode.bool,
        symbol: "circle",
        symbolSize: this.symbolSize,
        markLine: this.markLine,
        hoverAnimation: this.symbolSize === 4,
        encode: encode,
        lineStyle: { width: 2 , color:encode.col},
        itemStyle: {
          color: encode.col ? encode.col:this.colorIdx ? this.colors[this.colorIdx] : this.colors[idx],
        },
        areaStyle: {
          opacity: this.showArea ? 1 : 0,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: encode.col ? encode.col:this.colorIdx ? this.colors[this.colorIdx] : this.colors[idx],
            },
            {
              offset: 1,
              color: "transparent",
            },
          ]),
        },
      });
    });
    option.dataset.source = this.dataset;
    if (this.tooltipFormat) {
      option.tooltip.formatter = this.tooltipFormat;
    }
    this.chart.setOption(option);
    this.chart.on("mousemove", (e) => {
      this.i = e.dataIndex + 1;
    });
    this.chart.on("globalout", () => {
      this.startInterval();
    });
    if (this.dataset.length) {
      const option = this.option;
      option.dataset.source = this.dataset;
      this.chart.setOption(option);
      this.startInterval();
    }
  },
  methods: {
    handleMouseEnter() {
      if (this.tooltipInterval) {
        clearInterval(this.tooltipInterval);
      }
    },
    startInterval() {
      this.tooltipInterval = setInterval(() => {
        if (this.i > this.dataset.length - 1) {
          if (this.autoStop) {
            this.stopInterval();
          } else {
            this.i = 0;
          }
        }
        this.chart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: this.i,
        });
        this.i = this.i + 1;
      }, 2000);
    },
    stopInterval() {
      this.chart.dispatchAction({ type: "hideTip", seriesIndex: 0 });
      clearInterval(this.tooltipInterval);
    },
  },
  beforeDestroy() {
    this.stopInterval();
  },
};
</script>

<style lang="less" scoped>
.chart {
  width: 100%;
  height: 100%;
}
.line-tooltip {
  padding: 10px 20px;
  background: url("../../static/img/u231.png");
  background-size: 100% 100%;
}
.line-tooltip-dz {
  padding: 5px 10px;
  background: url("../../static/index/u261.png");
  background-size: 100% 100%;
  color: #333;
}
</style>