echarts是一個(gè)開(kāi)源的數(shù)據(jù)可視化工具,可以幫助我們通過(guò)數(shù)據(jù)進(jìn)行圖表展示。而市的json數(shù)據(jù)是一種常見(jiàn)的數(shù)據(jù)格式,為了展示市的相關(guān)數(shù)據(jù),我們需要使用echarts對(duì)市的json進(jìn)行解析。
// 引入echarts var myChart = echarts.init(document.getElementById('myChart')); // 加載市的json數(shù)據(jù) $.get('city.json', function (data) { // 解析數(shù)據(jù) var option = { title: { text: '市人口數(shù)據(jù)' }, tooltip: {}, xAxis: { data: [] }, yAxis: {}, series: [{ name: '人口', type: 'bar', data: [] }] }; // 遍歷市的json數(shù)據(jù),將數(shù)據(jù)填充到圖表中 for (var i = 0; i< data.length; i++) { option.xAxis.data.push(data[i].cityName); option.series[0].data.push(data[i].population); } // 使用option配置圖表 myChart.setOption(option); });
以上代碼使用了echarts的init方法來(lái)初始化圖表,然后通過(guò)get方法獲取市的json數(shù)據(jù)。接著,我們解析json數(shù)據(jù),將城市和人口數(shù)據(jù)分別填充到option配置中,最后使用setOption方法將圖表渲染出來(lái)。
通過(guò)這種方式,我們可以方便地使用echarts來(lái)展示市的json數(shù)據(jù),從而更加直觀地了解市的相關(guān)信息。
上一篇python 線程攜程
下一篇vue制作小程序