當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ECharts简单入门demo

發(fā)布時間：2025/6/17 编程问答 36 豆豆

生活随笔收集整理的這篇文章主要介紹了 ECharts简单入门demo 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script> </head> <body><div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">// 利用dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數(shù)據(jù) 圖標的數(shù)據(jù)可以從后臺構(gòu)造然后傳回前臺var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 myChart.setOption(option);</script> </body> </html>

?=====================================================================================

以下是我自己構(gòu)造的圖：代碼就不貼了。

轉(zhuǎn)載于:https://www.cnblogs.com/houchen/p/11461893.html

總結(jié)

以上是生活随笔為你收集整理的ECharts简单入门demo的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。