使用echart百度图表的一些经验（1）
myChart.setOption({
tooltip: {
trigger : 'axis'
},
color:['#36b0de','#6fc536','#b46b51'],
legend: {
align: 'left',
x: 20,
data:[
{
name:'支付宝',
icon:'circle'
},
{
name:'微信',
icon:'circle'
},
{
name:'银行卡',
icon:'circle'
},
]
},
grid : {
left : '3%',
right : '4%',
bottom : '3%',
containLabel : true
},
calculable : true,
xAxis: {
type : 'category',
boundaryGap : false,
data:data.dateList,
},
yAxis: {
type : 'value'
},
series: [{
name: '支付宝',
type: 'line',
stack : '支付宝金额',
data: data.alipayDataList,
},
{
name: '微信',
type: 'line',
stack : '微信金额',
data:data.wxpayDataList,
},
{
name: '银行卡',
type: 'line',
stack : '银行卡金额',
data:data.bankpayDataList,
},]
}); 1.echarts折线图不堆叠设置
折线图堆叠的重要参数是stack，只要将stack的值设置为不相同，就不会堆叠了。标红位置为stack
series: [{
name: '支付宝',
type: 'line',
stack : '支付宝金额',
data: data.alipayDataList,
},
{
name: '微信',
type: 'line',
stack : '微信金额',
data:data.wxpayDataList,
},
{
name: '银行卡',
type: 'line',
stack : '银行卡金额',
data:data.bankpayDataList,
},]
2.legend 图例的相关修改
legend: {
align: 'left',
x: 20,
data:[
{
name:'支付宝',
icon:'circle'
},
{
name:'微信',
icon:'circle'
},
{
name:'银行卡',
icon:'circle'
},
]
},
align指的是图例的位置，要结合下边的x，y一起使用。
icon是图例的形状，可以任意修改。效果图如下：