echarts折線圖
阿新 • • 發佈：2018-12-20
效果圖
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>折線圖</title> <style type="text/css"> body{background-color: #000000;} #myChart{width: 800px;height: 500px;} </style> </head> <body> <div id="myChart"></div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.min.js"></script> <script type="text/javascript"> var myChart = echarts.init(document.getElementById('myChart')); option = { title: { text: '折線圖堆疊', textStyle:{//圖例文字的樣式 color:'#FFFFFF', fontSize:16 } }, tooltip: { trigger: 'axis' }, // 這個color是更改折線圖上面的提示線條顏色 color:["#FFFFFF","#FFFFFF","#FFFFFF","#FFFFFF","#FFFFFF","#FFFFFF"], legend: { data: ['郵件營銷', '聯盟廣告', '視訊廣告', '直接訪問', '搜尋引擎'], textStyle:{//圖例文字的樣式 color:'#FFFFFF', fontSize:16 } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['週一', '週二', '週三', '週四', '週五', '週六', '週日'], axisLine:{ lineStyle:{ color:"#FFFFFF", width:3 } } }, yAxis: { type: 'value', axisLine:{ lineStyle:{ color:'#FFFFFF', width:1,//這裡是為了突出顯示加上的 } } }, series: [{ name: '郵件營銷', type: 'line', stack: '總量', data: [120, 132, 101, 134, 90, 230, 210], // lineStyle這個屬性是更改折現的顏色 lineStyle:{ normal:{ color:"#FFFFFF", width:3 } } }, { name: '聯盟廣告', type: 'line', stack: '總量', data: [220, 182, 191, 234, 290, 330, 310], lineStyle:{ normal:{ color:"#FFFFFF", width:3 } } }, { name: '視訊廣告', type: 'line', stack: '總量', data: [150, 232, 201, 154, 190, 330, 410], lineStyle:{ normal:{ color:"#FFFFFF", width:3 } } }, { name: '直接訪問', type: 'line', stack: '總量', data: [320, 332, 301, 334, 390, 330, 320], lineStyle:{ normal:{ color:"#FFFFFF", width:3 } } }, { name: '搜尋引擎', type: 'line', stack: '總量', data: [820, 932, 901, 934, 1290, 1330, 1320], lineStyle:{ normal:{ color:"#FFFFFF", width:3 } } } ] }; myChart.setOption(option); </script> </body> </html>