Echarts开源可视化库学习(一) 介绍与快速上手
介紹
ECharts是一個使用 JavaScript 實現的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數據可視化圖表。
一.
Echarts官網
二.
三.
四.編寫圖表網頁快速上手
工具:Visual Studio Code
文件: echarts.js
參考官方文檔
基本分為5個步驟,主要圖標設定是在第四步
步驟1：引入echarts.js文件
步驟2：準備一個呈現圖表的盒子
步驟3：初始化echarts實例對象
步驟4：準備配置項
步驟5：將配置項設置給echarts實例對象
步驟1：引入echarts.js文件
創建一個文件夾 lib 用來存放第三方的庫文件
首先創建一個html文件和基本結構
在head部分里面輸入
步驟2：準備一個呈現圖表的盒子+ 步驟3：初始化echarts實例對象
步驟2：準備一個呈現圖表的盒子
在body部分輸入 <
<div id="main" style="width: 500px; height: 400px;"></div>步驟3：初始化echarts實例對象
<!--步驟3：初始化echarts實例對象--><script>var mCharts= echarts.init(document.getElementById('main'))<script>使用 echarts.js里面的echarts.init()方法
步驟4：準備配置項+ 步驟5：將配置項設置給echarts實例對象
步驟4：準備配置項
var option = {
title: {
text: ‘成績’, // 標題文字
link: ‘http://www.itcast.cn’, // 標題超鏈接
textStyle: { // 標題樣式設置
color: ‘red’ // 標題文字
}
},
xAxis: {
type: ‘category’, // 指明x軸為 類目軸
data: [‘小明’, ‘小紅’, ‘小王’] // 為類目軸提供數據, 該數據是一個數組, 數組中的每個元素會呈現在x軸上
},
yAxis: {
type: ‘value’ // 指明x軸為 數值軸, 指明數值軸之后, 無需指定data
},
series: [
{
name: ‘語文’, // 為圖標起一個名稱
type: ‘bar’, // 指明該圖標類型為 柱狀圖
data: [70, 92, 87] // 為x軸的每一個元素, 指明呈現在y軸的數值
}
]
}
步驟5：將配置項設置給echarts實例對象
mCharts.setOption(option)利用Echarts.js里面的 setOption() 方法
全部代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 步驟1：引入echarts.js文件 --><script src="lib/echarts.min.js"></script><!-- 步驟1：引入echarts.js文件步驟2：準備一個呈現圖表的盒子步驟3：初始化echarts實例對象步驟4：準備配置項步驟5：將配置項設置給echarts實例對象--> </head> <body><!--步驟2：準備一個呈現圖表的盒子--><div id="main" style="width: 500px; height: 400px;"></div><!--步驟3：初始化echarts實例對象--><script>var mCharts= echarts.init(document.getElementById('main'))//步驟4：準備配置項var option = {title:{text:'成績',link: 'http://www.baidu.com',textStyle:{color:'red'}},xAxis:{type: 'category',data: ['小明','小紅','小王']},yAxis:{type:'value'},series:[{name: '語文',type: 'bar',data:[70,92,87]}]}//步驟5：將配置項設置給echarts實例對象mCharts.setOption(option)</script> </body> </html>總結
以上是生活随笔為你收集整理的Echarts开源可视化库学习(一) 介绍与快速上手的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 使用Visual Studio Code
- 下一篇： 利用宝塔linux面板+苹果CMS---