JavaScript可視化與Echarts詳細介紹
更新時間：2022年07月30日 10:35:05 作者：哈哈ha~
提到數(shù)據(jù)可視化相信大家都不陌生，它能夠將單一的數(shù)據(jù)通過合適的可視化圖表類型表現(xiàn)出來，使其更加直觀的展現(xiàn)數(shù)據(jù)的變化趨勢、對比、峰值等等。其實在前端開發(fā)中，數(shù)據(jù)可視化也尤為重要，在眾多圖表庫中，echarts就是最常見的圖表庫之一
一、可視化介紹
- 可視化：將數(shù)據(jù)用圖表展示出來，讓數(shù)據(jù)更加直觀、讓數(shù)據(jù)特點更加突出
- 應用場景：營銷數(shù)據(jù)、生產(chǎn)數(shù)據(jù)、用戶數(shù)據(jù)
二、可視化庫介紹
常見的數(shù)據(jù)可視化庫：
- D3.js：目前 Web 端評價最高的 Javascript 可視化工具庫(入手難)
- ECharts.js：百度出品的一個開源 Javascript 數(shù)據(jù)可視化庫
- Highcharts.js：國外的前端數(shù)據(jù)可視化庫，非商用免費，被許多國外大公司所使用
- AntV：螞蟻金服全新一代數(shù)據(jù)可視化解決方案等等
- Highcharts 和 Echarts 就像是 Office 和 WPS 的關系
ECharts：一個使用 JavaScript 實現(xiàn)的開源可視化庫，可以流暢的運行在 PC 和移動設備上，兼容當前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個性化定制的數(shù)據(jù)可視化圖表
三、Echarts
Echarts引入和使用
下載echarts（庫） 引入文件到html頁面中
<script src="./src/echarts.js"></script>
準備一個DOM容器
<style>
.box {
width: 400px;
height: 400px;
cursor: pointer;
}
</style>
<div class='box'></div>初始化一個echarts對象
var box = document.querySelector(".box")
var echarts1 = echarts.init(box)指定配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data: ['銷量']
},
xAxis: {
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子']
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}將配置項設置給echarts實例對象
echarts1.setOption(option)
了解基礎配置
title：標題組件，包含主標題和副標題
tooltip：提示框組件
legend：圖例組件
series
系列列表：每個系列通過 type 決定自己的圖表類型
xAxis：直角坐標系 grid 中的 x 軸
boundaryGap: 坐標軸兩邊留白策略 true，這時候刻度只是作為分隔線，標簽和數(shù)據(jù)點都會在兩個刻度之間的帶(band)中間
yAxis：直角坐標系 grid 中的 y 軸
grid：直角坐標系內(nèi)繪圖網(wǎng)格
color：調色盤顏色列表
注：不要求全部記憶，只需要知道怎么在官方文檔上查找學習
官方文檔：Documentation - Apache ECharts
（1）示例：標題組件title
title: {
show: true, //是否顯示標題組件
text: '主標題',
link: "http://www.baidu.com", //主標題文本超鏈接
textStyle: { //主標題的文本樣式 相當于css的
color: "blue",
fontWeight: "100"
},
subtext: "副標題",
subtextStyle: { //副標題的文本樣式
color: "red",
fontWeight: "100",
fontSize: "20px"
},
textAlign: "auto", //整體（包括 text 和 subtext）的水平對齊
textVerticalAlign: "auto", //整體（包括 text 和 subtext）的垂直對齊
padding: [5, 10], //標題內(nèi)邊距
left: 400, //title 組件離容器左側的距離
backgroundColor: "yellow" //標題背景色，默認透明
},（2）示例：工具組件toolbox
toolbox: {
//配置工具
feature: {
mytool: { //自定義的工具名字，只能以 my 開頭
show: true,
title: "自定義擴展方法",
icon: "image://https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658941200&t=d5f42a41eab8af5c9929fcc6f9e1eff7",
onclick: function() {
console.log("點擊事件")
}
},
saveAsImage: {
name: "保存"
},
restore: { //配置項還原
},
dataView: { //數(shù)據(jù)視圖工具，可展現(xiàn)當前圖表所用的數(shù)據(jù)，編輯后可動態(tài)更新
},
dataZoom: {}, //數(shù)據(jù)區(qū)域縮放
magicType: { //動態(tài)類型切換
type: ['line', 'bar', 'stack']
}
}
},（3）示例：提示框組件tooltip
tooltip: {
show: true,
trigger: "axis", //觸發(fā)類型 "none"||"axis"
showContent: false, // 是否顯示提示框浮層
alwaysShowContent: true, //是否永遠顯示提示框內(nèi)容
triggerOn: "click", //提示框觸發(fā)的條件
backgroundColor: "gold",
textStyle: {
color: "white"
},
axisPointer: { //是配置坐標軸指示器的快捷方式
type: "cross", //指示器類型 line shadow none cross
axis: "x", //指示器的坐標軸
snap: true, //坐標軸指示器是否自動吸附到點上
label: { //坐標軸指示器的文本標簽
show: true,
color: "red",
formatter: ({ //文本標簽文字的格式化器
value
}) => {
console.log(value)
return `--${value}` //value*2
}
}
}
},（4）示例：圖例組件legend
legend: {
type: "scroll", //圖例的類型 plain普通圖例 scroll可滾動翻頁的圖例
orient: "vertical", //圖例列表的布局朝向 vertical horizontal
data: [{
name: '銷量1', //圖例項的名稱
icon: "circle", //圖例項的 icon
itemStyle: {
color: "red"
}
}, {
name: '銷量2',
icon: "rect",
itemStyle: {
color: "red"
}
}, {
name: '純利1',
icon: "triangle",
textStyle: {
color: "red",
fontSize: "20px"
}
}, {
name: '純利2',
icon: "path://", //'path://' 將圖標設置為任意的矢量路徑
icon: "image://url", //通過圖片鏈接設置為圖片
icon: "image://https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1658941200&t=d5f42a41eab8af5c9929fcc6f9e1eff7" //通過圖片編碼設置為圖片
}]
},（5）示例：系列列表series
series: [{
name: "某某系列1",
type: 'line',
colorBy: "series", //按系列分配調色盤中的顏色，同一系列中的所有數(shù)據(jù)都是用相同的顏色
symbol: "rect", //標記的圖形 設置拐點
cursor: "move",
label: {
show: true //是否顯示標簽文字
},
endLabel: { //折線端點的標簽
show: true
},
labelLine: {
show: true, //是否顯示連接線
smooth: true //是否平滑
},
lineStyle: { //標簽的視覺引導線配置
color: "red",
width: 2,
join: "miter" //設置2個長度不為0的相連部分如何連接在一起的屬性
},
smooth: 0.3,
data: [420, 432, 401, 434, 190, 130, 120],
}, {
name: "某某系列2",
type: 'line',
symbol: "arrow",
symbolSize: 10, // 拐點大小
data: [860, 962, 961, 964, 1260, 1360, 1360],
}]
};（6）示例：直角坐標系 grid 中的 x、y軸（類似）
xAxis: {
show: true; //是否顯示x軸
data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] //類目數(shù)據(jù)，在類目軸
position:'top' //x軸的位置
name:'坐標軸的名稱'
axisTick: {
show: false // 去除刻度線
},
axisLabel: {
color: '#4c9bfd' // 文本顏色
},
axisLine: {
show: false // 去除軸線
},
boundaryGap: false // 去除軸內(nèi)間距
},（7）藍丁格爾玫瑰圖
<style>
.box {
width: 500px;
height: 500px;
}
</style>
<div class="box"></div>
<script>
var box = document.querySelector(".box")
var ect = echarts.init(box)
option = {
title: {
text: 'Nightingale Chart',
subtext: 'Fake Data',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/> : {c} (vvxyksv9kd%)'
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
series: [{
name: '面積模式',
type: 'pie',
radius: [30, 110],
center: ['25%', '50%'],
roseType: 'radius',
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
itemStyle: {
borderRadius: 5
},
label: {
show: false,
fontSize: 10
},
emphasis: {
label: {
show: true
}
},
labelLine: {
// 連接扇形圖線長
length: 6,
// 連接文字線長
length2: 8
},
data: [{
value: 20,
name: '云南'
},
{
value: 26,
name: '北京'
},
{
value: 24,
name: '山東'
},
{
value: 25,
name: '河北'
},
{
value: 20,
name: '江蘇'
},
{
value: 25,
name: '浙江'
},
{
value: 30,
name: '四川'
},
{
value: 42,
name: '湖北'
}
]
}, ]
};
ect.setOption(option)
</script>效果圖：
到此這篇關于JavaScript可視化與Echarts詳細介紹的文章就介紹到這了,更多相關JavaScript可視化與Echarts內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JS使用正則表達式實現(xiàn)常用的表單驗證功能,結合實例形式分析了JS基于正則表達式的表單驗證功能原理、實現(xiàn)技巧與操作注意事項,需要的朋友可以參考下2020-04-04
獲取元素和鼠標的位置（兼容IE6.0,IE7.0,IE8.0,FireFox2.0,FireFox3.5,Opera），該功能是我一同事鉆研出來的，目標是為了實現(xiàn)與QQ自定義布局和拖放模塊類似的功能。2009-12-12
詳解JavaScript?(!!)?中的雙感嘆號是干什么用的
JavaScript?不是靜態(tài)語言，而是動態(tài)語言，這意味著變量可以引用或保存任何類型的值，此外，該類型可以隨時更改，這篇文章主要介紹了JavaScript?(!!)?中的雙感嘆號作用,需要的朋友可以參考下2022-09-09
JavaScript 程序錯誤Cannot use ''in'' operator to search的解決方法
下面小編就為大家?guī)硪黄狫avaScript 程序錯誤Cannot use 'in' operator to search的解決方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
js中getBoundingClientRect的作用及兼容方案詳解
這篇文章主要介紹了js中getBoundingClientRect的作用及兼容方案詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
今天就給大家介紹一個特別基礎的東西，javascript中函數(shù)的一點兒小知識之js代碼的執(zhí)行順序問題，需要的朋友參考下吧2017-10-10
在面試過程中經(jīng)常被面試官問到這樣的題目：如何判斷數(shù)組？下面小編就針對這個問題給大家收集整理了份資料，感興趣的朋友一起看看吧2017-10-10
TypeScript?是一種強類型的超集?JavaScript,它為開發(fā)者提供了靜態(tài)類型檢查、代碼提示以及更好的可維護性,本文將深入解析?TypeScript?裝飾器,從基礎概念到高級用法,逐步探討其作用、原理以及實際應用場景,以幫助你更好地理解和利用這一功能,需要的朋友可以參考下2023-09-09
layer.open提交子頁面的form和layedit文本編輯內(nèi)容的方法
今天小編就為大家分享一篇layer.open提交子頁面的form和layedit文本編輯內(nèi)容的方法，具有好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JS實現(xiàn)線性表的鏈式表示方法示例【經(jīng)典數(shù)據(jù)結構】
這篇文章主要介紹了JS實現(xiàn)線性表的鏈式表示方法,簡單講解了線性表鏈式表示的原理并結合實例形式分析了js針對線性表鏈式表示的創(chuàng)建、插入、刪除等節(jié)點操作技巧,需要的朋友可以參考下2017-04-04