您好,登錄后才能下訂單哦!
這篇文章主要講解了“JavaScript可視化與Echarts實(shí)例分析”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“JavaScript可視化與Echarts實(shí)例分析”吧!
可視化:將數(shù)據(jù)用圖表展示出來(lái),讓數(shù)據(jù)更加直觀、讓數(shù)據(jù)特點(diǎn)更加突出
應(yīng)用場(chǎng)景:營(yíng)銷數(shù)據(jù)、生產(chǎn)數(shù)據(jù)、用戶數(shù)據(jù)
常見(jiàn)的數(shù)據(jù)可視化庫(kù):
D3.js:目前 Web 端評(píng)價(jià)最高的 Javascript 可視化工具庫(kù)(入手難)
ECharts.js:百度出品的一個(gè)開(kāi)源 Javascript 數(shù)據(jù)可視化庫(kù)
Highcharts.js:國(guó)外的前端數(shù)據(jù)可視化庫(kù),非商用免費(fèi),被許多國(guó)外大公司所使用
AntV:螞蟻金服全新一代數(shù)據(jù)可視化解決方案等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的關(guān)系
ECharts:一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù),可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上,兼容當(dāng)前絕大部分瀏覽器(IE8/9/10/11,Chrome,F(xiàn)irefox,Safari等),底層依賴矢量圖形庫(kù) ZRender,提供直觀,交互豐富,可高度個(gè)性化定制的數(shù)據(jù)可視化圖表
下載echarts(庫(kù)) 引入文件到html頁(yè)面中
<script src="./src/echarts.js"></script>
準(zhǔn)備一個(gè)DOM容器
<style> .box { width: 400px; height: 400px; cursor: pointer; } </style> <div class='box'></div>
初始化一個(gè)echarts對(duì)象
var box = document.querySelector(".box") var echarts1 = echarts.init(box)
指定配置項(xiàng)和數(shù)據(jù)
var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data: ['銷量'] }, xAxis: { data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }
將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象
echarts1.setOption(option)
title:標(biāo)題組件,包含主標(biāo)題和副標(biāo)題
tooltip:提示框組件
legend:圖例組件
series
系列列表:每個(gè)系列通過(guò) type 決定自己的圖表類型
xAxis:直角坐標(biāo)系 grid 中的 x 軸
boundaryGap: 坐標(biāo)軸兩邊留白策略 true,這時(shí)候刻度只是作為分隔線,標(biāo)簽和數(shù)據(jù)點(diǎn)都會(huì)在兩個(gè)刻度之間的帶(band)中間
yAxis:直角坐標(biāo)系 grid 中的 y 軸
grid:直角坐標(biāo)系內(nèi)繪圖網(wǎng)格
color:調(diào)色盤顏色列表
注:不要求全部記憶,只需要知道怎么在官方文檔上查找學(xué)習(xí)
官方文檔:Documentation - Apache ECharts
(1)示例:標(biāo)題組件title
title: { show: true, //是否顯示標(biāo)題組件 text: '主標(biāo)題', link: "http://www.baidu.com", //主標(biāo)題文本超鏈接 textStyle: { //主標(biāo)題的文本樣式 相當(dāng)于css的 color: "blue", fontWeight: "100" }, subtext: "副標(biāo)題", subtextStyle: { //副標(biāo)題的文本樣式 color: "red", fontWeight: "100", fontSize: "20px" }, textAlign: "auto", //整體(包括 text 和 subtext)的水平對(duì)齊 textVerticalAlign: "auto", //整體(包括 text 和 subtext)的垂直對(duì)齊 padding: [5, 10], //標(biāo)題內(nèi)邊距 left: 400, //title 組件離容器左側(cè)的距離 backgroundColor: "yellow" //標(biāo)題背景色,默認(rèn)透明 },
(2)示例:工具組件toolbox
toolbox: { //配置工具 feature: { mytool: { //自定義的工具名字,只能以 my 開(kāi)頭 show: true, title: "自定義擴(kuò)展方法", 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("點(diǎn)擊事件") } }, saveAsImage: { name: "保存" }, restore: { //配置項(xiàng)還原 }, dataView: { //數(shù)據(jù)視圖工具,可展現(xiàn)當(dāng)前圖表所用的數(shù)據(jù),編輯后可動(dòng)態(tài)更新 }, dataZoom: {}, //數(shù)據(jù)區(qū)域縮放 magicType: { //動(dòng)態(tài)類型切換 type: ['line', 'bar', 'stack'] } } },
(3)示例:提示框組件tooltip
tooltip: { show: true, trigger: "axis", //觸發(fā)類型 "none"||"axis" showContent: false, // 是否顯示提示框浮層 alwaysShowContent: true, //是否永遠(yuǎn)顯示提示框內(nèi)容 triggerOn: "click", //提示框觸發(fā)的條件 backgroundColor: "gold", textStyle: { color: "white" }, axisPointer: { //是配置坐標(biāo)軸指示器的快捷方式 type: "cross", //指示器類型 line shadow none cross axis: "x", //指示器的坐標(biāo)軸 snap: true, //坐標(biāo)軸指示器是否自動(dòng)吸附到點(diǎn)上 label: { //坐標(biāo)軸指示器的文本標(biāo)簽 show: true, color: "red", formatter: ({ //文本標(biāo)簽文字的格式化器 value }) => { console.log(value) return `--${value}` //value*2 } } } },
(4)示例:圖例組件legend
legend: { type: "scroll", //圖例的類型 plain普通圖例 scroll可滾動(dòng)翻頁(yè)的圖例 orient: "vertical", //圖例列表的布局朝向 vertical horizontal data: [{ name: '銷量1', //圖例項(xiàng)的名稱 icon: "circle", //圖例項(xiàng)的 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://' 將圖標(biāo)設(shè)置為任意的矢量路徑 icon: "image://url", //通過(guò)圖片鏈接設(shè)置為圖片 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" //通過(guò)圖片編碼設(shè)置為圖片 }] },
(5)示例:系列列表series
series: [{ name: "某某系列1", type: 'line', colorBy: "series", //按系列分配調(diào)色盤中的顏色,同一系列中的所有數(shù)據(jù)都是用相同的顏色 symbol: "rect", //標(biāo)記的圖形 設(shè)置拐點(diǎn) cursor: "move", label: { show: true //是否顯示標(biāo)簽文字 }, endLabel: { //折線端點(diǎn)的標(biāo)簽 show: true }, labelLine: { show: true, //是否顯示連接線 smooth: true //是否平滑 }, lineStyle: { //標(biāo)簽的視覺(jué)引導(dǎo)線配置 color: "red", width: 2, join: "miter" //設(shè)置2個(gè)長(zhǎng)度不為0的相連部分如何連接在一起的屬性 }, smooth: 0.3, data: [420, 432, 401, 434, 190, 130, 120], }, { name: "某某系列2", type: 'line', symbol: "arrow", symbolSize: 10, // 拐點(diǎn)大小 data: [860, 962, 961, 964, 1260, 1360, 1360], }] };
(6)示例:直角坐標(biāo)系 grid 中的 x、y軸(類似)
xAxis: { show: true; //是否顯示x軸 data: ['襯衫', '羊毛衫', '雪紡衫', '褲子', '高跟鞋', '襪子'] //類目數(shù)據(jù),在類目軸 position:'top' //x軸的位置 name:'坐標(biāo)軸的名稱' axisTick: { show: false // 去除刻度線 }, axisLabel: { color: '#4c9bfd' // 文本顏色 }, axisLine: { show: false // 去除軸線 }, boundaryGap: false // 去除軸內(nèi)間距 },
(7)藍(lán)丁格爾玫瑰圖
<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} (jcynfbr%)' }, 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: { // 連接扇形圖線長(zhǎng) length: 6, // 連接文字線長(zhǎng) length3: 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實(shí)例分析”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)JavaScript可視化與Echarts實(shí)例分析這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。