Echarts在线免费图表

 
            option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {formatter: this.formateTooltip},
        xAxis: {
            data: ['衬衫衬衫衬衫衬衫', '羊羊毛衫羊毛衫羊毛衫毛衫', '雪纺衫雪纺衫雪纺衫雪纺衫', '裤子裤子裤子裤子', '高跟鞋高跟鞋高跟鞋高跟鞋', '袜子袜子袜子袜子袜子'],
            triggerEvent: true,
            axisLabel: {
              interval: 0,
              textStyle: {
                color: '#666',
                fontSize: '12'
              },
              formatter: (value, index) => {
                if (value.length > 6) {
                  return value.substring(0, 4) + '...'
                }
                return value
              }
            }
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    myChart.on('mouseover', (params)=> {
      if (params.componentType === 'xAxis') {
        xLabel = params.value
        let offsetX = params.event.offsetX + 10
        let offsetY = params.event.offsetY + 10
        myChart.setOption({tooltip: {
          formatter: formateTooltip,
          alwaysShowContent: true
        }})
        myChart.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: 0,
          position: [offsetX, offsetY]
        })
      }
    })
    myChart.on('mouseout', (params)=> {
      if (params.componentType === 'xAxis') {
        xLabel = ''
        myChart.setOption({tooltip: {
          formatter: formateTooltip,
          alwaysShowContent: false
        }})
      }
    })
    var xLabel=''
    function formateTooltip (params) {
      return xLabel
    }