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

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐