Echarts 折线图样式效果区域图

echarts yekong

Echarts 折线图样式效果区域图

    drawLine() {
      var that = this
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          icon: 'rect',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: ['客流', '进入', '离开'],
          left: '4%',
          textStyle: {
            fontSize: 12,
            color: '#F1F1F3'
          }
        },
        grid: {
          left: '5%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          show: true,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: 'rgba(255, 255, 255, 0.06)',
            }
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#1249D5'
            }
          },
          axisLabel: {
            margin: 10,
            interval: 0,
            textStyle: {
              fontSize: 12,
              color: 'rgba(179, 216, 221, 1)'
            }
          },
          data: ['00', '01', '02', '03', '04', '00', '01', '02', '03', '04', '00', '01', '02', '03', '04']
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.06)'
            }
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 12,
              color: 'rgba(179, 216, 221, 1)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255, 255, 255, 0.06)'
            }
          }
        }],
        series: [
          {
            name: '客流',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(33, 190, 132, 1)'
                }, {
                  offset: 0.8,
                  color: 'rgba(33, 190, 132, 0.2)'
                }], false),
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(33, 190, 132, 1)',
                borderColor: 'rgba(33, 190, 132, 1)',
                borderWidth: 2
              }
            },
            data: [26, 0, 277, 216, 79, 26, 0, 277, 216, 79, 26, 0, 277, 216, 79,]
          },
          {
            name: '进入',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(7, 208, 229, 1)'
                }, {
                  offset: 0.8,
                  color: 'rgba(7, 208, 229, 0.2)'
                }], false),
                shadowColor: 'rgba(7, 208, 229, 0.5)',
              }
            },
            itemStyle: {
              normal: {
                color: '#00D2FD',
                borderColor: '#00D2FD',
                borderWidth: 2
              }
            },
            data: [79, 26, 0, 277, 216, 79, 26, 0, 277, 216, 79, 26, 0, 277, 216,]
          },
          {
            name: '离开',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: true,
            lineStyle: {
              normal: {
                width: 2
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(255, 229, 53, 1)'
                }, {
                  offset: 0.8,
                  color: 'rgba(255, 229, 53, 0.2)'
                }], false),
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(255, 229, 53, 1)',
                borderColor: 'rgba(255, 229, 53, 1)',
                borderWidth: 2
              }
            },
            data: [216, 79, 26, 0, 277, 216, 79, 26, 0, 277, 216, 79, 26, 0, 277,]
          },
        ]
      };
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢