Echart使用

Echart是一款圖表插件，功能強大，使用簡單。Echart官網：https://echarts.baidu.com/examples/#chart-type-line

本文介紹我使用過的折線圖以及餅圖。

1.折線圖：

圖表上能夠浮動數據：

先貼上官網代碼：

option = { title: { text: '折線圖堆疊' }, tooltip: { trigger: 'axis' }, legend: { data:['郵件營銷','聯盟廣告','視頻廣告','直接訪問','搜索引擎'] }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, toolbox: { feature: { saveAsImage: {} } }, xAxis: { type: 'category', boundaryGap: false, data: ['週一','週二','週三','週四','週五','週六','週日'] }, yAxis: { type: 'value' }, 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] } ] };

 

圖標頭部：

 title: { text: '標題名稱',           //如「折線圖堆疊」
                    textStyle: {               //標題樣式設置
                        color: '#000000', fontSize: '18', fontWeight: 'normal', }, x: '10px', y: '10px' }, tooltip: { trigger: 'axis' }, //圖例顏色以及圖例名稱
                color: ['#4B85CB', '#D98175', '#75CBA5', '#0EBCE8', '#778899'], legend: { data: ['郵件營銷','聯盟廣告','視頻廣告','直接訪問','搜索引擎'], //圖例樣式以及位置
 textStyle: { color: '#000000' }, x: 'center', y: '15px' },

 

X軸：

 xAxis: { type: 'category', boundaryGap: false, //這裏是橫軸顯示內容，我這裏用的是傳遞的數組數據，而非固定的星期幾
                    data: [obj[0].Date, obj[1].Date, obj[2].Date, obj[3].Date, obj[4].Date, obj[5].Date, obj[6].Date], axisLine: { lineStyle: { color: '#000000', width: 1        //能夠更改折現粗細
 } }, axisLabel: { show: true, textStyle: { color: '#000000' } } },

 

Y軸：

 yAxis: { type: 'value', axisLine: { lineStyle: { color: '#000000', width: 1 } }, axisLabel: { show: true, textStyle: { color: '#000000', } } }, //下面是數據展現
 series: [ { name: '郵件營銷', type: 'line', //這裏的數據都是從後臺取出的，數量要和X軸對應，此處也爲7個值
 data: [{ value: obj[0].EmailNums, label: { normal: { formatter: GetDataZero(obj[0].EmailNums) } } }, { value: obj[1].EmailNums, label: { normal: { formatter: GetDataZero(obj[1].EmailNums) } } }, { value: obj[2].EmailNums, label: { normal: { formatter: GetDataZero(obj[2].EmailNums) } } }, { value: obj[3].EmailNums, label: { normal: { formatter: GetDataZero(obj[3].EmailNums) } } }, { value: obj[4].EmailNums, label: { normal: { formatter: GetDataZero(obj[4].EmailNums) } } }, { value: obj[5].EmailNums, label: { normal: { formatter: GetDataZero(obj[5].EmailNums) } } }, { value: obj[6].EmailNums, label: { normal: { formatter: GetDataZero(obj[6].EmailNums) } } }] //其餘的省略了……
 }, } ]

 

GetDataZero只是我寫的一個轉換方法，由於在折線圖浮動數據中值爲0時顯示的是「-」，我就寫了這個

<script>
        function GetDataZero(value) { if (value > 0) { return value; } else { return 0; } } </script>