E-commerce/src/components/Customize/wavyLineChart.vue

<!-- 面积图 -->
<!-- 必须传入 ID  area dataArray-->
<template>
  <div>
    <boxTop :title="title" />
    <div class="wavylineBox" :style="{ width: barWidth }">
      <div class="chartsdom" :id="id"></div>
    </div>
  </div>
</template>

<script>
import boxTop from '@/components/boxTop/index.vue'
export default {
  data() {
    return {
      option: null,
      information: {},
    }
  },
  components: {
    boxTop,
  },
  props: {
    id: {
      type: String,
      default: ``,
    },
    smooth: {
      type: String,
      default: ``,
    },
    barWidth: {
      type: String,
      default: `401px`,
    },
    area: {
      type: Array,
    },
    dataArray: {
      type: Object,
    },
    lineName: {
      type: Object,
    },
    title: {
      type: String,
      default: ``,
    },
    unit: {
      type: String,
      default: ``,
    },
  },
  mounted() {
    this.getEchart()
  },
  watch: {
    dataArray() {
      this.getEchart()
    },
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById(this.id))
      this.option = {
        backgroundColor: `rgb(0,0,0,0.3)`,
        color: [
          `#23CF9C`,
          `#578FFB`,
          `#6E40F2`,
          `#FF61E6`,
          `#8B5CFF`,
          `#00CA69`,
        ],
        legend: {
          selectedMode: false,
          icon: `circle`,
          top: `5%`,
          right: `5%`,
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: `#94A7BD`,
          },
        },
        tooltip: {
          trigger: `axis`,
          backgroundColor: `rgba(9,40,84,0.8)`,
          borderColor: `rgba(9,40,84,0.8)`,
          textStyle: {
            fontSize: 17,
            color: `#fff`,
          },
          axisPointer: {
            type: `shadow`,
          },
          formatter: function (params) {
            console.log(params)
            const temMarkerStyle =
              `display: inline-block; width: 14px; height: 14px;border-radius:14px; margin-right:3px; background-color: ` +
              params[0].color +
              `;`
            const humMarkerStyle =
              `display: inline-block; width: 14px; height: 14px; margin-right:3px;border-radius:14px; background-color: ` +
              params[1].color +
              `;`
            if (params.length > 2) {
              let name = `较上日`
              if (params[0].axisValue.length < 8) {
                name = `较上月`
              }
              let name1 = `较上月`
              if (params[0].axisValue.length < 8) {
                name1 = `较去年`
              }
              return [
                `${`<span style="` + temMarkerStyle + `"></span>`}` +
                  params[0].axisValue +
                  `<i style="padding:0 6px"></i> ` +
                  params[0].value +
                  `<i style="padding:0 12px"></i> ` +
                  `${name}` +
                  `<span style="padding:0 6px;color:${
                    params[2].value > 0 ? `#1DEFB3` : `#FF8D00`
                  }">${params[2].value}%</span> `,
                `${`<span style="` + humMarkerStyle + `"></span>`}` +
                  params[1].axisValue +
                  `<i style="padding:0 6px"></i> ` +
                  params[1].value +
                  `<i style="padding:0 12px"></i> ` +
                  `${name1}` +
                  `<span style="padding:0 6px;color:${
                    params[3].value > 0 ? `#1DEFB3` : `#FF8D00`
                  }">${params[3].value}%</span> `,
              ].join(`<br>`)
            } else {
              return [
                params[0].axisValue,
                `${`<span style="` + temMarkerStyle + `"></span>`}` +
                  `今年` +
                  `<i style="padding:0 6px"></i> ` +
                  params[0].value,
                `${`<span style="` + humMarkerStyle + `"></span>`}` +
                  `去年` +
                  `<i style="padding:0 6px"></i> ` +
                  params[1].value,
              ].join(`<br>`)
            }
          },
        },
        grid: {
          top: `20%`,
          left: `4%`,
          right: `4%`,
          bottom: `10%`,
          containLabel: true,
        },
        xAxis: {
          type: `category`,
          boundaryGap: true,
          axisLabel: {
            // formatter: `{value}`,
            textStyle: {
              color: `#c7d6f2`,
            },
          },
          axisLine: {
            lineStyle: {
              color: `#D9D9D9`,
            },
          },
          data: this.area,
        },
        yAxis: {
          type: `value`,
          name: this.unit,
          axisLabel: {
            textStyle: {
              color: `#65ABE7`,
            },
          },
          nameTextStyle: {
            color: `#65ABE7`,
            fontSize: 12,
            lineHeight: 40,
          },
          splitLine: {
            lineStyle: {
              type: `dashed`,
              color: `#182D46`,
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: this.lineName.thisName,
            type: `line`,
            smooth: this.smooth == `true` ? true : false,
            symbol: `none`,
            symbolSize: 8,
            zlevel: 3,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: `#23CF9C30`,
                    },
                    {
                      offset: 1,
                      color: `#23CF9C10`,
                    },
                  ],
                  false
                ),
                shadowColor: `#23CF9C10`,
                shadowBlur: 10,
              },
            },
            data: this.dataArray.thisYear,
          },
          {
            name: this.lineName.lastName,
            type: `line`,
            smooth: this.smooth,
            symbol: `none`,
            symbolSize: 8,
            zlevel: 3,
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: `#578FFB30`,
                    },
                    {
                      offset: 1,
                      color: `#578FFB10`,
                    },
                  ],
                  false
                ),
                shadowColor: `#578FFB10`,
                shadowBlur: 10,
              },
            },
            data: this.dataArray.LastYear,
          },
          {
            data: this.dataArray.comparisonLastDay,
            type: `line`,
            symbolSize: 0, // symbol的大小设置为0
            showSymbol: false, // 不显示symbol
            lineStyle: {
              width: 0, // 线宽是0
              color: `rgba(0, 0, 0, 0)`, // 线的颜色是透明的
            },
          },
          {
            data: this.dataArray.comparisonLastYear,
            type: `line`,
            symbolSize: 0, // symbol的大小设置为0
            showSymbol: false, // 不显示symbol
            lineStyle: {
              width: 0, // 线宽是0
              color: `rgba(0, 0, 0, 0)`, // 线的颜色是透明的
            },
          },
        ],
      }
      myChart.setOption(this.option, true)
    },
  },
  beforeDestroy() {},
}
</script>

<style lang="less" scoped>
.wavylineBox {
  width: 448px;
  height: 266px;
  .chartsdom {
    width: 100%;
    height: 100%;
  }
}
</style>