echarts 文字换行----绝对

干货极品看对带走

想改哪里放哪里
在这里插入图片描述

 formatter: function (params) {
              var newParamsName = '' // 最终拼接成的字符串
              var paramsNameNumber = params.length // 实际标签的个数
              var provideNumber = 7 // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 换行的话,需要显示几行,向上取整
              //     /**
              //  * 判断标签的个数是否大于规定的个数, 如果大于,则进行换行处理 如果不大于,即等于或小于,就返回原标签
              //  */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = '' // 表示每一次截取的字符串
                  var start = p * provideNumber // 开始截取的位置
                  var end = start + provideNumber // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p === rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr // 最终拼成的字符串
                }
              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params
              }
              // 将最终的字符串返回
              return newParamsName
            }// x轴文字换行
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
echarts-extension-amap 是一个基于 ECharts 的扩展库,用于在 ECharts 中使用高德地图进行数据可视化。通过 echarts-extension-amap,你可以在 ECharts 图表中展示高德地图的数据。 要在 Vue 3 中使用 echarts-extension-amap,可以按照以下步骤进行操作: 1. 首先,在终端中运行以下命令来安装 echarts-extension-amap 和 echarts: ```shell npm install echarts echarts-extension-amap ``` 2. 在你的 Vue 组件中,导入 EChartsecharts-extension-amap: ```javascript import * as echarts from 'echarts'; import 'echarts-extension-amap'; ``` 3. 在模板中创建一个容器用于渲染 ECharts 图表: ```html <template> <div ref="chartContainer" style="width: 400px; height: 300px;"></div> </template> ``` 4. 在组件的 `mounted` 钩子函数中,初始化 ECharts 图表并配置高德地图扩展: ```javascript export default { mounted() { const chartContainer = this.$refs.chartContainer; const myChart = echarts.init(chartContainer); // 使用扩展库的地图插件 echarts.registerMap('amap', amapData); // amapData 是高德地图的数据 // 配置 ECharts 图表 const option = { series: [ { type: 'map', map: 'amap', // 使用高德地图 // 其他配置项... } ] }; // 渲染图表 myChart.setOption(option); } } ``` 上述代码示例中,`amapData` 是高德地图的数据,你可以根据需要进行相应的配置。 通过以上步骤,你可以在 Vue 3 中使用 echarts-extension-amap,在 ECharts 图表中展示高德地图的数据。请确保在使用 echarts-extension-amap 时,已经正确引入了 EChartsecharts-extension-amap 库,并按照文档提供的方式进行配置和使用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大眼糟老头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值