微信小程序echarts雷达图tooltip的显示

微信小程序雷达图tooltip的显示

我们要显示这样的效果:

看着十分简单，在echarts实例上用的十分愉快，可一放到小程序上他就变成了“漂亮”的一排，本该换行的地方全变成了这样：

让人好不烦躁。那怎样解决了？我解决的方法如下：

主要代码：

 tooltip: {
      confine: true,
      enterable: true, //鼠标是否可以移动到tooltip区域内
      formatter: function (param) {
        return param.name + '\n' +
          indicators[0].name + ':' + param.value[0] + '\n' +
          indicators[1].name + ':' + param.value[1] + '\n' +
          indicators[2].name + ':' + param.value[2] + '\n' +
          indicators[3].name + ':' + param.value[3] + '\n' +
          indicators[4].name + ':' + param.value[4] + '\n' +
          indicators[5].name + ':' + param.value[5] + '\n'
      }
    },

全部代码：

function getOption() {
  var colors = ['rgba(252,157,154,1)', 'rgba(28,120,135,1)', 'rgba(255,252,153,1)']
  var indicators = [{
      name: '语文成绩',
      max: 150
    },
    {
      name: '数学成绩',
      max: 150
    },
    {
      name: '外语成绩',
      max: 150
    },
    {
      name: '化学成绩',
      max: 100
    },
    {
      name: '生物成绩',
      max: 100
    },
    {
      name: '物理成绩',
      max: 100
    },
  ]

  const detail = [{
      value: ['135', '140', '110', '97', '92', '95'],
      name: "张三",
    },
    {
      value: ['120', '110', '128', '90', '100', '98'],
      name: "赵四",
    },
    {
      value: ['100', '123', '150', '88', '90', '87'],
      name: "王五",
    }
  ]
  return {
    color: colors,
    tooltip: {
      confine: true,
      enterable: true, //鼠标是否可以移动到tooltip区域内
      formatter: function (param) {
        return param.name + '\n' +
          indicators[0].name + ':' + param.value[0] + '\n' +
          indicators[1].name + ':' + param.value[1] + '\n' +
          indicators[2].name + ':' + param.value[2] + '\n' +
          indicators[3].name + ':' + param.value[3] + '\n' +
          indicators[4].name + ':' + param.value[4] + '\n' +
          indicators[5].name + ':' + param.value[5] + '\n'
      }
    },
    legend: {
      data: ['张三', '赵四', '王五'],
      left: '0%',
      top: '7%',
      itemWidth: 10,
      itemHeight: 10,
      icon: 'circle',
      textStyle: {
        fontSize: 10,
        color: '#666666'
      }
    },
    radar: {
      splitNumber: 5,
      radius: 100,
      axisLine: {
        show: false
      },
      lineStyle: {
        fontSize: 10,
      },
      indicator: indicators,
      center: ['50%', '55%'], 
      name: {
        textStyle: {
          center: ['10%', '20%'],
          fontSize: 10,
        }
      },
    },

    barGap: '0%',
    series: [{
        name: '张三',
        type: 'radar',
        symbolSize: false,
        data: [{
          value: detail[0].value,
          name: detail[0].name,
        }],
        areaStyle: {
          normal: {
            color: 'rgba(252,157,154,0.5)', 
          }
        },
        itemStyle: {
          normal: {
            lineStyle: {
              width: 0.5,
              color: 'rgba(252,157,154,1)',
              type: 'solid'
            }
          },
        },
      },
      {
        name: '赵四',
        type: 'radar',
        symbolSize: false,
        data: [{
          value: detail[1].value,
          name: detail[1].name,
        }],
        areaStyle: {
          normal: {
            color: 'rgba(28,120,135,0.5)' 
          }
        },
        itemStyle: {
          normal: {
            lineStyle: {
              width: 0.5,
              color: 'rgba(28,120,135,1)',
              type: 'solid'
            }
          },
        },
      },
      {
        name: '王五',
        type: 'radar',
        symbolSize: false,
        data: [{
          value: detail[2].value,
          name: detail[2].name,
        }],
        areaStyle: {
          normal: {
            color: 'rgba(255,252,153,0.5)'
          }
        },
        itemStyle: {
          normal: {
            lineStyle: {
              width: 0.5,
              color: 'rgba(255,252,153,1)',
              type: 'solid'
            }
          },
        },
      }
    ]
  }
}

效果呈现：

如果有问题，欢迎一起讨论，共同进步！初学微信小程序，有问题请指出，谢谢~