echarts折线图、数据百分⽐
y轴百分⽐ 在yAxis中加上 formatter: ‘{value} %’
yAxis:{
type:'value',
axisLabel:{
show:true,
interval:'auto',
formatter:'{value} %'//纵坐标百分⽐
}
},
数据百分⽐ 在option 中加上
tooltip:{
trigger:'axis',
formatter:'{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />{a3}: {c3}%<br />{a4}: {c4}%'//展⽰百分⽐五条折线},
代码
<div id="main" ></div>
var myChart = echarts.ElementById('main'),'dark');//dark设置背景⾊默认⽩⾊
myChart.clear();//清除
var formatter ='{b0}';//展⽰百分⽐
var j =0;
for(var k =0; k <5; k ++){//折线数不确定假设有五条
formatter +='<br/>{a'+j+'}: {c'+j+'}%';
j ++;
}
option ={
title:{
text:'折线图堆叠'
},
tooltip:{
trigger:'axis',
formatter: formatter //展⽰百分⽐
//    //'{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />{a3}: {c3}%<br />{a4}: {c4}%'  五条折线
},
legend:{
data:['邮件营销','联盟⼴告','视频⼴告','直接访问','搜索引擎']
},
grid:{
left:'3%',
right:'4%',
bottom:'3%',
margin属性值可以为百分比containLabel:true
},
toolbox:{
feature:{
saveAsImage:{}
}
},
xAxis:{
type:'category',
boundaryGap:false,
data:['周⼀','周⼆','周三','周四','周五','周六','周⽇']
},
},
yAxis:{
type:'value',
axisLabel:{
show:true,
interval:'auto',
formatter:'{value} %'//纵坐标百分⽐
}
},
series:[
{
name:'邮件营销',
type:'line',
stack:'总量',
data:[120,132,101,134,90,230,210]
},
{
name:'联盟⼴告',
type:'line',
stack:'总量',
data:[220,182,191,234,290,330,310] },
{
name:'视频⼴告',
type:'line',
stack:'总量',
data:[150,232,201,154,190,330,410] },
{
name:'直接访问',
type:'line',
stack:'总量',
data:[320,332,301,334,390,330,320] },
{
name:'搜索引擎',
type:'line',
stack:'总量',
data:[820,932,901,934,1290,1330,1320] }
]
};
myChart.setOption(option);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。