echarts 图表类折线图堆叠

最新推荐文章于 2025-05-19 11:38:42 发布

原创最新推荐文章于 2025-05-19 11:38:42 发布 · 779 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #vue.js

echarts 专栏收录该内容

15 篇文章

订阅专栏

这篇博客介绍了如何利用ECharts库创建具有区域透明度和圆滑曲线的图表。示例中展示了每日进出村高峰的数据，通过设置颜色、图例、网格、坐标轴以及线和区域样式，实现了一种视觉效果良好的数据展示方式。

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

功能点：包含区域透明度，圆滑曲线

效果图

请添加图片描述
鼠标点移动到点位置效果：

//每日进出村高峰
      optionLeft1:{
        //图例颜色
        color: ['#efff00', '#00ff37'],
        //图例文字
        legend: {
          data: ['进村', '出村'],
          right: '5%',
          textStyle:{//图例文字的样式
            color:'#8effff',
            fontSize:12
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '10%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['4-6','6-8', '8-10', '10-12', '12-14', '14-16', '16-18','18-20','20-22','22-24'],
            //x轴文字
            axisLabel: {
              color: "#fff",
            },
            //x轴线
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          }
        ],
        yAxis: [
          {
            type: 'value',
            //y轴文字
            axisLabel: {
              color: "#fff",
            },
            //y轴线
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
            //y轴区域内【x轴平行线】
            splitLine: {
              show: true,
              lineStyle:{
                type:'dashed',
                color: "#4f4f9d",
              }
            },
          }
        ],
        series: [
          {
            name: '进村',
            type: 'line',
            //圆滑的曲线
            smooth: true, 
            //被包围的区域
            areaStyle: {
              color: "#efff00",
              opacity:0.2
            },
            //区域线
            lineStyle: {
              color: "#efff00",
              width:1.5
            },
            emphasis: {
              focus: 'series'
            },
            data: [3, 10, 24, 288, 195, 35, 156, 313, 441, 79],
          },
          {
            name: '出村',
            type: 'line',
            //圆滑的曲线
            smooth: true,
            //被包围的区域
            areaStyle: {
              color: "#00ff37",
              opacity:0.2
            },
            //区域线
            lineStyle: {
              color: "#00ff37",
              width:1.5
            },
            emphasis: {
              focus: 'series'
            },
            data: [24,382, 353, 36, 308, 42, 98, 148, 88, 35],
          },
        ]
      },