目錄
- 介紹
- 5 分鐘上手 echarts
- echarts 基礎配置
- 在 vue 項目中使用 echarts
(一) 介紹
- echarts 是數(shù)據(jù)可視化的框架
- 市面上的同類產(chǎn)品 D3.js、hightcharts.js、echarts.js……
- 文檔地址 https://echarts.baidu.com/
(二) 五分鐘上手 echarts
- 引入 echarts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/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="https://cdn.bootcss.com/echarts/4.2.1-rc1/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')); // 指定圖表的配置項和數(shù)據(jù) var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。 myChart.setOption(option); </script> </body> </html>這樣你的第一個圖表就誕生了！
[圖片上傳失敗...(image-d77c35-1566982907634)]
(三) Echarts 基礎配置
[圖片上傳失敗...(image-109d22-1566982907634)]
(四) 在 vue 項目中使用 Echarts
-
安裝 Echarts
npm install echarts --save -
在 vue 中使用
// 例1 <template> <div id="chart" style="width: 300px;height:300px;" /> </template> <script> import echarts from "echarts"; export default { mounted() { this.initChart(); }, methods: { initChart() { this.chart = echarts.init(document.getElementById("chart")); this.chart.setOption({ title: { text: "ECharts 入門示例" }, tooltip: {}, xAxis: { data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"] }, yAxis: {}, series: [ { name: "銷量", type: "bar", data: [5, 20, 36, 10, 10, 20] } ] }); } } }; </script>// 例2 按需加載,避免體積過大 <template> <div id="chart" style="width: 300px;height:300px;" /> </template> <script> // 引入 ECharts 主模塊 import echarts from "echarts/lib/echarts"; // 引入柱狀圖 import("echarts/lib/chart/bar"); // 引入提示框和標題組件 import("echarts/lib/component/tooltip"); import("echarts/lib/component/title"); export default { mounted() { this.initChart(); }, methods: { initChart() { let myChart = echarts.init(document.getElementById("chart")); myChart.setOption({ xAxis: { type: "category", data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"] }, yAxis: { type: "value" }, series: [ { data: [820, 932, 901, 934, 1290, 1330, 1320
