echarts legend圖例換行及多條線並存

                   var that = this;

                    var myChart = echarts.init(document.getElementById('discNav01ImgCon'));

                    option = {

                        color:['#5962FF','#F7622E'],  //顏色分類

                        legend: [{

                                x:'90%',

                                y:'0',

                                data: ['買入'],

                                icon:'circle',

                                

                            },{

                                x:'90%',

                                y:'6%',

                                data:['賣出'],  //數據顯示

                                icon:'circle',//圖例形狀

                                

                            }],

                         grid: {  //網狀定位

                                left: '2%',

                                right: '4%',

                                bottom: '3%',

                                containLabel: true

                            },

                        xAxis: {

                            name:'時間',

                            nameTextStyle:{

                                color:'#315589',

                                fontSize:14

                            },

                            axisLine:{

                                lineStyle:{

                                    color:'#E1E1E1'

                                }

                            },

                            axisLabel:{

                            color:'#BABABA'

                            },

                            type: 'category',

                            boundaryGap: false,//頂頭

                            data: ['9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00']

                        },

                        yAxis: {

                            name:'價格(%)',

                            nameTextStyle:{

                                color:'#315589',

                                fontSize:14

                            },

                            axisLine:{

                                show:false,

                                lineStyle:{

                                color:'#E1E1E1'

                                }

                            },

                            axisLabel:{

                            color:'#BABABA'

                            },

                            type: 'value'

                        },

                        series: [

                            {

                                name:'買入',   

                                type: 'line', 

                                data: [820, 932, 901, 934, 1290, 1330, 1320],

                                stack: '元',

                                smooth: true,

                                lineStyle:{  //線條樣式

                                    color:"#5962FF",

                                    width:'6',

                                    shadowColor:'#5962FF',

                                    shadowBlur:'20',

                                    shadowOffsetX:'0',

                                    shadowOffsetY:'10',

                                },

                                symbol:'none',

                            },

                            {

                                name:'賣出',

                                type: 'line',

                                data: [1320, 932, 1200, 934, 1000, 1330, 800],

                                stack: '元',

                                smooth: true,

                                lineStyle:{

                                    color:"#F7622E",

                                    width:'6',

                                    shadowColor:'#F7622E',

                                    shadowBlur:'20',

                                    shadowOffsetX:'0',

                                    shadowOffsetY:'10',

                                },

                                symbol:'none',

                            }

                        ]

                    };

                    myChart.setOption(option);

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章