JT-CIM/src/views/Map3d/components/EchartsLine.vue

<template>
  <div class="echarts-line" :id="ids"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  props: {
    legendChecked: {
      // 图例
      default: true
    },
    ids: {
      // id
      type: String,
      default: 'echartsline'
    },
    fontColor: {
      // 字体颜色
      type: String,
      default: '#89949F'
    },
    yLine: {
      // x轴分割线
      default: false
    },
    chartData: {
      // echarts·数据
      default: function () {
        return []
      }
    },
    // Y轴单位
    Yunit: {
      type: Boolean,
      default: true
    },
    theme: {
      default: function () {
        return ['#3da4fe', '#23cef2', '#65b664', '#00FDCB']
      }
    }
  },
  watch: {
    chartData: {
      // 深度监听，可监听到对象、数组的变化
      handler() {
        this.$nextTick(() => {
          if (this.chartData && this.chartData.length > 0) {
            this.dataValue(this.chartData)
          }
        })
      },
      deep: true, // 深度监听，可监听到对象、数组的变化
      immediate: true // 立刻执行
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {
    dataValue(newVal) {
      if (newVal && newVal.length > 0) {
        const seriesConfig = []
        const Yconfig = []
        const unit = []
        for (let i = 0; i < newVal.length; i++) {
          if (newVal[i].areaStyle) {
            const obj = {
              type: 'line',
              name: newVal[i].name,
              data: newVal[i].yData,
              smooth: newVal[i].smooth ? newVal[i].smooth : false,
              showSymbol: newVal[i].showSymbol ? newVal[i].showSymbol : false,
              lineStyle: {
                color: newVal[i].lineColor
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: newVal[i].areaColor
                  },
                  {
                    offset: 1,
                    color: 'rgba(0,0,0,0)'
                  }
                ])
              }
            }
            if (i === 1) {
              obj.yAxisIndex = 1
            }
            seriesConfig.push(obj)
            if (this.Yunit) {
              Yconfig.push({
                type: 'value',
                name:
                    (newVal.length > 1 ? newVal[i].name : '单位') +
                    '：' +
                    newVal[i].unit,
                nameTextStyle: {
                  fontSize: 12,
                  color: this.fontColor
                },
                splitNumber: 5,
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: this.yLine,
                  lineStyle: {
                    color: 'rgba(153, 153, 153, 0.3)'
                  }
                },
                axisLine: {
                  show: false
                },
                axisLabel: {
                  color: this.fontColor,
                  fontSize: 12
                }
              })
            } else {
              Yconfig.push({
                type: 'value',
                nameTextStyle: {
                  fontSize: 12,
                  color: this.fontColor
                },
                splitNumber: 5,
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: this.yLine,
                  lineStyle: {
                    color: 'rgba(153, 153, 153, 0.3)'
                  }
                },
                axisLine: {
                  show: false
                },
                axisLabel: {
                  color: this.fontColor,
                  fontSize: 12
                }
              })
              Yconfig[0].name = '（m³/s）'
            }

            unit.push(newVal[i].unit)
          } else {
            seriesConfig.push({
              type: 'line',
              name: newVal[i].name,
              data: newVal[i].yData,
              smooth: newVal[i].smooth ? newVal[i].smooth : false,
              symbolSize: newVal[i].showSymbol ? newVal[i].showSymbol : false,
              lineStyle: {
                color: newVal[i].lineColor
              }
            })
            Yconfig.push({
              type: 'value',
              name: newVal[i].name + '：' + newVal[i].unit,
              nameTextStyle: {
                fontSize: 12,
                color: this.fontColor
              },
              splitNumber: 5,
              axisTick: {
                show: false
              },
              splitLine: {
                show: this.yLine,
                lineStyle: {
                  color: '#e5e5e5'
                }
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                color: this.fontColor,
                fontSize: 12
              }
            })
            unit.push(newVal[i].unit)
          }
        }
        this.setEcharts(seriesConfig, Yconfig, newVal[0].xData, unit)
      }
    },
    setEcharts(series, Yconfig, dataAxis, unit) {
      let legend = []
      if (this.legendChecked) {
        legend = this.chartData.map((data, i) => {
          return {
            name: data.name,
            icon: 'roundRect',
            itemStyle: series[i].lineStyle
          }
        })
      } else {
        legend = []
      }
      const myChart = echarts.init(document.getElementById(this.ids))
      const option = {
        color: this.theme,
        tooltip: {
          trigger: 'axis',
          formatter: function (data) {
            if (!data.length) return
            if (data.length > 1) {
              let html = ''
              html = `<div class="toolTips"><div style="font-size: 12px;color: #fff">${data[0].axisValue}</div>`
              for (let i = 0; i < data.length; i++) {
                html += `<div style="font-size: 12px;color: #fff">${series[i].name}: ${data[i].value} ${unit[i]}</div>`
              }
              html += '</div>'
              return html
            } else {
              return `<div class="toolTips"><div style="font-size: 12px;color: #fff">${data[0].axisValue}: ${data[0].value} ${unit[0]}</div></div>`
            }
          },
          backgroundColor: '#487892',
          borderWidth: 0,
          padding: [3, 5],
          axisPointer: {
            lineStyle: {
              color: '#299acb'
            }
          }
        },
        legend: {
          top: 0,
          right: 'center',
          width: 240,
          data: legend,
          itemWidth: 15,
          itemHeight: 5,
          show: true,
          selectedMode: false,
          textStyle: {
            color: this.fontColor
          }
        },
        xAxis: {
          type: 'category',
          data: dataAxis,
          boundaryGap: false,
          axisTick: {
            show: true,
            inside: true
          },
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(135,142,148,0.5)'
            }
          },
          axisLabel: {
            color: this.fontColor,
            fontSize: 12
          }
        },
        yAxis: Yconfig,
        grid: {
          left: 20,
          right: 35,
          top: this.legendChecked ? 30 : 30,
          bottom: 0,
          containLabel: true
        },
        series: series
      }
      myChart.clear()
      myChart.setOption(option, true)
    }
  }
}
</script>

<style scoped lang="scss">
.echarts-line {
  width: 80%;
  height: 80%;
}
</style>