How to add percentage to Vue using Echart line chart

  • Reference in 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组件
  • Realize a simple data line chart
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
    	}
	}
}
  • Show percentage on the y-axis of the line chart
option.yAxis.axisLabel = {
    
    
	show: true,
	interval: 'auto', 
	formatter:'{value}%',
}
  • Custom tooltiptext carries percentage
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))
		}
	}

Insert picture description here

Guess you like

Origin blog.csdn.net/Ruffaim/article/details/103147513