echarts怎麼使用（最最最最簡單版）（本質canvas）

時間 2020-05-31

標籤 echarts 怎麼使用最最簡單本質 canvas 简体版

原文原文鏈接

echarts怎麼使用（最最最最簡單版）（本質canvas）

1、總結

一句話總結：外部擴展插件確定要寫js啊，否則數據怎麼進去，否則寬高怎麼設置。本質都是canvas嵌套在頁面上，好比div中。

一、echarts怎麼使用？

引入js，指定控件，編寫jsjavascript

二、怎麼讓外部插件變得很是容易？

頁面源代碼和官方教程html

2、echarts怎麼使用（最最最最簡單版）

3、本身測試（這麼簡單的嗎，看百度教程）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>測試百度Charts</title>
 6     <script src="echarts.js"></script>
 7 </head>
 8 <body>
 9     <div id="main" style="height: 600px;width: 600px;"></div>
10     <div id="chart2" style="height: 600px;width: 600px;"></div>
11     <script type="text/javascript">
12         // 基於準備好的dom，初始化echarts實例
13         var myChart = echarts.init(document.getElementById('main')); 14 
15         // 指定圖表的配置項和數據
16         var option = { 17  title: { 18  text: 'ECharts 入門示例'
19  }, 20  tooltip: {}, 21  legend: { 22  data:['銷量'] 23  }, 24  xAxis: { 25  data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] 26  }, 27  yAxis: {}, 28  series: [{ 29  name: '銷量', 30  type: 'bar', 31  data: [5, 20, 36, 10, 10, 20] 32  }] 33  }; 34 
35         // 使用剛指定的配置項和數據顯示圖表。
36  myChart.setOption(option); 37     </script>
38 </body>
39 </html>

4、測試字符雲（頁面源代碼和官方教程）

查看演示頁面源代碼，你還能有什麼不懂的java

教程很是詳細canvas

相關標籤/搜索

最最

最簡單版