效果图

//24小时发车趋势图

var trend = document.getElementById('fachetrend')
var trenddata = [['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],
[5, 40, 30, 40, 20, 28, 32, 22, 18, 30, 33, 30]]
function trendchart(dom, data) {


  var trendchart = echarts.init(dom)

  var optiontrend = {
    tooltip: {
      trigger: 'axis',
      showContent: false,//关闭原有样式
      axisPointer: {
        type: 'none'
      }
    },
    grid: { //调整地图位置
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: { //横坐标样式
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#2cf4fd',
          fontSize: 16,
        }
      },
      data: data[0]
    },
    yAxis: { //纵坐标样式
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: 'rgba(0, 188, 208,0.3)'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#2cf4fd',
          fontSize: 16,
        }
      },
    },
    graphic: [ //地图的背景  这里放的是图片，也可以是纯颜色背景
      {
        type: 'image',
        style: {
          image: '../img/bgimg/24bghour.png',
          x: 70,
          y: 35,
          width: 680,
          height: 220
        }
      }
    ],
    series: [
      {
        name: '数量',
        type: 'line',
        areaStyle: { //折线区域颜色
          color: '#091f3e',
        },
        symbol: 'image://../img/bgimg/circle.png',
        symbolSize: 20,
        showSymbol: false,
        itemStyle: {
          normal: {
            lineStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [					//设置折线渐变色
                { offset: 0, color: "#1e66e1" },
                { offset: 1, color: "#2cf4fd" }
              ])
            }
          }
        },
        label: { //鼠标放上去显示数值
          show: true,
          color: '#d9fcff',
          fontWeight: 'bold',
          offset: [0, -6],
          align: 'center',
          verticalAlign: 'middle',
          backgroundColor: { //设置为图片
            image: '../img/bgimg/zhexiansh.png'
          },
          width: 30,
          height: 130,
        },
        data: data[1]
      }
    ]
  };
  trendchart.setOption(optiontrend);
}
trendchart(trend, trenddata)