echart---折線圖樣式處理
阿新 • • 發佈：2018-12-21
這裡主要是對摺線圖的一下預設樣式進行處理，主要修改以下屬性：
1、grid--控制圖示與canvas的留白區域，legend放在左邊，grid.x要預留legend的寬度
2、xAxis、yAxis---主要對x軸和y軸的樣式做了調整
（1）y軸--不顯示的刻度線、不顯示軸線、顯示刻度參考線（即一橫一橫的背景線）
（1）x軸--顯示的刻度線、顯示軸線、不顯示刻度參考線，文字傾斜
修改的地方，程式碼中基本有註釋
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>改過樣式的折線圖</title> </head> <body> <div id='test1' style="float:left; width: 800px; height: 520px; position: absolute;"></div> <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script> <script> var lingChart = echarts.init(document.getElementById('test1')); var option = { tooltip: { trigger: 'axis' }, legend: { orient: 'vertical', x: 'left', // 'center' | 'left' | {number}, y: 'center', // 'center' | 'bottom' | {number} data: ['專題庫', '主題庫'] }, grid: { // 控制圖表與canvas的留白 x: 130, //左 y: 10, //上 x2: 0, //右 y2: 50, //下 }, xAxis: { type: 'category', name: '', data: ['週一','週二','週三','週四','週五','週六','週日'], axisTick: { // 控制x軸是否顯示 alignWithLabel: true, show: true }, splitLine: { show: false,//X軸的刻度參考線 lineStyle: { color: '#E0E0E0' } }, axisLine: { lineStyle: { color:'#E0E0E0', //設定x軸線的顏色 width: 1 // 這裡是為了突出顯示加上的 } }, axisLabel: { 'interval': 0, rotate: 40,//x軸上的文字多的時候，會有重疊，所以用個傾斜角度，滿足完整展示文字的需求 color: '#333333'//x軸上的文字顏色 } }, yAxis: { type: 'value', splitLine: { // 控制背景長橫線 show: true, color: '#e0e0e0' }, axisLine: { // 控制Y軸刻度線 show: false, lineStyle: { color: '#333333' } }, axisTick: { // 控制Y軸顯示 show: false } }, series: [{ name: '專題庫', type: 'line', symbol: 'circle', // 設定為實心點 symbolSize: 8, // 設定實心點的大小 data: [123,234,122,189,490,149,160], itemStyle: { normal: { color: ['#7BCC23'], lineStyle: { color: ['#7BCC23'], } } } }, { name: '主題庫', type: 'line', symbol: 'circle', // 設定為實心點 symbolSize: 8, // 設定實心點的大小 data: [346,456,178,100,154,160,269], itemStyle: { normal: { color: ['#0A9CF8'], lineStyle: { color: ['#0A9CF8'], } } } } ] } lingChart.setOption(option) </script> </body> </html>