Vue 使用 Echart 折线图如何添加百分比
在vue中引用// vue文件中引入echarts工具let echarts = require('echarts/lib/echarts')require('echarts/lib/chart/line')// 以下的组件按需引入require('echarts/lib/component/tooltip')// tooltip组件require('echarts/li...
·
// 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
}
}
}
option.yAxis.axisLabel = {
show: true,
interval: 'auto',
formatter:'{value}%',
}
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))
}
}
更多推荐
已为社区贡献8条内容
所有评论(0)