ECharts3基础教程（一）简单上手篇
生活随笔
收集整理的這篇文章主要介紹了
ECharts3基础教程（一）简单上手篇
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
要使用 ECharts3 繪制簡單的圖形，可以分為幾個簡單的步驟：
一、引入 ECharts
<!DOCTYPE html> <html> <head><meta charset="utf-8"><!-- 引入 ECharts 文件 --><script src="echarts.min.js"></script> </head> </html>二、為 ECharts 準備具備寬高的 DOM 容器 <body><!-- 為 ECharts 準備一個具備大小（寬高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div> </body>
三、通過?echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖 <!DOCTYPE html> <html> <head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.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>
下一篇會開始介紹 option 的相關配置。
總結
以上是生活随笔為你收集整理的ECharts3基础教程（一）简单上手篇的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IOS添加pch预编译文件
- 下一篇： smartdeblur有手机版吗_《GT