Echarts.JS 2.2使用方法 5分鐘學會
阿新 • • 發佈：2019-01-24
第一步：下載echarts.js，將其解壓到專案下
第二步：新建echarts.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
</body>第三步：引入echarts.js
<script type="text/javascript" src="./echarts-2.2.7/build/source/echarts.js"></script> <script type="text/javascript"> // 路徑配置 require.config({ paths: { echarts: './echarts-2.2.7/build/dist' } }); </script>
第四步 動態載入要使用的圖表
<script type="text/javascript"> // 路徑配置 require.config({ paths: { echarts: './echarts-2.2.7/build/dist' } }); require( [ 'echarts', 'echarts/chart/line', // 按需載入所需圖表，如需動態型別切換功能，別忘了同時載入相應圖表 'echarts/chart/bar' ], function (ec) { var myChart = ec.init(document.getElementById('main')); var option = { ... } myChart.setOption(option); } ); </script>
第五步：選擇你要用什麼圖表
這裡我選擇了標準折線圖
點進去可以看到它的例項option
把它的option拷貝到自己的html裡，就可以用了
實際專案中，圖表的屬性和資料根據需求去設定就好了，可以參照它的例項去改，換成自己想要的就行了