1.定义容器

<div ref="canvas"></div>

2.代码

  props: {   
    seriesData: [Array, Object, String], // 主要显示的数据    
    ySplintLine: {
      type: Boolean,
      default: false
    }, // 是否显示y轴的分割线 
    legend: Object, // 要显示的元素地图
    markLine: { // 辅助线
      type: [Array, Object, String],
      default: ''
    },
    relVal: { // 单位
      type: String,
      default: ' '
    }
  },
  data() {
    return {
      charts: {}
    }
  },
  mounted() {
    this.draw()
    this.formatDate()
  },
  updated() {
    this.draw()
  },
  watch: {
    seriesData() {
      this.draw()
    },
    xData() {
      this.draw()
    }
  },
  methods: {
    formatDate(time, format) { //格式化日期
      if(time != null || time != undefined){
        var t = new Date(time)
        var tf = function(i) {
          return (i < 10 ? '0' : '') + i
        }
        return format.replace(/yyyy|MM|dd|HH|mm|ss/g, function(a) {
          switch (a) {
            case 'yyyy':
              return tf(t.getFullYear())
              break
            case 'MM':
              return tf(t.getMonth() + 1)
              break
            case 'mm':
              return tf(t.getMinutes())
              break
            case 'dd':
              return tf(t.getDate())
              break
            case 'HH':
              return tf(t.getHours())
              break
            case 'ss':
              return tf(t.getSeconds())
              break
          }
        })
      }
    },
    draw() {
      const that = this
      const myChart = echarts.init(this.$refs.canvas)
      this.charts = myChart
      /* var data = [
        //   开始充电时间  结束充电时间  开始电量  结束电量
        [1402233166999, 1402333166999, 52, 80],
        [1402343166999, 1402533166999, 52, 90]
      ]*/
      var data = this.seriesData
      data = echarts.util.map(data, function(item, index) {
        return {
          value: item,         
          itemStyle: {
            emphasis: {
              borderRadius: 30
            },
            normal: {
              borderRadius: [5, 5, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(0, 99, 191, 0.1)' },
                { offset: 1, color: 'rgba(0, 226, 255, 0.5)' }
              ]),
              borderColor: '#00E2FF',
              borderWidth: 3
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: 'rgba(0, 99, 191, 0.1)' },
                { offset: 1, color: 'rgba(0, 226, 255, 0.5)' }
              ])
            }
          }
        }
      })
      /*
                  params：包含了当前数据信息和坐标系的信息。
                  api：是一些开发者可调用的方法集合。
                  api.value(...)，意思是取出 dataItem 中的数值。例如 api.value(0) 表示取出当前 dataItem 中第一个维度的数值。
                  api.coord(...)，意思是进行坐标转换计算。例如 var point = api.coord([api.value(0), api.value(1)]) 表示 dataItem 中的数值转换成坐标系上的点。
                  api.size(...) 函数，表示得到坐标系上一段数值范围对应的长度。
                  shape 属性描述了这个矩形的像素位置和大小。
              */
      function renderItem(params, api) {
        /* console.log(params)*/
        var yValue = api.value(3) - api.value(2) // 3,15,12,22,7,17
        var start = api.coord([api.value(0), yValue]) // 将数据值映射到坐标系上。
        var size = api.size([api.value(1) - api.value(0), yValue])
        var end = api.coord([api.value(2), api.value(3)])
        var style = api.style()
        // 这里返回为这个 dataItem 构建的图形元素定义。
        return {
          type: 'rect', // 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
          shape: { // shape 属性描述了这个矩形的像素位置和大小。
            x: start[0],
            y: 1 / params.coordSys.y + end[1],
            width: size[0],
            height: size[1],
            r: [0, 0, 0, 0] //定义圆角：【左上、右上、右下、左下角】数字看需求定
          },
          style: style // 用 api.style(...) 得到默认的样式设置。这个样式设置包含了option 中 itemStyle 的配置和视觉映射得到的颜色。

        }
      }
      myChart.setOption({
        // 指定图表的配置项和数据
        tooltip: {
          trigger: 'axis', // 鼠标经过提示
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: 'none' // 默认为直线，可选为：'line' | 'shadow'
          },
          // 在这里设置
          /* formatter: '{a}:{c}' + this.relVal*/
          formatter: function(params) {
            var rel = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              const value1 = new Date(params[i].value[0])
              const value2 = new Date(params[i].value[1])
              const oTime = that.formatDate(value1, 'yyyy-MM-dd HH:mm:ss')
              const oTime2 = that.formatDate(value2, 'yyyy-MM-dd HH:mm:ss')
              rel +=  that.$t('table.alarmStartTime') + '：' + oTime + '<br/>' + that.$t('table.alarmEndTime') + '：' + oTime2 + '<br/>' + that.$t('table.startBattery') + '：' + params[i].value[2] + '<br/>' + that.$t('table.endBattery') + '：' + params[i].value[3]
            }
            return rel
          }
        },
        grid: {
          x: 50,
          y: 25,
          x2: 30,
          y2: 35
        },
        xAxis: {
          // scale: true, //是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
          splitLine: { // 是否显示分隔线。默认数值轴显示，类目轴不显示。
            show: false,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisTick: {
            boundaryGap: true,
            alignWithLabel: 1
          },
          // name: 's', // 给X轴加单位
          // splitLine: { lineStyle: { type: 'dashed' }},
          axisLine: {
            onZero: false,
            lineStyle: {
              color: 'rgba(204,204,204,0.32)',
              width: 1,
              type: 'solid'
            }
          },
          scale: true,
          min: function(value) {
            // console.log("value---------",value)
            return value.min - 60000
          },
          max: function(value) {
            return value.max + 60000
          },
          axisLabel: {
            textStyle: {
              color: 'rgba(255,255,255,0.54)', // 更改坐标轴文字颜色
              fontSize: 14 // 更改坐标轴文字大小
            },
            formatter: function(val) {
              let dateStr = ''
              const time = new Date(val)
              // console.log(time);//当前时间
              const oTime = that.formatDate(time, 'HH:mm:ss')
              dateStr = oTime
              return dateStr
            }
          }
        },
        yAxis: {
          type: 'value', // 坐标轴类型
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ['rgba(204,204,204,0.05)']
            }
          },
          axisLabel: {
            formatter: '{value} %',
            show: true,
            textStyle: {
              color: 'rgba(255,255,255,0.54)', // 更改坐标轴文字颜色
              fontSize: 14 // 更改坐标轴文字大小
            }
          }

        },
        series: [{
          type: 'custom',
          renderItem: renderItem, // custom 系列需要开发者自己提供图形渲染的逻辑。这个渲染逻辑一般命名为 renderItem
          dimensions: ['开始时间', '结束时间', '最低电量', '最高电量'], // 定义了每个维度的名称。这个名称会被显示到默认的 tooltip 中。
          encode: { // 可以定义 data 的哪个维度被编码成什么
            x: [0, 1], // data 中『维度0』和『维度1』对应到 X 轴
            y: 3 // data 中『维度2』对应到 Y 轴
            // tooltip: [2, 3], // 表示维度 0、1、2 会在 tooltip 中显示。
            // itemName: 4 // 表示维度 3指定 tooltip 中数据项名称。
          },

          data: data
        }]
      })
    }
  }