SOURCE

console 命令行工具 X clear

                    
>
console
//<![CDATA[
var colors = ['#5793f3', '#d14a61', '#675bba'];

option = {
  color: colors,
  tooltip: {
    trigger: 'none',
    axisPointer: {
      type: 'cross'
    }
  },
  legend: {
    data: ['2015 降水量', '2016 降水量']
  },
  grid: {
    top: 70,
    bottom: 50
  },
  xAxis: [{
    type: 'category',
    axisLabel:{
      margin:16,
    },
    axisTick: {
      length:12,
      alignWithLabel: true
    },
    splitLine: {
      show: true
    },
    axisLine: {
      show: false,
      onZero: false,
      lineStyle: {
        color: colors[1]
      }
    },
    axisPointer: {
      label: {
        formatter: function(params) {
          return '降水量  ' + params.value + (params.seriesData.length ? ':' + params.seriesData[0].data: '');
        }
      }
    },
    data: ["2016-1", "2016-2", "2016-3", "2016-4", "2016-5", "2016-6", "2016-7", "2016-8", "2016-9", "2016-10", "2016-11", "2016-12"]
  },
  {
    type: 'category',
    axisLabel:{
      show:false,
    },
    axisTick: {
      length:12,
      alignWithLabel: true
    },
    axisLine: {
      onZero: false,
      lineStyle: {
        width:0,
        color: colors[0]
      }
    },
    axisPointer: {
      label: {
        formatter: function(params) {
          return '降水量  ' + params.value + (params.seriesData.length ? ':' + params.seriesData[0].data: '');
        }
      }
    },
    data: ["2015-1", "2015-2", "2015-3", "2015-4", "2015-5", "2015-6", "2015-7", "2015-8", "2015-9", "2015-10", "2015-11", "2015-12"]
  }],
  yAxis: [{
    type: 'value',
    axisLabel: {
      margin: 15
    },
    axisLine: {
      show: false
    },
    axisTick: {
      length: 12,
    }
  },
  {
    max: 250,
    min: 0,
    type: 'value',
    axisLabel: {
      show: false
    },
    splitLine:{
      show:false
    },
    axisLine: {
      show: false
    },
    axisTick: {
      length: 12,
    }
  }],
  series: [{
    name: '2015 降水量',
    type: 'line',
    xAxisIndex: 1,
    smooth: true,
    data: [22.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8]
  },
  {
    name: '2016 降水量',
    type: 'line',
    smooth: true,
    data: [13.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 13.4,]
  }]
};

var myChart = echarts.init(document.getElementById('main'),null, {renderer: 'svg'});
myChart.setOption(option);

var myChart = echarts.init(document.getElementById('main2'),null, {renderer: 'svg'});
option.xAxis[0].boundaryGap = false,
option.xAxis[1].boundaryGap = false,
myChart.setOption(option);

console.clear();
var main = document.querySelector('#main')
var paths = main.querySelectorAll('svg path'); 
var ticks=[];
var y = 6;
var x = 12;
var lines=[];
paths.forEach((path,i)=>{if(i>=y&&i<=(y+x))lines.push(path);if(i>(x+y+2*y+1)){
  if(ticks.length<x);
  ticks.push(path);
}});
lines[lines.length-1].remove(); 
lines.forEach((x,i)=>{
  var d = x.getAttribute('d').split(' ');
  var offset  = ticks[i].getAttribute('d').split(' ')[1];
  d[1]=offset;
  d[4]=offset;
  x.setAttribute('d',d.join(' ')); 
});
ticks.forEach(x=>{
  console.log(x.getAttribute('d'));
  d =x.getAttribute('d').split(' ');
  //d[2]=Number(d[2])+5;
  //d[5]=Number(d[5])+5;
  x.setAttribute('d', d.join(' '))
})
//console.log(paths);
<div id="main" style="width: 100%; height: 400px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"></div>
<div id="main2" style="width: 100%; height: 400px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;"></div>

本项目引用的自定义外部资源