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))
		}
	}