Echarts在线免费图表

 
            // 绿色轴刻度关联高亮的柱子（值大的 ）
// 如果最大和最小差别特别大  最大2000 最小100 那么最小的就看不到了
// 这里的红色关联低亮的柱子（值小的）

// 最好的方式就是双y轴左右分开颜色以及其他设计标注
// 这个最好用于差值比例特别大的
let data = [
  {
    date: '2012',
    name: '各年度xxx',
    value: 1065
  },
  {
    date: '2013',
    name: '各年度xxx',
    value: 1054
  },
  {
    date: '2014',
    name: '各年度xxx',
    value: 1956
  },
  {
    date: '2015',
    name: '各年度xxx',
    value: 755
  },
  {
    date: '2016',
    name: '各年度xxx',
    value: 300
  },
  {
    date: '2017',
    name: '各年度xxx',
    value: 163
  },
  {
    date: '2018',
    name: '各年度xxx',
    value: 220
  },
]
// 界定最小开始截断的数据
let truncationValue = 300;
// 用于修改截断样式的
let truncationValueFirstLens = [];
data.map((v, k) => {
  if (v.value <= truncationValue) {
    truncationValueFirstLens.push(k)
  }
})
// 用于截断样式的数据
let truncationData = new Array(data.length).fill(truncationValue, 0);

// 处理数值大的（大于界定值的）
const highDataFun = (d, min) => {
  let resData = d.map((v) => {
    if (v.value <= min) return 0;
    else return v.value
  })
  return resData;
}
let highData = highDataFun(data, truncationValue);


// 数据数值小的（小于界定值的）
let minDataFun = (d, min) => {
  let resData = d.map((v) => {
    if (v.value > min) {
      return 0;
    } else {
      return v.value;
    }
  })
  return resData;
}
/**
 * 传入一个数组 和 截断临界值；吧大于临界值的设置为0 小于的则正常*/ 
let minData = minDataFun(data, truncationValue);

// 获取最大值的方法
let dataMaxFun = (d) => {
  return d.filter((v) => v && v > 0).sort((a, b) => b - a)[0];
}
// 获取数组最小值的方法
let dataMinFun = d => {
  return d.filter((v) => v && v > 0).sort((a, b) => a - b)[0];
}
// 数值大的数据中最大值
let highDataMax = dataMaxFun(highData);
// 数值大的数据中最小值
let highDataMin = dataMinFun(highData);
// 数值小的数据中最大值
let minDataMax = dataMaxFun(minData);
// 这里以数值小的最大值作为 数值大的刻度最大分割；并且计算会出现多少刻度
let Yscale = Math.ceil(highDataMax / minDataMax);

// 大的数据最大刻度
let maxDataMax = Math.trunc(highDataMin / Yscale)
option = {
  backgroundColor: '#fff',
  tooltip: {
    trigger: 'axis',
    backgroundColor: '#081429',
    textStyle: {
      color: '#fff',
    },
    borderColor: "rgba(255,100,100,1)",
    axisPointer: {
      z: 111,
      lineStyle: {
        color: "rgba(255,100,100,1)"
      },
    },
  },
  legend: {
    data: ['Forest']
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ['2012', '2013', '2014', '2015', '2016', '2017', '2018']
    }
  ],
  yAxis: [
    {
      type: 'value',
      max: highDataMin,    // 高数据的中的最小
      maxInterval: maxDataMax,   //最大轴线分割
      axisLabel: {
        show: true,
        color: 'red',
        formatter: (v) => {
          if (v >= minDataMax + maxDataMax) {
            return ''
          } else {
            return v;
          }
        }
      },
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    {
      type: 'value',
      position: 'left',
      maxInterval: minDataMax,   //最大轴线分割
      axisLabel: {
        color: 'green',
        formatter: (v) => {
          // 咋算的忘了；就是这个么写法
          if (v <= Yscale * minDataMax / highDataMin * minDataMax + maxDataMax * 2) {
            return ''
          } else {
            return v;
          }
        }
      }
    }
  ],
  color: ['#5aabff', '#fc8452', '#ea7ccc'],
  series: [
    {     //正常的数据
      name: 'Forest',
      type: 'bar',
      barGap: '-100%',
      barWidth: 20,
      yAxisIndex: 1,      //关联y轴1
      data: highData
    },
    {       //数值小的
      name: 'Forest',
      type: 'bar',
      barGap: '-100%',
      barWidth: 20,
      xAxisIndex: 0,    //关联y轴0 下标
      data: minData,
      label: {
        show: true,
        position: 'top',
        formatter: (v) => {
          if (v.data) { return v.data }
          else return ''
        }
      },
      itemStyle: {
        opacity: 0.5
      }
    },
    {       //截断样式的
      type: 'bar',
      data: truncationData,
      showSymbol: false,
      yAxisIndex: 0,
      itemStyle: {
        color: "rgba(255,255,255,0)"
      },
      z: 10,   //看文档改为z；zlevel会新创建canvas绘制不在一个2d内；且toopit高于此
      label: {
        show: true,
        distance: 10,
        position: 'top',
        rotate: -30,
        formatter: (v) => {
          // 数据小的截断不需要
          if (truncationValueFirstLens.includes(v.dataIndex)) {
            return ``
          } else {
            return `{a|}`
          }
        },
        rich: {
          a: {
            width: 35,
            height: 10,
            backgroundColor: 'white',
          }
        }
      },
      barGap: '-100%',
      barWidth: 20,
      markLine: {
        silent: false,
      },
      tooltip: {
        show: false,
      },
      select: {
        disabled: true
      },
      emphasis: {
        disabled: true
      }
    }
  ]
};