echarts标签美化

echarts标签美化

img


就是我想让这些标签在侧边展示，并且如果可以的话做成

img


这样子的效果（不强求），不行就把他们竖着列在表旁或者怎么样都行o(╥﹏╥)o

<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-content">
        <!-- 关闭按钮 -->
        <div class="close-modal" data-dismiss="modal">
            <div class="lr">
                <div class="rl">
                </div>
            </div>
        </div>
        <!-- 图表详细页面 -->
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <div class="modal-body">
                        <h2>2022-2023赛季top20球员各项得分数据
                    <a class="a-active" href="javascript:;">布莱克尼</a>
                    <a href="javascript:;">皮特森</a>
                    <a href="javascript:;">多米尼克-琼斯</a>
                    <a href="javascript:;">杰曼</a>
                    <a href="javascript:;">马尚-布鲁克斯</a>
                </h2>
                <hr class="star-primary">
                <!-- img可替换为图表 -->
                <!-- 图1 -->
                <div id="main" style="width: 700px;height:400px;"></div>
                <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>
                <script type="text/javascript">
                (function () {
                    var RewardData = [
                        {
                            reward: '布莱克尼',
                            xdata: ['得分', '前板','后板','篮板','助攻','抢断'],
                            data: [32.7,1.0,6.4,7.4,4.8,1.1]
                        },
                        {
                            reward: '皮特森',
                            xdata: ['得分', '前板','后板','篮板','助攻','抢断'],
                            data: [28.7,1.3,5.8,7.1,5.9,2.0]
                        },
                        {
                            reward: '多米尼克-琼斯',
                            xdata: ['得分', '前板','后板','篮板','助攻','抢断'],
                            data: [27.9,1.8,9.4,11.2,10.9,2.6]
                        },
                        {
                            reward: '杰曼',
                            xdata: ['得分', '前板','后板','篮板','助攻','抢断'],
                            data: [24.2,0.5,4.8,5.3,3.7,1.1]
                        },
                        {
                            reward: '马尚-布鲁克斯',
                            xdata: ['得分', '前板','后板','篮板','助攻','抢断'],
                            data: [23.4,1.2,6.3,7.5,5.9,1.4]
                        }
                    ];
                    var myChart = echarts.init(document.getElementById('main'));
                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '个人各项得分'
                        },
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: ['得分', '前板','后板','篮板','助攻','抢断'],
                            axisTick: {alignWithLabel: true},
                            axisLabel: {rotate: 45}
                        },
                        yAxis: {},
                        series: [{
                            name: '得分',
                            type: 'bar',
                            data: RewardData[0].data
                        }]
                    };
                    myChart.setOption(option);

                    $('.modal-body h2 a').on('click', function () {
                        RewardData.map((item) => {
                            if (item.reward == $(this).text()) {
                                option.series[0].data = item.data;
                                option.series[0].name = item.reward;
                                option.xAxis.data=item.xdata;
                            }
                        })
                        // 选中年份高亮
                        $('.modal-body h2 a').removeClass('a-active');
                        $(this).addClass('a-active');

                        // 需要重新渲染
                        myChart.setOption(option);
                    });
                    })();

                        </script>
                        <!-- 图1 -->
                        <!-- 图表详细介绍说明字段 -->
                        <br>
                        <p>
                            柱形图，又称长条图、柱状统计图，是一种以长方形的长度为变量的统计图表，用来比较两个或以上的价值（不同时间或者不同条件），只有一个变量，通常利用于较小的数据集分析。本图横轴为片名，纵轴为评分，清晰反映出了Top20的影片评分对比情况，用户可以根据评分高低来选择自己想看的电影。</p>
                        <!-- 3个li标签，可删除，可补充信息 -->
                        <ul class="list-inline item-details">
                        </ul>
                        <!-- 底部关闭按钮 -->
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i>
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7502718
  • 你也可以参考下这篇文章：【echarts】【前端】点击图例，只有被点击图例对应的折线显示，其他隐藏
  • 除此之外, 这篇博客: 解决echarts柱形图数值差距大，极小值渲染问题中的 解决echarts柱形图数值差距大，极小值渲染问题 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:

  • 对于一个初学者，echarts柱形图渲染极小值，指数类数据， 由于数据存在数量级差异太大，导致渲染出这种问题，下图：
    在这里插入图片描述

    很明显，这不是我想要的效果，经过查看官网实例，如果我给y轴设置一个最大值呢？这个最大值就去数组中最大的数据，

          yAxis: [
        {
          type: 'value',
          max:maxNumVal,//给定区间最大
        }
      ]

    效果显示:
    在这里插入图片描述
    这就是我想要的效果，对于值太小以及数量级差异大的 数据的处理方法。

    源码如下：
    xAxis

          xAxis: {
        type: 'category',
        data:echartXaisLabel,//这里是横坐标值
        axisLine: {
          lineStyle: {
            color: '#666666'
          }
        },
        splitLine:{
          show:false
        }
      }

    yAxis：

    yAxis: [
        {
          type: 'value',
          axisLabel: {
            show:true,
            formatter: (value, index) => {
                return Number(value).toExponential(2)
            }
          },
          splitLine:{
            show:true
          },
          axisLine: {
            show:true,
            lineStyle: {
              color: '#666666'
            }
          },
          max:maxNumVal,
          axisTick:{
            show:true,
            interval:'0'
          }
        }
      ]

    series:

    series: [
        {
          type: 'bar',
          barWidth:'60%',
          data: data,
          barMinHeight:0,
          label: {
            show: true,
            formatter: (params) => {
                return params.value;
            }
          },
          itemStyle:{
            normal:{
              color: function(params){
                let colorList = [
                  '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63',
                  '#FAD860','#F3A43B','#60C0DD','#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                ];
                return colorList[params.dataIndex]
              },
              label:{
                show:true,
                position:'top',
                textStyle:{
                  color:'black',
                  fontSize:10
                }
              }
            }
          }
        }
      ]

    给定一个颜色输入循环渲染在label上

    以上为本次问题解决的过程。

    echarts官网: https://echarts.apache.org/examples/zh/index.html#chart-type-bar.

  • 以下回答由chatgpt基于相关博客总结生成:

    问题解答：

    针对该问题，可以通过以下几个步骤来实现：

    1. 修改echarts标签位置：首先需要在option中找到对应的series配置项，例如bar图表中的series，然后添加label配置项，改变里面position属性值，让标签显示在柱子外部。例如：
    series: [{
  type: 'bar',
  data: [100, 200, 300],
  label: {
    show: true,
    position: 'right', // 标签位置（inside / top / left / right / insideLeft / insideRight / insideTop / insideBottom / insideTopLeft / insideBottomLeft / insideTopRight / insideBottomRight）
    color: '#333', // 文字颜色
    fontSize: 18, // 文字大小
    fontWeight: 'bold' // 文字粗细
  }
}]
    1. 为标签添加图标或颜色：可以在上一步添加的label配置项中，通过formatter属性实现，自定义标签展示内容，例如：
    label: {
  show: true,
  position: 'right', 
  formatter: function(params) {
    // 自定义标签内容，可以通过params.value获取标签值
    return '{icon|' + params.value + '}' + '{name|' + params.name + '}'
  },
  rich: { // 这个是富文本，可以自定义标签样式
    icon: {
      width: 20,
      height: 20,
      backgroundColor: '#3399CC',
      borderRadius: 10,
      align: 'center',
      lineHeight: 20,
      color: '#fff'
    },
    name: {
      lineHeight: 30,
      color: '#333'
    }
  }
}
    1. 实现参考样例布局：可以参考段落1中的option配置，通过修改grid、xAxis、yAxis等配置项，实现类似的布局，例如：
    option = {
  grid: {
    top: 50,
    right: 50,
    bottom: 50,
    left: 200,
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: {
      color: '#666',
      fontSize: 12,
      fontWeight: 'bold'
    },
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
    position: 'right',
    axisLabel: {
      color: '#666',
      fontSize: 12,
      fontWeight: 'bold'
    },
    splitLine: { show: false }
  },
  series: [
    {
      name: 'Series A',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        color: 'blue',
        width: 2
      },
      itemStyle: {
        color: 'blue'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Series B',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        color: 'yellow',
        width: 2
      },
      itemStyle: {
        color: 'yellow'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
}
    1. 竖向展示标签：可以借助echarts的工具箱功能，通过选择“数据视图”来现实数据视图，这样就可以在数据视图中查看数据并编辑展示，例如：
    toolbox: {
  feature: {
    dataView: { show: true, readOnly: false } //数据视图
  }
}

    总之，针对echarts标签美化，可以通过调整label、formatter、grid、xAxis、yAxis等配置项来实现，具体实现效果可以参考上面提供的代码示例。