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