當前位置：
首頁 >
ECharts简单入门demo
發布時間：2025/6/17
51
豆豆
生活随笔
收集整理的這篇文章主要介紹了
ECharts简单入门demo
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
</head>
<body><!-- 為ECharts準備一個具備大小（寬高）的Dom --><div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">// 利用dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據 圖標的數據可以從后臺構造 然后傳回前臺var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);</script> </body> </html>
<script type="text/javascript">// 利用dom，初始化echarts實例var myChart = echarts.init(document.getElementById('main'));// 指定圖表的配置項和數據 圖標的數據可以從后臺構造 然后傳回前臺var option = {title: {text: 'ECharts 入門示例'},tooltip: {},legend: {data:['銷量']},xAxis: {data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]},yAxis: {},series: [{name: '銷量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option);</script> </body> </html>
?
?=====================================================================================
以下是我自己構造的圖：代碼就不貼了。
?
轉載于:https://www.cnblogs.com/houchen/p/11461893.html
總結
以上是生活随笔為你收集整理的ECharts简单入门demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 排序算法 动图讲解
- 下一篇： 网络基础 + 简易服务端和客户端