echarts折线面积图

最新推荐文章于 2024-03-17 17:51:44 发布

不吃糖的哼哼

最新推荐文章于 2024-03-17 17:51:44 发布

阅读量550

点赞数 9

分类专栏： echarts 文章标签： echarts javascript linux

本文链接：https://blog.csdn.net/Y13349887034/article/details/135429383

版权

echarts 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

firstArr:[22,44,32,43.55,23],
secondArr:[43,33,33,55,22,11],
thirdArr:[33,56,63,65,12,54],
fourthArr:[23,44,56,74,12,48],

const options = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {},
  },
  grid: {
    top: '20%',
    bottom: '10%',
    left:'10%',
    right:'2%'
  },
  legend:{
    icon: 'circle',
    itemHeight:9,//改变圆圈大小
    textStyle:{
      fontSize:14,
      color:['#d7e83f','#01ffff','#ff9640','#26e33a'],
      padding:[0,3 ,0 ,-5]
    }, 
    left:50,
    top:20,
  },
  xAxis: [
  ],
  yAxis: [
  ],
  series: [
    {
    },{
    },{
    },{
      name: '玉米',
      type: 'line',
      itemStyle: {
        color: '#26e33a',
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(33, 229, 58,0.3)',
          },
          {
            offset:0.95,
            color: 'rgba(33, 229, 58,0)',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data:_this.fourthArr,
    },
  ],
};