1. 程式人生 > >echarts Hello world 入門

echarts Hello world 入門

官網下載 init pla splay opened wid val log div

技術分享圖片
<!DOCTYPE html>
<html>

<head>
    <title></title>
    <script type="text/javascript" src="echarts.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)); // 指定圖表的配置項和數據 option = { xAxis: { type: category, data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun] }, yAxis: { type:
value }, series: [{ data: [820, 932, 901, 934, 1290, 1330, 1320], type: line }] }; // 使用剛指定的配置項和數據顯示圖表。 myChart.setOption(option); </script> </body> </html>
View Code

可以通過官網下載 echarts ,然後引入相關的echarts.js.

技術分享圖片

設置存放圖像的容器

技術分享圖片

設置echarts 參數,這個可以設置多種多樣的形式,參照官網

技術分享圖片

然後 ,最後綁定options

技術分享圖片

結果

技術分享圖片

echarts Hello world 入門