echarts折线图多条折线图效果

实例代码

<template>
  <div class="echarts1" ref="echarts">

  </div>
</template>

<script>
export default {
  name: 'echarts1',
  components: {},
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      status: '',
      list: ['1月', '2月', '3月', '4月', '5月'],
      active: false,
      isFullscreen: false
    }
  },
  watch: {
    isFullscreen () {
      if (!this.isFullscreen) {
        this.active = false
        if (this.active) {
          this.list = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        } else {
          this.list = ['1月', '2月', '3月', '4月', '5月']
        }
        this.$nextTick(() => {
          this.drawLine()
        })
      }
    },
  },
  mounted () {
    this.drawLine()
  },
  methods: {
    getactive () {
      this.active = !this.active
      if (this.active) {
        this.list = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      } else {
        this.list = ['1月', '2月', '3月', '4月', '5月']
      }
      this.$nextTick(() => {
        this.drawLine()
      })
    },
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(15, 41, 104, 0)'
              },
                {
                  offset: 1,
                  color: 'rgba(15, 41, 104, 0.5)'
                }
              ], false),
              width: 40
            }
          }
        },
        legend: {
          icon: 'circle',
          top: 0,
          right: 20,
          left: '50%',
          itemWidth: 14,
          itemHeight: 14,
          itemGap: 10,
          textStyle: {
            color: '#fff',
            fontSize: '11'
          },
          data: ['订单数', '用户数', '车位数', '订单金额'],
        },
        grid: {
          left: '30px',
          right: '30px',
          bottom: '30px',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: 'rgba(39, 76, 129, 0.26)'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
              color: 'rgba(130, 153, 191, 1)'
            }
          },
          data: that.list
        }],
        yAxis: [{
          type: 'value',
          show: false,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: '#57617B'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14
            }
          },
          splitLine: {
            lineStyle: {
              color: '#57617B'
            }
          }
        }],
        series: [{
          name: '订单数',
          type: 'line',
          smooth: true,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(254, 168, 157, 1)'
            }
          },
          data: [96.3, 96.4, 97.5, 95.6, 98.1, 94.8, 89.6, 94.1, 80.1, 52.4, 75.8, 94.7]
        }, {
          name: '用户数',
          type: 'line',
          smooth: true,
          lineStyle: {
            normal: {
              width: 1
            }
          },
          itemStyle: {
            normal: {
              color: 'rgba(0, 193, 255, 1)'
            }
          },
          data: [97.3, 99.2, 99.3, 100.0, 99.6, 90.6, 80.0, 91.5, 69.8, 67.5, 90.4, 84.9]
        },
          {
            name: '车位数',
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(6, 239, 168, 1)'
              }
            },
            data: [84.2, 81.0, 67.5, 72.1, 43.7, 88.5, 91.9, 101.8, 79.7, 87.6, 92.9, 0]
          },
          {
            name: '订单金额',
            type: 'line',
            smooth: true,
            lineStyle: {
              normal: {
                width: 1
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(253, 203, 0, 1)'
              }
            },
            data: [72.1, 43.7, 88.5, 91.9, 101.8, 79.7, 87.6, 92.9, 0, 87.6, 92.9, 0,]
          }]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
  }
}
</script>

<style lang="scss" scoped>
.echarts1 {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>

实例汇总

echarts折线图实例汇总