echarts实现柱状图/折线图的y轴是value类型但展示category的效果（中文刻度，圆点落在刻度线上）

近期的项目是一个银联报表类的页面，需要大量的使用echarts的几种图表类型。但为了精准的还原UI的设计图效果，许多图表以及配置仅仅官方给出的实例和配置项是无法达到效果的。
所以笔者在echarts提供的图表的基础上，完成了如下的效果，欢迎参考~

官方实例的折线图效果：

圆点散落位置比较自由，并不都在Y轴刻度线上；
y刻度轴为value类型时，刻度只能为数字，中文会报错（如果说错了请无视- -），且刻度与刻度线位置平行，并不是我想要的刻度在行间的效果；
但y刻度轴为category类型时，y的刻度可以位于行间了，但圆点散落位置却也只能落在行间，无法落在刻度线上；

我想要达到的折线图效果：
圆点落在刻度线上；
y轴是value轴，但达到category类目轴的标签在行间的效果；

实现代码：


// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('ec-box'))
var Data_dict = { '高': 200, '中': 100, '低': 0 }
var Data = ['中','高','低','低']


var ecBoxY = ['低','中','高']
var ecBoxYIndex = -1

var option = {
    grid: {
          left: '3%',
          right: '10%',
          top: '30%',
          bottom: '6%',
          containLabel: true
            },
  title: {
    text: '近12个月',
    textStyle: {
      fontWeight: 'bold',
      fontSize: '14'
    },
    left: '3%',
    top:'-2%'
  },
  animation: false,
  xAxis: {
    type: 'category',
    axisLine: {
      show: false, //是否显示坐标刻度
      lineStyle: {
        color: '#eeeeee'
      }
    },
    axisLabel: {
      //标签样式
      textStyle: {
        fontSize: 14,
        color: '#999999'
      }
    },
    data: [
      {
        //第一段数据不显示
        value: '',
        label: { normal: { show: false } }
      },
      '1',
      '2',
      '3',
      '4'
    ]
  },
  yAxis: {
    type: 'value',
    splitNumber: 2, //分段数
    max:200,  // 这里不写最大值会容易出问题
    axisLine: {
      show: false, //是否显示坐标刻度线
      lineStyle: {
        color: "#f2f4f3"
      }
    },
    axisLabel: {
      inside: true, //刻度值卸载y轴右侧
      padding: [-50, 0, 0, 0], //标签的位置
      textStyle: {
        fontSize: 14,
        color: '#999999'
      },
      formatter: function() {
        return ecBoxY[ecBoxYIndex += 1]
      },
    }
  },
  visualMap: {
    show: false,
    dimension: 0,
    pieces: [
      {
        lte: 5,
        color: '#0090ff'
      },
      {
        gt: 5,
        lte: 9,
        color: '#0090ff'
      },
      {
        gt: 9,
        color: '#0090ff'
      }
    ]
  },
  series: [
    {
      name: '',
      type: 'line',  // 这里可以按需修改 改成bar就是柱状图
      smooth: false,
      symbol: 'circle', //标记的样式（小圆点）
      symbolSize: 10, //标记的尺寸

      data: [
        {
          value: '',
          label: { normal: { show: false } }
        },

        Data_dict[Data[0]],
        Data_dict[Data[1]],
        Data_dict[Data[2]],
        Data_dict[Data[3]]
      
      ]
    }
  ]
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)

echarts实现柱状图/折线图的y轴是value类型但展示category的效果（中文刻度，圆点落在刻度线上）

相关推荐