echarts

一、 初始化

initLineChart(data) {
  var myChart = this.$echarts.init(document.getElementById('analyzeLine'))
  var fmdLengend = ['系统繁忙度(DB Time)', 'SystemIO', 'Commit', 'UserIO', 'Other', 'Concurrency', '', 'Application', 'configuration', 'NetWork', 'Administrator', 'Scheduler', 'Cluster']
  var option = {
    grid: { x: '100px', y: '10px', x2: '50px', y2: '75px' },
    color: ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0', '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700', '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'],
    tooltip: { trigger: 'axis' },
    legend: { x: 'center', y: 'bottom', data: fmdLengend, selected: { 'Other': false }},
    xAxis: [{
      show: true,
      boundaryGap: false,
      data: data.timeXList,
      axisLine: { lineStyle: { width: 1, shadowBlur: 0 }}
    }],
    yAxis: [{
      type: 'value',
      axisLine: { lineStyle: { width: 1, shadowBlur: 0 }},
      axisLabel: { formatter: '{value}' }
    }],
    series: [
      {
        name: '系统繁忙度(DB Time)',
        type: 'line',
        smooth: true,
        connectNulls: true, // 如果数据中包含null，，需要继续连线可设置，否则会断开
        tooltip: { trigger: 'item', formatter: '{b}<br/>{a}: <b>{c}</b>' },
        data: data.dbTimeList,
        symbolSize: 0,
        showAllSymbol: true
      },
      {
        name: 'SystemIO',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbol: 'none',
        itemStyle: { normal: { areaStyle: { type: 'default' }}},
        data: data.systemIoList,
        symbolSize: 0,
        showAllSymbol: true
      },
      {
        name: 'Commit',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbol: 'none',
        itemStyle: { normal: { areaStyle: { type: 'default' }}},
        data: data.commitList,
        symbolSize: 0,
        showAllSymbol: true
      },
      {
        name: 'UserIO',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbol: 'none',
        itemStyle: { normal: { areaStyle: { type: 'default' }}},
        data: data.userIoList,
        symbolSize: 0,
        showAllSymbol: true
      },
      {
        name: 'Other',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbol: 'none',
        itemStyle: { normal: { areaStyle: { type: 'default' }}},
        data: data.otherList,
        symbolSize: 0,
        showAllSymbol: true
      },
      {
        name: 'Concurrency',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbol: 'none',
        itemStyle: { normal: { areaStyle: { type: 'default' }}},
        data: data.concurrencyList,
        symbolSize: 0,
        showAllSymbol: true
      },
      {
        name: 'Application',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbol: 'none',
        itemStyle: { normal: { areaStyle: { type: 'default' }}},
        data: data.applicationList,
        symbolSize: 0,
        showAllSymbol: true
      },
      {
        name: 'configuration',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbol: 'none',
        itemStyle: { normal: { areaStyle: { type: 'default' }}},
        data: data.configurationList,
        symbolSize: 0,
        showAllSymbol: true
      },
      {
        name: 'NetWork',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbol: 'none',
        itemStyle: { normal: { areaStyle: { type: 'default' }}},
        data: data.networkList,
        symbolSize: 0,
        showAllSymbol: true
      },
      {
        name: 'Administrator',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbol: 'none',
        itemStyle: { normal: { areaStyle: { type: 'default' }}},
        data: data.administratorList,
        symbolSize: 0,
        showAllSymbol: true
      },
      {
        name: 'Scheduler',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbol: 'none',
        itemStyle: { normal: { areaStyle: { type: 'default' }}},
        data: data.schedulerList,
        symbolSize: 0,
        showAllSymbol: true
      },
      {
        name: 'Cluster',
        type: 'line',
        smooth: true,
        stack: '总量',
        symbol: 'none',
        itemStyle: { normal: { areaStyle: { type: 'default' }}},
        data: data.clusterList,
        symbolSize: 0,
        showAllSymbol: true
      }]
  }
  window.onresize = function() {
    myChart.resize()
  }
  myChart.setOption(option)
}

二、点击事件(可以放在setOption前边)

(1)监听整个画布

this.lineChart.getZr().on('click', params => {
    const pointInPixel = [params.offsetX, params.offsetY]
    // 使用 convertFromPixel方法 转换像素坐标值到逻辑坐标系上的点。获取点击位置对应的x轴数据的索引		 值，借助于索引值的获取到其它的信息
    let pointInGrid = this.lineChart.convertFromPixel({ seriesIndex: 0 }, pointInPixel)

    // x轴数据的索引值
    let xIndex = pointInGrid[0]

    // 使用getOption() 获取图表的option
    let op = this.lineChart.getOption()

    // 获取当前点击位置要的数据
    var xData = op.xAxis[0].data[xIndex]
	// 进行其他操作
    this.getRangeTime(xData)
  })

判断当前是否点击在拐点上

if(params.target?.z === 2){
	// 点击在拐点上的处理
}

if(params.topTarget?.z === 2){
	// 点击在折线上的处理
}

改变鼠标样式

this.lineChart.getZr().on('mousemove', param => {
	var pointInPixel= [param.offsetX, param.offsetY];
    // 若鼠标滑过区域位置在当前图表范围内 鼠标设置为小手 -- 范围有点大
    if (this.lineChart.containPixel('grid',pointInPixel)) {
    	this.lineChart.getZr().setCursorStyle('pointer')
    }else{
    	this.lineChart.getZr().setCursorStyle('default')
    }
    // 如果当前划过折线 鼠标设置为小手
    if (params.topTarget?.z === 2) {
      this.lineChart.getZr().setCursorStyle('pointer')
    }
})

(2) 监听当前点击的区域（比如折线图的点）

this.lineChart.off()
this.lineChart.on('click', params => {
	console.log('params---', params)
})