echarts是一款非常強(qiáng)大的數(shù)據(jù)可視化工具,它支持使用json格式的數(shù)據(jù)進(jìn)行繪制,下面介紹如何使用echarts程序繪制json的數(shù)據(jù)。
首先,我們需要在HTML頁面中引入echarts的文件:
<script src="echarts.min.js"></script>
接著,在HTML頁面中放置一個div元素,用于echarts繪圖:
<div id="chart" style="width: 600px;height:400px"></div>
然后,我們需要編寫一個json格式的數(shù)據(jù):
var data = {
"title": {
"text": "柱形圖數(shù)據(jù)展示"
},
"tooltip": {},
"legend": {
"data": ["銷量"]
},
"xAxis": {
"data": ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
},
"yAxis": {},
"series": [{
"name": "銷量",
"type": "bar",
"data": [5, 20, 36, 10, 10, 20]
}]
};
最后,我們需要使用echarts的API來繪制出數(shù)據(jù)圖表,代碼如下:
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption(data);
以上就是使用echarts程序繪制json的數(shù)據(jù)的全部步驟,從數(shù)據(jù)的準(zhǔn)備到繪制圖表,每個步驟都十分關(guān)鍵。