Echarts是一款基于JavaScript的可視化圖表庫,它支持多種類型的圖表展示,例如:折線圖,柱狀圖,餅圖等。在Echarts中,我們可以通過傳入JSON數據來呈現我們所需要的圖表。
利用Echarts中的option配置項,我們可以通過設置相應的參數,例如:標題,X軸,Y軸,圖例等,來呈現出需要的圖表效果。下面是一個簡單的JSON數據示例:
var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '某網站用戶訪問來源', subtext: '純屬虛構', x: 'center' }, tooltip: { trigger: 'item', formatter: "{a}
{b} : {c} (xbjdjxz%)" }, legend: { orient: 'vertical', left: 'left', data: ['直接訪問', '郵件營銷', '聯盟廣告', '視頻廣告', '搜索引擎'] }, series: [ { name: '訪問來源', type: 'pie', radius: '55%', center: ['50%', '60%'], data:[ {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, {value:234, name:'聯盟廣告'}, {value:135, name:'視頻廣告'}, {value:1548, name:'搜索引擎'} ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option);
上面的代碼是一個簡單的餅狀圖的例子,我們可以看到,在option配置項中,我們設置了標題,工具提示,圖例和數據,通過setOption方法傳入myChart對象中即可呈現出所需要的圖表效果。
總而言之,通過傳入JSON數據可以讓我們輕松的利用Echarts呈現出所需的圖表效果,幫助我們更好的展示和分析數據。