Echart 渐变颜色、图例文本与图标的布局

最新推荐文章于 2024-07-31 00:25:36 发布

微笑边缘的金元宝

最新推荐文章于 2024-07-31 00:25:36 发布

阅读量644

点赞数 7

文章标签：前端 javascript echarts

本文链接：https://blog.csdn.net/hemister/article/details/137086516

版权

效果：

在这里插入图片描述

代码：

<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>
  
  

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, 'dark', {
      renderer: 'svg',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    option = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: ''
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    top: '3%',
    align: 'right',
    itemGap: 40,
    data: [
      {
        name: '1',
        icon: 'rect',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(255, 252, 150)'
            },
            {
              offset: 1,
              color: 'rgb(233, 228, 66)'
            }
          ])
        }
      },
      {
        name: '2',
        icon: 'rect',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(233, 228, 66)'
            },
            {
              offset: 1,
              color: 'rgb(160, 229, 112)'
            }
          ])
        }
      },
      {
        name: '3',
        icon: 'rect',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(160, 229, 112)'
            },
            {
              offset: 1,
              color: 'rgb(31, 230, 209)'
            }
          ])
        }
      },
      {
        name: '4',
        icon: 'rect',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgb(31, 230, 209)'
            },
            {
              offset: 1,
              color: 'rgb(190, 41, 255, 1)'
            }
          ])
        }
      },
    ],
    textStyle: { // 设置图例文字的样式  
      fontSize: 18, // 设置字体大小为16像素 
      color: '#ffffff' 
    }  
  },
  toolbox: {
    feature: {
      // saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '12%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['', '一', '二', '三', '四', '五', '六', '七']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 1,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 252, 150)'
          },
          {
            offset: 1,
            color: 'rgb(233, 228, 66)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [0, 8.2, 8, 7.5, 6.5, 6, 5.5, 6.5]
    },
    {
      name: '2',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 1,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(233, 228, 66)'
          },
          {
            offset: 1,
            color: 'rgb(160, 229, 112)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [0, 4, 3, 5, 5, 4, 3, 5]
    },
    {
      name: '3',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 1,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(160, 229, 112)'
          },
          {
            offset: 1,
            color: 'rgb(31, 230, 209)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [0, 7.9, 7.8, 7.5, 7.6, 7.9, 8, 7.3]
    },
    {
      name: '4',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 1,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(31, 230, 209)'
          },
          {
            offset: 1,
            color: 'rgb(190, 41, 255, 1)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [0, 8, 8.2, 9.2, 8.8, 8.6, 8, 7.8]
    },
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>