自定义echarts 的折线图

自定义echarts 的折线图 1、控制横纵坐标文字的显示与隐藏 2、刚好在折线图面积内的对应标线展示，其实是利用柱状图来完成 3、标线的点用markline 4、在对应数据点上定义不同的symbol

1、控制横纵坐标文字的显示与隐藏

axisLabel: {
  color: '#8D4747',
  fontSize: 16,
  fontFamily: 'FZLTZHUNHJW',
  interval: (index, item) => {
    if (item === '1997' || item === '2006' || item === '2012' || item === '2018' || item === '2022') {
      return true
    } else {
      return false
    }
  }
},

2、刚好在折线图面积内的对应标线展示，其实是利用柱状图来完成 3、标线的点用markline 4、在对应数据点上定义不同的symbol

series: [
  {
    //用柱状图做标线
    type: 'bar',
    name: 'linedemo',
    tooltip: {
      show: false
    },
    animation: false,
    barWidth: 2,
    hoverAnimation: false,
    data: [],
    itemStyle: {
      normal: {
        color: (item) => {
          if (item.name === '自定义' || item.name === '自定义' || item.name === '自定义' || item.name === '自定义' || item.name === '自定义') {
            return '#DD0919'
          } else {
            return 'transparent'
          }
        },
        label: {
          show: false
        }
      }
    }
  },
  {
    type: 'line',
    clip: false,//是否截断超出坐标轴的图形
    showAllSymbol: 'auto',//false为根据主轴变化
    symbolOffset: [0, -3],
    symbol: (item, data) => {
      if (data.name === '自定义') {
        return this.symbolImg//自定义symbol的形状图形的路径
      } else {
        return 'emptyCircle'
      }
    },
    symbolSize: (item, data) => {//自定义symbol的大小
      if (data.name === '自定义') {
        return 29
      } else {
        return 10
      }
    },
    symbolRotate: (item, data) => {//自定义symbol旋转的角度
      if (data.name === '自定义') {
        return 35
      } else {
        return 0
      }
    },
    itemStyle: {
      color: '#DD0919'
    },
    markLine: {
      //标线的点
      symbol: ['circle', 'none'],//标线的头部和尾部symbol
      data: [
        {
          name: '',
          xAxis: '自定义',
          label: {
            show: false,
          },
          lineStyle: {
            normal: {
              color: '#DD0919',
              width: 0,
              type: 'solid',
            },
          },
        },
        {
          name: '',
          xAxis: '自定义',
          label: {
            show: false,
          },
          lineStyle: {
            normal: {
              color: '#DD0919',
              width: 0,
              type: 'solid',
            },
          },
        }, {
          name: '',
          xAxis: '2012',
          label: {
            show: false,
          },
          lineStyle: {
            normal: {
              color: '#DD0919',
              width: 0,
              type: 'solid',
            },
          },
        },
        {
          name: '',
          xAxis: '自定义',
          label: {
            show: false,
          },
          lineStyle: {
            normal: {
              color: '#DD0919',
              width: 0,
              type: 'solid',
            },
          },
        },
        {
          name: '',
          xAxis: '自定义',
          label: {
            show: false,
          },
          lineStyle: {
            normal: {
              color: '#DD0919',
              width: 0,
              type: 'solid',
            },
          },
        }
      ]
    },
    label: {
      show: true,
      offset: [-5, 0],
      formatter: function (item) {
        if (item.name === '自定义' || item.name === '自定义' || item.name === '自定义' || item.name === '自定义') {
          return '{color1|' + item.value + '}';
        } else if (item.name === '自定义') {
          return '{color1|' + item.value + '}' + '{color4|' + '自定义' + '}';
        } else {
          return '{color2|' + item.value + '}';
        }
      },
      rich: {
        color1: {
          color: '#fff',
          fontSize: 16,
          fontFamily: 'FZLTZHUNHJW',
          backgroundColor: '#DD0919',
          borderColor: 'transparent',
          border: 1,
          padding: [2, 4, 2, 4],
          borderWidth: 1,
          borderRadius: [5, 5, 5, 5],
        },
        color4: {
          color: '#DD0919',
          fontSize: 16,
          fontFamily: 'FZLTZHUNHJW'
        },
        color2: {
          color: 'transparent',
          backgroundColor: 'transparent',
          borderColor: 'transparent'
        }
      },
    },
    lineStyle: {
      width: 12,
      color: {
        type: 'linear',
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
          {
            offset: 0, color: 'rgba(221, 9, 25,0)' // 0% 处的颜色
          }, {
            offset: 0.25, color: 'rgba(221, 9, 25,0.25)' // 0% 处的颜色
          },
          {
            offset: 0.5, color: 'rgba(221, 9, 25,0.5)' // 100% 处的颜色
          },
          {
            offset: 0.75, color: 'rgba(221, 9, 25,0.75)' // 100% 处的颜色
          },
          {
            offset: 1, color: 'rgba(221, 9, 25,1)' // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }
    },
    areaStyle: {
      color: 'rgba(255,131,131,0.3)'
    }
  }
]