echarts折线图背景颜色渐变

小夏同学呀

已于 2024-08-05 11:28:54 修改

阅读量682

点赞数 2

分类专栏： Echarts 文章标签： echarts 前端 vue.js

于 2024-08-05 11:28:39 首次发布

本文链接：https://blog.csdn.net/web5219/article/details/140922510

版权

Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、效果图

在这里插入图片描述

二、代码

{
    title: {
      text: '单位: 种',
      textStyle: {
        color: '#dbdddf',
        fontSize: 10
      }
    },
    grid: {
      top: '15%',
      // containLabel: true // 设置 grid 组件包含坐标轴的标签
      bottom: '25',
      left: '40',
      right: '15'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisTick: {
          show: false
        },
        data: ['E190', 'AJ27', 'B38M', 'B737', 'A319', 'A21N', 'A20N'],
        axisLabel: {
          fontSize: 10,
          color: '#8b9299'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 1000,
        interval: 200,
        axisLabel: {
          fontSize: 10,
          color: '#8b9299'
        },
        //坐标轴线样式
        splitLine: {
          show: false
        },
        splitArea: {
          show: true,
          areaStyle: {
            color: ['#162f45', '', '#162f45', '', '#162f45'] // 每行的背景色，按照类别的顺序设置
          }
        },
        axisLine: { show: true, lineStyle: { color: '#425769' } }
      }
    ],
    series: [
      {
        data: [700, 780, 720, 600, 630, 670, 820],
        type: 'line',
        symbolSize: 4, //Number类型 设置圆点大小
        smooth: true, //true曲线; false折线
        lineStyle: {
          width: '1px' // 设置线条粗细为5
        },
        itemStyle: {
          normal: {
            color: '#1cc697', //改变折线点的颜色
            lineStyle: {
              color: '#1cc697', //改变折线颜色
              type: 'solid'
            }
          }
        },
        areaStyle: {
          //折线图颜色半透明
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(31, 218, 163, 0.4)' // 上部颜色
            },
            {
              offset: 1,
              color: 'rgba(31, 218, 163, 0)' // 下部颜色
            }
          ])
        }
      }
    ]
  }