echarts折線圖Demo
阿新 • • 發佈:2018-12-20
option = { backgroundColor: 'black', tooltip: { trigger: 'axis' }, color: ['#f69846', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7', '#ad46f3', '#f845f1', '#ff4343', '#ffa800', '#39E7FB', '#FAC901', ], legend: { icon: "circle", // 這個欄位控制形狀 型別包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none textStyle: { color: 'white', fontSize: 18 }, data: ['郵件營銷', '聯盟廣告', '視訊廣告', '直接訪問', '搜尋引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { //視覺化工具箱 x: 'center', y: '25', feature: { dataView: { //資料檢視 show: true }, restore: { //重置 show: true }, dataZoom: { //資料縮放檢視 show: true }, saveAsImage: { //儲存圖片 show: true }, magicType: { //動態型別切換 type: ['bar', 'line'] } }, iconStyle: { normal: { color: 'white', //設定圖示顏色 textStyle: { color: 'white', fontSize: 1000 }, }, emphasis: { //字型顏色及位置 color: 'white', textPosition: 'bottom' } } }, xAxis: { type: 'category', boundaryGap: false, data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'], axisTick: { show: false//刪除超出正座標線段 }, axisLine: { lineStyle: { color: 'white', } }, axisLabel: { show: true, textStyle: { color: 'white', fontSize: 18 } }, }, yAxis: { type: 'value', axisTick: { show: false//刪除超出正座標線段 }, axisLine: { lineStyle: { color: 'white', } }, axisLabel: { textStyle: { color: 'white', fontSize: 18 } }, splitLine: { //座標軸以外的橫線顏色 lineStyle: { type:'dashed',//虛線 color: 'white' } } }, 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] } ] };
option = { backgroundColor: 'white', tooltip: { trigger: 'axis' }, color: ['#f69846', '#00ffb4', '#44aff0', '#f6d54a', '#45dbf7', '#ad46f3', '#f845f1', '#ff4343', '#ffa800', '#39E7FB', '#FAC901', ], legend: { icon: "circle", // 這個欄位控制形狀 型別包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none textStyle: { color: 'black', fontSize: 18 }, data: ['郵件營銷', '聯盟廣告', '視訊廣告', '直接訪問', '搜尋引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { //視覺化工具箱 color: 'white', x: 'center', y: '25', feature: { dataView: { //資料檢視 show: true }, restore: { //重置 show: true }, dataZoom: { //資料縮放檢視 show: true }, saveAsImage: { //儲存圖片 show: true }, magicType: { //動態型別切換 type: ['bar', 'line'] } }, iconStyle: { normal: { color: 'white', //設定圖示顏色 }, emphasis: { //字型顏色及位置 color: 'black', textPosition: 'bottom' } } }, xAxis: { type: 'category', axisTick: { show: false//刪除超出正座標線段 }, boundaryGap: false, data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'], axisLine: { lineStyle: { color: 'black', } }, axisLabel: { show: true, textStyle: { color: 'black', fontSize: 18 } }, }, yAxis: { type: 'value', axisTick: { show: false//刪除超出正座標線段 }, axisLine: { lineStyle: { color: 'black', } }, axisLabel: { textStyle: { color: 'black', fontSize: 18 } }, splitLine: { //座標軸以外的橫線顏色 lineStyle: { type:'dashed',//虛線 color: 'black' } } }, 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] } ] };