網(wǎng)站制作的一般步驟是什么百度百科搜索入口
1.數(shù)據(jù)可視化前言
1.1.什么是數(shù)據(jù)可視化
數(shù)據(jù)可視化： 就是把數(shù)據(jù)以更加直觀的方式進(jìn)行呈現(xiàn).
1.2.數(shù)據(jù)可視化的好處
- 清晰有效地傳達(dá)與溝通信息
- 更容易洞察隱藏在數(shù)據(jù)中的信息
2.ECharts的基本使用
2.1.ECharts官網(wǎng)
ECharts是百度公司開(kāi)源的一個(gè)使用 JavaScript 實(shí)現(xiàn)的開(kāi)源可視化庫(kù)，兼容性強(qiáng)，底層依賴(lài)矢量圖形
庫(kù) ZRender ，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表
- 官網(wǎng)地址
- https://echarts.apache.org/zh/index.html
2.2.ECharts的快速上手
- 步驟1：引入 echarts.js 文件
<script src="js/echarts.min.js"></script>
- 步驟2：準(zhǔn)備一個(gè)呈現(xiàn)圖表的盒子
- 步驟3：初始化 echarts 實(shí)例對(duì)象
- 步驟4：準(zhǔn)備配置項(xiàng)
- 步驟5：將配置項(xiàng)設(shè)置給 echarts 實(shí)例對(duì)象
通過(guò)簡(jiǎn)單的5個(gè)步驟, 就能夠把一個(gè)簡(jiǎn)單的柱狀圖給顯示在網(wǎng)頁(yè)中了.這幾個(gè)步驟中, 步驟4最重要,
一個(gè)圖表最終呈現(xiàn)什么樣子,完全取決于這個(gè)配置項(xiàng).所以對(duì)于不同的圖表, 除了配置項(xiàng)會(huì)發(fā)生改變之外,
其他的代碼 都是固定不變的.
2.3.相關(guān)配置講解
- xAxis
直角坐標(biāo)系 中的 x 軸, 如果 type 屬性的值為 category ,那么需要配置 data 數(shù)據(jù), 代表在 x 軸的
呈現(xiàn)
- yAxis
直角坐標(biāo)系 中的 y 軸, 如果 type 屬性配置為 value , 那么無(wú)需配置 data , 此時(shí) y 軸會(huì)自動(dòng)去
series 下找數(shù)據(jù)進(jìn)行圖表的繪制
- series
系列列表。每個(gè)系列通過(guò) type 決定自己的圖表類(lèi)型, data 來(lái)設(shè)置每個(gè)系列的數(shù)據(jù)
3.ECharts常用圖表
3.1.圖表1 柱狀圖
3.1.1.柱狀圖的實(shí)現(xiàn)步驟
- 步驟1 ECharts 最基本的代碼結(jié)構(gòu)
<!DOCTYPE html>
<html lang="en">
<head>
<script src="js/echarts.min.js"></script>
</head>
<body>
<div style="width: 600px;height:400px"></div>
<script>
var mCharts = echarts.init(document.querySelector("div"))
var option = {}
mCharts.setOption(option)
</script>
</body>
</html>
- 步驟2 準(zhǔn)備x軸的數(shù)據(jù)
let xDataArr = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
- 步驟3 準(zhǔn)備 y 軸的數(shù)據(jù)
var yDataArr = [120, 200, 150, 80, 70, 110, 130]
- 步驟4 準(zhǔn)備 option , 將 series 中的 type 的值設(shè)置為: bar
var option = {
xAxis: {
type: 'category',
data: xDataArr
},
yAxis: {
type: 'value'
},
series: [
{
type: 'bar',
data: yDataArr
}
]
}
注意: 坐標(biāo)軸 xAxis 或者 yAxis 中的配置, type 的值主要有兩種: category 和 value , 如果 type屬性的值為 category ,那么需要配置 data 數(shù)據(jù), 代表在 x 軸的呈現(xiàn). 如果 type 屬性配置為 value ,那么無(wú)需配置 data , 此時(shí) y 軸會(huì)自動(dòng)去 series 下找數(shù)據(jù)進(jìn)行圖表的繪制
最終的效果如下圖:
3.1.2.通用配置
可以查看官網(wǎng)配置項(xiàng)手冊(cè)
- https://echarts.apache.org/zh/option.html#title
3.1.3.柱狀圖的常見(jiàn)效果
- 標(biāo)記:
- 最大值\最小值 markPoint
series: [
{
......
markPoint: {
data: [
{
type: 'max', name: '最大值'
},
{
type: 'min', name: '最小值'
}
]
}
}
]
- 平均值 markLine
series: [{......markLine: {data: [{type: 'average', name: '平均值'}]}}
]
-
顯示
- 數(shù)值顯示 label
series: [{......label: {show: true, // 是否可見(jiàn)rotate: 60 // 旋轉(zhuǎn)角度}}]
- 柱寬度 barWidth
series: [{......barWidth: '30%' // 柱的寬度}]
- 橫向柱狀圖
所謂的橫向柱狀圖, 只需要讓x軸的角色和y軸的角色互換一下即可. 既 xAxis 的 type 設(shè)置為
value , yAxis 的 type 設(shè)置為 category , 并且設(shè)置 data 即可var option = { xAxis: { type: 'value' }, yAxis: { type: 'category', data: xDataArr }, series: [ { type: 'bar', data: yDataArr } ] }