Echarts-折线图

1.案例1

1.1代码

option = {
    "tooltip": {
        "trigger": "axis",
        "backgroundColor": "rgba(32, 33, 36,.7)",
        "borderColor": "rgba(32, 33, 36,0.20)",
        "borderWidth": 10,
        "textStyle": {
            "color": "#fff",
            "fontSize": "10"
        },
        "axisPointer": {
            "type": "cross",
            "label": {
                "backgroundColor": "#6a7985"
            }
        }
    },
    "legend": {
        "textStyle": {
            "color": "white"
        },
        "icon": "roundRect",
        "itemHeight": 2,
        "data": [
            "发电量"
        ]
    },
    "grid": {
        "top": "15%",
        "left": "6%",
        "right": "6%",
        "bottom": "19%",
        "containLabel": true
    },
    "xAxis": {
        "type": "category",
        "boundaryGap": false,
				         "axisLabel": {
        "color": "white"
    },
        "data": [
            "08:00",
            "09:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00"
        ]
    },
    "yAxis": {
        "type": "value",
        "splitLine": {
            "show": false
        },
        "axisLabel": {
            "show": false
        }
    },
    "series": [

        {
            "name": "发电量",
            "type": "line",
            "data": [
                100,
                170,
                300,
                1500,
                2700,
                3000,
                2400,
                1800,
                1400,
                800,
                400,
                150,
                80
            ],
            "smooth": 0.8,
            "color": "#FF5722"
        }
    ]
}

1.2.效果展示

2案例2 

2.1代码

option = {
  title: {
    textStyle: {
      color: '#fff' // 标题文字颜色为白色
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    textStyle: {
      color: 'white'
    },
    top: -1,
    icon: 'roundRect',
    itemHeight: 2,
  },
  toolbox: {
    feature: {
      saveAsImage: false
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['17日', '18日', '19日', '20日', '21日', '22日', '23日', '24日', '25日', '26日', '27日', '28日', '29日', '30日', '31日', '1日'],
      axisLabel: {
        textStyle: {
          color: '#fff' // X轴文字颜色为白色
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false // 隐藏Y轴的横线
      },
      axisLabel: {
        textStyle: {
          color: '#fff' // Y轴文字颜色为白色
        }
      }
    }
  ],
  series: [
    {
      name: '水',
      type: 'line',
      stack: 'Total1',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      areaStyle: {
        opacity: 0.2
      },
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#00e5e7'
      },
      data: [2.7,2.9,2.8,2.7,2.8,2.7,2.6,2.8,2.8,2.8,2.5,2.6,2.5,2.4,2.5,2.6]
    },
    {
      name: '电力',
      type: 'line',
      stack: 'Total2',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      areaStyle: {
        opacity: 0.2
      },
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#ff5549'
      },
      data: [2.3,1.9,2.0,1.9,1.8,1.8,1.9,2.1,1.8,1.9,1.8,1.6,1.3,1.5,1.7,1.7]
    },
    {
      name: '天然气',
      type: 'line',
      stack: 'Total3',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      areaStyle: {
        opacity: 0.2
      },
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#0066ff'
      },
      data: [1.5,1.8,1.7,1.5,1.6,1.8,1.7,1.3,1.6,1.4,1.3,1.4,1.3,1.2,1.1,1.2]
    },
    {
      name: '氢气',
      type: 'line',
      stack: 'Total4',
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      areaStyle: {
        opacity: 0.2
      },
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#f5b7da'
      },
      data: [1.5,1.6,1.5,1.7,1.5,1.8,1.5,1.6,1.6,1.5,1.6,1.6,1.5,1.5,1.6,1.5]
    }
  ]
}

2.2效果展示

3.案例3

3.1代码

option = {
  title: {
    textStyle: {
      color: '#fff' // 标题文字颜色为白色
    }
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    textStyle: {
      color: 'white'
    },
    left:'5%',
    icon:'none',
  //  top: -1,
   // icon: 'rect',
 // itemHeight: 8, // 调整方块高度
 // itemWidth: 16, // 调整方块宽度
    
  },
  toolbox: {
    feature: {
      saveAsImage: false
    }
  },
  grid: {
	   top:'10%',
    left: '5%',
    right: '4%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00', '22:00'],
      axisLabel: {
        textStyle: {
          color: '#fff' // X轴文字颜色为白色
        }
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      splitLine: {
        show: false // 隐藏Y轴的横线
      },
      axisLabel: {
              show: false ,// 隐藏Y轴上的数值
        textStyle: {
          color: '#fff' // Y轴文字颜色为白色
        }
      },
    }
  ],
  series: [
    {
      name: '充电功率',
      type: 'line',
      stack: 'Total1',
			      areaStyle: {
        opacity: 0.1
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 5,
      emphasis: {
        focus: 'series'
      },
      itemStyle: {
        color: '#00e5e7'
      },
      data: [2.7,2.9,2.8,2.7,2.8,2.7,2.6,2.8,2.8,2.8,2.5,2.6,2.5,2.4,2.5,2.6]
    }
  ]
}
     

3.2效果展示