在當今高度競爭的互聯網時代，如何讓自己的網站在眾多網站中脫穎而出，成為用戶眼中的焦點，是每個網站開發者都需要思考的問題。本文將介紹一個強大的數據可視化工具——Effectscatter，它可以為你的網站增加更多的視覺衝擊力，吸引用戶的注意力。
一、使用Effectscatter
Effectscatter是一種基於echarts.js的數據可視化工具，它可以通過各種形狀和顏色來呈現數據，使數據更具有視覺衝擊力。
Effectscatter的使用非常靈活，你可以輕鬆地將它嵌入到你的網站中，使它成為網頁中的一個亮點。代碼示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>使用Effectscatter製作數據可視化圖表</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:600px;"></div>
<script>
var myChart = echarts.init(document.getElementById('main'));
var data = [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
];
var option = {
title: {
text: '數據可視化圖表示例',
left: 'center'
},
tooltip: {
formatter: function (params) {
return 'x: ' + params.value[0] + '
y: ' + params.value[1];
}
},
xAxis: {
type: 'value',
min: 0,
max: 20,
axisLine: {
onZero: false
}
},
yAxis: {
type: 'value',
min: 0,
max: 15
},
series: [
{
type: 'effectScatter',
data: data,
symbolSize: function (data) {
return Math.sqrt(data[1]) * 5;
},
label: {
show: true,
formatter: function (param) {
return param.data[0] + ',' + param.data[1];
},
fontSize: 10,
position: 'top'
},
itemStyle: {
color: 'purple'
}
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
上面是一個簡單的使用Effectscatter製作的數據可視化圖表示例，由於使用了Effectscatter，圖表中的數據節點從單一的圓點變成了帶有動態特效的氣泡，使整個圖表更具有視覺衝擊力。
二、調整Effectscatter的樣式
Effectscatter默認的樣式可能並不適合所有的網站，如何調整Effectscatter的樣式也是使用它的過程中需要思考的問題。
首先，你可以通過設置symbolSize參數來調整Effectscatter的節點大小，這樣可以使圖表中的節點更加誇張，吸引用戶的眼球。代碼示例：
series: [
{
type: 'effectScatter',
data: data,
symbolSize: 20, // 調整節點大小
label: {
show: true,
formatter: function (param) {
return param.data[0] + ',' + param.data[1];
},
fontSize: 10,
position: 'top'
},
itemStyle: {
color: 'purple'
}
}
]
除了節點大小，Effectscatter的節點形狀和顏色也可以通過itemStyle參數來自定義。代碼示例：
series: [
{
type: 'effectScatter',
data: data,
symbolSize: 20,
label: {
show: true,
formatter: function (param) {
return param.data[0] + ',' + param.data[1];
},
fontSize: 10,
position: 'top'
},
itemStyle: {
color: 'purple',
borderColor: 'blue', // 設置節點邊框顏色
borderWidth: 2 // 設置節點邊框寬度
}
}
]
上面的代碼示例中，我們通過設置borderColor和borderWidth參數來自定義Effectscatter的節點邊框樣式，使圖表更加醒目。另外，Effectscatter的顏色也可以通過color參數來調整，這樣可以使整個圖表更加協調。代碼示例：
series: [
{
type: 'effectScatter',
data: data,
symbolSize: 20,
label: {
show: true,
formatter: function (param) {
return param.data[0] + ',' + param.data[1];
},
fontSize: 10,
position: 'top'
},
itemStyle: {
color: 'purple',
borderColor: 'blue',
borderWidth: 2
},
color: ['#ff7f50'] // 修改節點顏色
}
]
三、數據可視化實戰
通過上面的介紹，我們已經了解了如何使用Effectscatter，以及如何調整Effectscatter的樣式。下面，我們來實際應用一下Effectscatter，為我們的網站製作一個數據可視化圖表。
假設我們有一份銷售數據，如下表所示，我們想將這份數據可視化出來，使整個圖表更具有衝擊力。
| 日期 | 銷售額 |
|---|---|
| 2021-01-01 | 256 |
| 2021-01-02 | 210 |
| 2021-01-03 | 180 |
| 2021-01-04 | 325 |
| 2021-01-05 | 287 |
| 2021-01-06 | 398 |
| 2021-01-07 | 420 |
首先，我們需要將數據轉換成Effectscatter所需的格式。代碼示例：
var data = [
[0, 256],
[1, 210],
[2, 180],
[3, 325],
[4, 287],
[5, 398],
[6, 420]
];
然後，我們根據數據來製作Effectscatter圖表，並調整它的樣式。代碼示例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
backgroundColor: '#404a59',
title: {
text: '銷售數據可視化圖表',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
xAxis: {
type: 'value',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
axisLine: {
lineStyle: {
color: '#fff'
}
}
},
series: [
{
name: '銷售額',
type: 'effectScatter',
symbolSize: function (val) {
return val[1] / 10;
},
data: data,
itemStyle: {
color: '#ddb926'
}
}
]
};
myChart.setOption(option);
上面的代碼示例中，我們使用了backgroundColor參數來設定圖表的背景色，使用title和tooltip參數添加了圖表的標題和提示信息，使用xAxis和yAxis參數定義了圖表的坐標軸，最後使用了series參數來定義了Effectscatter圖表的數據及樣式。
通過上面的操作，我們就成功地製作了一個銷售數據的可視化圖表，並使用Effectscatter為圖表增加了更多的視覺衝擊力。當然，在實際應用中，你還可以根據自己的需要進一步調整Effectscatter的樣式，使它更加符合你的網站風格。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/249520.html
微信掃一掃 
支付寶掃一掃 