Echarts开源可视化库学习(一) 介绍与快速上手
介紹
ECharts是一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫(kù) ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。
一.
Echarts官網(wǎng)
二.
三.
四.編寫圖表網(wǎng)頁(yè)快速上手
工具:Visual Studio Code
文件: echarts.js
參考官方文檔
基本分為5個(gè)步驟,主要圖標(biāo)設(shè)定是在第四步
步驟1：引入echarts.js文件
步驟2：準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子
步驟3：初始化echarts實(shí)例對(duì)象
步驟4：準(zhǔn)備配置項(xiàng)
步驟5：將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
步驟1：引入echarts.js文件
創(chuàng)建一個(gè)文件夾 lib 用來(lái)存放第三方的庫(kù)文件
首先創(chuàng)建一個(gè)html文件和基本結(jié)構(gòu)
在head部分里面輸入
步驟2：準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子+ 步驟3：初始化echarts實(shí)例對(duì)象
步驟2：準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子
在body部分輸入 <
<div id="main" style="width: 500px; height: 400px;"></div>步驟3：初始化echarts實(shí)例對(duì)象
<!--步驟3：初始化echarts實(shí)例對(duì)象--><script>var mCharts= echarts.init(document.getElementById('main'))<script>使用 echarts.js里面的echarts.init()方法
步驟4：準(zhǔn)備配置項(xiàng)+ 步驟5：將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
步驟4：準(zhǔn)備配置項(xiàng)
var option = {
title: {
text: ‘成績(jī)’, // 標(biāo)題文字
link: ‘http://www.itcast.cn’, // 標(biāo)題超鏈接
textStyle: { // 標(biāo)題樣式設(shè)置
color: ‘red’ // 標(biāo)題文字
}
},
xAxis: {
type: ‘category’, // 指明x軸為 類目軸
data: [‘小明’, ‘小紅’, ‘小王’] // 為類目軸提供數(shù)據(jù), 該數(shù)據(jù)是一個(gè)數(shù)組, 數(shù)組中的每個(gè)元素會(huì)呈現(xiàn)在x軸上
},
yAxis: {
type: ‘value’ // 指明x軸為 數(shù)值軸, 指明數(shù)值軸之后, 無(wú)需指定data
},
series: [
{
name: ‘語(yǔ)文’, // 為圖標(biāo)起一個(gè)名稱
type: ‘bar’, // 指明該圖標(biāo)類型為 柱狀圖
data: [70, 92, 87] // 為x軸的每一個(gè)元素, 指明呈現(xiàn)在y軸的數(shù)值
}
]
}
步驟5：將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
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：準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子步驟3：初始化echarts實(shí)例對(duì)象步驟4：準(zhǔn)備配置項(xiàng)步驟5：將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象--> </head> <body><!--步驟2：準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子--><div id="main" style="width: 500px; height: 400px;"></div><!--步驟3：初始化echarts實(shí)例對(duì)象--><script>var mCharts= echarts.init(document.getElementById('main'))//步驟4：準(zhǔn)備配置項(xiàng)var option = {title:{text:'成績(jī)',link: 'http://www.baidu.com',textStyle:{color:'red'}},xAxis:{type: 'category',data: ['小明','小紅','小王']},yAxis:{type:'value'},series:[{name: '語(yǔ)文',type: 'bar',data:[70,92,87]}]}//步驟5：將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象mCharts.setOption(option)</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的Echarts开源可视化库学习(一) 介绍与快速上手的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 使用Visual Studio Code
- 下一篇： NatApp 内网穿透工具简单使用介绍说