前端基础学习-vchart修改悬浮提示tooltip

在使用v-chart过程中,v-chart悬浮提示tooltip是自动生成的,我们也可以手动修改成需要的样子

未修改前

前端基础学习-vchart修改悬浮提示tooltip_第1张图片

修改后

前端基础学习-vchart修改悬浮提示tooltip_第2张图片

下面上代码

html

前端基础学习-vchart修改悬浮提示tooltip_第3张图片

			<ve-histogram
                :extend="verticalChartExtend"
                :data="chartData"
                :tooltip="chartDataTooltip"
              />

js

前端基础学习-vchart修改悬浮提示tooltip_第4张图片

      // v-chart设置悬浮内容
      chartDataTooltip: {
        formatter: function (data) {
          return `${data.name}${data.value}`
        }
      },

这里其实主要是设置tooltip,然后根据需要显示对应的文字
这里的data我也打印出来了,我取的是name和value
前端基础学习-vchart修改悬浮提示tooltip_第5张图片

你可能感兴趣的:(前端,vue,js,vchart)