Echarts 折线图 实例记录

echarts yekong

wanjunshijiecom 2021-08-31 at 16.35.00@2x

drawLine () {
      window.addEventListener('resize', this.drawLine)
      let myChart = this.$echarts.init(this.$refs.echarts)
      var option = {
        grid: {
          left: '5%',
          right: '3%',
          top: '15%',
          bottom: '10%',
          containLabel: true
        },
        tooltip: {
          show: true,
          trigger: 'axis'
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              color: 'rgba(150, 175, 220, 1)',
              fontSize: 13
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#397cbc'
              }
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(21, 58, 121, 0.66)',
                type: 'dashed'
              }
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
          }
        ],
        yAxis: [
          {
            type: 'value',
            min: 0,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: 'rgba(150, 175, 220, 1)'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#1E4588'
              }
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(21, 58, 121, 1)',
                type: 'dashed'
              }
            },
          }
        ],
        series: [
          {
            name: '实际考评统计',
            type: 'line',
            symbol: 'circle',
            symbolSize: 5,
            itemStyle: {
              normal: {
                color: '#FC9A0B',
                lineStyle: {
                  color: '#39ECCE',
                  width: 1
                },
                areaStyle: {
                  //color: '#94C9EC'
                  color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                    offset: 0,
                    color: 'rgba(60, 247, 213, 0.1)'
                  }, {
                    offset: 1,
                    color: 'rgba(60, 247, 213, 0.6)'
                  }]),
                }
              }
            },
            markPoint: {
              itemStyle: {
                normal: {
                  color: 'red'
                }
              }
            },
            data: [290, 330, 330, 330, 330, 330, 330, 330, 330, 330, 330, 330, 330]
          },
        ]
      }
      myChart.clear()
      myChart.resize()
      myChart.setOption(option)
    },
喜欢