Vue 使用 Echart 折线图如何添加百分比

• 在vue中引用

// vue文件中引入echarts工具
let echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
// 以下的组件按需引入
require('echarts/lib/component/tooltip')   // tooltip组件
require('echarts/lib/component/title')   //  title组件
require('echarts/lib/component/legend')  // legend组件

• 实现简单的数据折线图

option: {
    
    
  legend: {
    
    },
  xAxis: {
    
    },
  yAxis: {
    
    },
  label: {
    
    },
  tooltip: {
    
    },
  series: [],
  legend: {
    
    
  	data: []
  },
  //配置x轴
  xAxis: {
    
    
  	type: 'category',   // 还有其他的type，可以去官网喵两眼哦
  	data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],   // x轴数据
  	name: '日期',   // x轴名称
  	// x轴名称样式
  	nameTextStyle: {
    
    
    	fontWeight: 600,
    	fontSize: 18
  		}
	},
	yAxis: {
    
    
	type: 'value',
	name: '纵轴名称',   // y轴名称
  	// y轴名称样式
  	nameTextStyle: {
    
    
    	fontWeight: 600,
    	fontSize: 18
    	}
	}
}

• 在折线图 y轴显示百分比

option.yAxis.axisLabel = {
    
    
	show: true,
	interval: 'auto', 
	formatter:'{value}%',
}

• 自定义 tooltip 文本携带百分比

let isPercent = true; 
const createTopPercent = data => {
    
    
return `${
      
      data.name}</br> ${
      
      data.marker} ${
      
      data.seriesName} :${
      
      data.data}${
      
      isPercent ? `%` :``}`
} 

//将覆盖默认显示文本携带百分比
option.tooltip = {
    
    
	trigger: 'axis',
	formatter(data){
    
    
		return data.map((data) => createTopPercent(data))
		}
	}