echarts折线图渐变

最新推荐文章于 2024-08-05 11:28:39 发布

qq_41521625

最新推荐文章于 2024-08-05 11:28:39 发布

阅读量542

点赞数

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_41521625/article/details/127431585

本文介绍了如何在Echarts 5.0版本中创建具有渐变效果的折线图，通过调整配置项实现视觉上的平滑过渡，提升图表的美观度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样式如下：
在这里插入图片描述
echarts.min.js版本为5.0

代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <!-- <script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
  <script type="text/javascript" src="0511echarts.min.js"></script>
  <style type="text/css">
    *{margin:0;padding:0;}
    html,body{height:100%;}
    #chart1{height:100%;}
  </style>
</head>
<body>
  <div id="chart1">
  </div>
</body>
</html>
<script type="text/javascript">
    var myChartLine = echarts.init(document.getElementById('chart1'));
    data = [
      ["2000-05", 116], ["2000-06", 129], ["2000-07", 135], ["2000-08", 86], ["2000-09", 73], ["2000-10", 85], ["2000-11", 73],["2000-12", 68], 
      ["2001-06", 92], ["2001-07", 130], ["2001-08", 245], ["2001-09", 139], ["2001-10", 115], ["2001-12", 111], ["2001-06", 309],
        ["2001-07", 206], ["2001-08", 137], ["2001-09", 128], ["2001-10", 85], ["2001-11", 94]
    ];
    
    var dateList = data.map(function (item) {
      return item[0];
    });
    var valueList = data.map(function (item) {
      return item[1];
    });
    option = {
        title: {
          left: 'left',
          text: 'Gradient along the y axis'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '9%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}//将统计图保存为
          },
          right:100,
          top:0
        },
        xAxis: {
          type: 'category',
          boundaryGap:false,
          data:dateList,
        },
        yAxis: {
          type: 'value'
          /*min:0,
          max:60,
          splitNumber:6*/
        },
        visualMap: {
          min: 0,
          max: 300,
          left: 'left',
          top: 'bottom',
          color: ["#fa709a","#38f9d7","#fee140"],//渐变颜色从上至下
          calculable: true,
          show:false
        },
        series: [
          {
            data: valueList,
            type: 'line',
            name: "",
            lineStyle: {
              normal: {
                  width: 3
              },
            },
            itemStyle: {
                "color": {
                    "type": "linear",
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "globalCoord": false
                }
            },
            smooth: true,
          }
        ]
    };
//为echarts对象加载数据
myChartLine.setOption(option);
</script>