使用echart百度图表的一些经验（1）
2017-09-08 14:40
369 查看
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是图例的形状，可以任意修改。效果图如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 百度图表echart使用心得
- 百度echart使用心得，百度图表。
- 百度echart使用心得，百度图表。
- 百度图表使用心得（一）
- 使用一些需要共享对象的一点小经验
- 解决echart在IE中使用时，在div中加入postion后图表不显示问题
- 基于MVC4+EasyUI的Web开发框架经验总结（4）--使用图表控件Highcharts
- 对百度排名优化不利的一些手段和经验
- asp.net 调用 生成word 后excel 权限不足的问题的一些使用经验
- win32API的一些使用经验
- 分享一下ExpressQuantumGrid4的cxGrid的一些使用方法和经验
- 使用Protobuf的一些经验总结
- TestDirector使用的一些经验（一）
- gulp+webpack+angular1的一点小经验（第三部分使用一些angular1的插件ui-bootstrap与highcharts）
- 百度echart在ie下图表不显示的问题
- mutt manual 和一些使用经验
- 使用linux的一些经验
- 关于cometd的一些使用经验
- 使用Linux五年积累的一些经验技巧