Echarts实现提示内容自定义，y轴显示中文

最新推荐文章于 2023-06-08 15:22:19 发布

码奴生来只知道前进~

最新推荐文章于 2023-06-08 15:22:19 发布

阅读量4.9k

点赞数 2

分类专栏： echarts 文章标签： echarts javascript

本文链接：https://blog.csdn.net/tanqingfu1/article/details/125602375

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、悬停显示内容自定义

tooltip: {
    formatter: function (params) {
      var res = params[0].name + '<br/>效率等级：';
      var texts = '';
      if (params[0].value === 0) {
        texts = '极低';
      } else if (params[0].value === 1) {
        texts = '低';
      } else if (params[0].value === 2) {
        texts = '中';
      } else if (params[0].value === 3) {
        texts = '高';
      } else if (params[0].value === 4) {
        texts = '极高';
      }
      res = res + texts;
      return res;
    },
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.37)'
      }
    }
  }

2、设定Y轴显示中文

yAxis: {
    // name: '(cm)',
    nameTextStyle: {
      color: '#fff',
      fontSize: 16
    },
    type: 'value',
    axisTick: {
      // y轴刻度线
      show: false
    },
    splitLine: {
      // 网格线
      show: true,
      lineStyle: {
        color: ['rgba(255, 255, 255, 0.1)'],
        type: 'solid'
      }
    },
    splitArea: { show: false }, // 保留网格区域
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff'
      },
      // 这里重新定义就可以
      formatter: function (value) {
        var texts = [];
        if (value === 0) {
          texts.push('极低');
        } else if (value === 1) {
          texts.push('低');
        } else if (value === 2) {
          texts.push('中');
        } else if (value === 3) {
          texts.push('高');
        } else if (value === 4) {
          texts.push('极高');
        }
        return texts;
      }
    },
    axisLine: {
      lineStyle: {
        type: 'solid',
        color: 'rgba(255, 255, 255, 0.37)' // 左边线的颜色
      }
    }
  }

3、完整的demo代码

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']
  },
  tooltip: {
    formatter: function (params) {
      var res = params[0].name + '<br/>效率等级：';
      var texts = '';
      if (params[0].value === 0) {
        texts = '极低';
      } else if (params[0].value === 1) {
        texts = '低';
      } else if (params[0].value === 2) {
        texts = '中';
      } else if (params[0].value === 3) {
        texts = '高';
      } else if (params[0].value === 4) {
        texts = '极高';
      }
      res = res + texts;
      return res;
    },
    trigger: 'axis',
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.37)'
      }
    }
  },
  yAxis: {
    // name: '(cm)',
    nameTextStyle: {
      color: '#fff',
      fontSize: 16
    },
    type: 'value',
    axisTick: {
      // y轴刻度线
      show: false
    },
    splitLine: {
      // 网格线
      show: true,
      lineStyle: {
        color: ['rgba(255, 255, 255, 0.1)'],
        type: 'solid'
      }
    },
    splitArea: { show: false }, // 保留网格区域
    axisLabel: {
      show: true,
      textStyle: {
        color: '#fff'
      },
      // 这里重新定义就可以
      formatter: function (value) {
        var texts = [];
        if (value === 0) {
          texts.push('极低');
        } else if (value === 1) {
          texts.push('低');
        } else if (value === 2) {
          texts.push('中');
        } else if (value === 3) {
          texts.push('高');
        } else if (value === 4) {
          texts.push('极高');
        }
        return texts;
      }
    },
    axisLine: {
      lineStyle: {
        type: 'solid',
        color: 'rgba(255, 255, 255, 0.37)' // 左边线的颜色
      }
    }
  },
  series: [
    {
      data: [0, 1, 2, 3, 4],
      type: 'line'
    }
  ]
};