echarts给x轴添加rich各种图标

最新推荐文章于 2024-05-30 11:27:58 发布

Lanwarf-前端开发

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量1.5k

点赞数

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

本文链接：https://blog.csdn.net/qq_42038997/article/details/128331942

版权

Echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. 选择合适的rich图标

      const weatherIcons = {
        Sunny: 'https://echarts.apache.org/examples/data/asset/img/weather/sunny_128.png',
        Showers: 'https://echarts.apache.org/examples/data/asset/img/weather/showers_128.png'
      }

2. 设置X轴

提示：添加rich属性，通过 formatter 函数自定义渲染

          xAxis: [
            {
              type: 'category',
              axisTick: {
                show: false
              },
              axisLine: {
                show: true,
                lineStyle: {
                  type: '',
                  color: '#000'
                }
              },
              axisLabel: {
                formatter: function (value, index) {
                // 根据业务场景判断显示哪种图标
                  if(isRain[index] === '1'){
                   // 图标显示
                    return "{Showers|}"+value
                  }else {
                  // 图标显示
                    return "{Sunny|}"+value
                  }
                },
                // inside: false,
                // textStyle: {
                //   color: '#000', // x轴颜色
                //   fontWeight: 'normal',
                //   fontSize: '14',
                //   lineHeight: 22
                // },
                rich: {
                  value: {
                    lineHeight: 20,
                    align: 'center'
                  },
                  Sunny: {
                    height: 20,
                    align: 'center',
                    backgroundColor: {
                      image: weatherIcons.Sunny
                    }
                  },
                  Showers: {
                    height: 20,
                    align: 'center',
                    backgroundColor: {
                      image: weatherIcons.Showers
                    }
                  }
                }
              },
 //  x轴展示的数据
              data: xAxisData
            }
          ],