一、小標題1 – 選擇適合自己的數據可視化工具
數據可視化是一種將數據轉換為圖表、圖像或其他視覺元素的方法，以使數據更容易被人類理解並以此做出更明智的決策。其重要性體現在更直觀、更清晰地展示數據、交流數據和實現數據分析等方面。可以通過數據可視化軟件和工具來實現。
小程序在圖表方面的可視化需要，可以選擇一些成熟的數據可視化工具，包括 Echarts、F2、G2、Bizcharts等。這些工具都各有特點，可以按照業務需要選擇適合自己的工具。
下面是一個示例圖表，使用的是 Echarts。
import * as echarts from '../../components/ec-canvas/echarts';
Page({
data: {
ec: {
lazyLoad: true
}
},
onLoad() {
this.echartsComponnet = this.selectComponent('#mychart');
this.getData();
},
getData() {
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
this.echartsComponnet.init((canvas, width, height, dpr)=>{
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
chart.setOption(option);
return chart;
})
}
})
二、小標題2 – 數據可視化的妙用
數據可視化不僅可以更直觀地展示數據，還可以通過圖表的交互性，方便進行數據篩選、比較、分析和查看。以下為常見的數據可視化類型：
1. 餅狀圖 – 在展示數據佔比時，餅狀圖是一種非常直觀的方式。比如，統計某個團隊在各個技能點上人數分佈情況。下面是一個示例代碼。
import * as echarts from '../../components/ec-canvas/echarts';
Page({
data: {
ec: {
lazyLoad: true
}
},
onLoad() {
this.echartsComponnet = this.selectComponent('#mychart');
this.getData();
},
getData() {
let option = {
title: {
text: '團隊技能點分佈',
subtext: '2019年4月'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['Java', 'Python', 'PHP', 'Go', 'Javascript']
},
series: [
{
name: '技能點',
type: 'pie',
radius: ['40%', '60%'],
avoidLabelOverlap: true,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: 'Java'},
{value: 310, name: 'Python'},
{value: 234, name: 'PHP'},
{value: 135, name: 'Go'},
{value: 1548, name: 'Javascript'}
]
}
]
};
this.echartsComponnet.init((canvas, width, height, dpr)=>{
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
chart.setOption(option);
return chart;
})
}
})
2. 柱狀圖 – 柱狀圖用於比較不同數據之間的關係，是一種非常經典的數據可視化圖表類型。下面是一個示例代碼。
import * as echarts from '../../components/ec-canvas/echarts';
Page({
data: {
ec: {
lazyLoad: true
}
},
onLoad() {
this.echartsComponnet = this.selectComponent('#mychart');
this.getData();
},
getData() {
let option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}]
};
this.echartsComponnet.init((canvas, width, height, dpr)=>{
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
chart.setOption(option);
return chart;
})
}
})
三、小標題3 – 如何在小程序中使用數據可視化
在小程序中使用數據可視化需要藉助第三方庫，本文示例中使用的是 Echarts 和 F2。使用這些庫也需要了解一些相關的知識點。
Echarts 是一款由百度開源的數據可視化庫，支持多種類型的圖表和圖形展示。使用 Echarts 可以實現深度定製化的可視化需求。
F2 是一款阿里開源的專註於手機端可視化的圖表庫，支持多種類型的圖表展示。F2 的特點在於輕、快、穩定，能快速實現對數據的可視化處理。
完整示例代碼
以下為一個完整的示例代碼，其中使用了 Echarts 和 F2 兩個庫來實現數據可視化。
//index.js
import * as echarts from '../../components/ec-canvas/echarts';
import F2 from '../../components/f2-canvas/lib/f2';
Page({
data: {
ec: {
lazyLoad: true
},
opts: {
onInit: initChart
}
},
onLoad() {
this.echartsComponnet = this.selectComponent('#mychart');
this.getData();
},
getData() {
let option = {
title: {
text: '團隊技能點分佈',
subtext: '2019年4月'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['Java', 'Python', 'PHP', 'Go', 'Javascript']
},
series: [
{
name: '技能點',
type: 'pie',
radius: ['40%', '60%'],
avoidLabelOverlap: true,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: 'Java'},
{value: 310, name: 'Python'},
{value: 234, name: 'PHP'},
{value: 135, name: 'Go'},
{value: 1548, name: 'Javascript'}
]
}
]
};
let data = [
{ month: 'Jan', Tokyo: 7.0, London: 3.9 },
{ month: 'Feb', Tokyo: 6.9, London: 4.2 },
{ month: 'Mar', Tokyo: 9.5, London: 5.7 },
{ month: 'Apr', Tokyo: 14.5, London: 8.5 },
{ month: 'May', Tokyo: 18.4, London: 11.9 },
{ month: 'Jun', Tokyo: 21.5, London: 15.2 },
{ month: 'Jul', Tokyo: 25.2, London: 17.0 },
{ month: 'Aug', Tokyo: 26.5, London: 16.6 },
{ month: 'Sep', Tokyo: 23.3, London: 14.2 },
{ month: 'Oct', Tokyo: 18.3, London: 10.3 },
{ month: 'Nov', Tokyo: 13.9, London: 6.6 },
{ month: 'Dec', Tokyo: 9.6, London: 4.8 }
];
let chart = new F2.Chart({
el: 'canvas',
width: 375,
height: 260
});
chart.source(data, {
month: {
range: [0, 1],
type: 'timeCat',
mask: 'MM-DD'
},
Tokyo: {
tickCount: 5,
min: 0
},
London: {
tickCount: 5,
min: 0
}
});
chart.line().position('month*Tokyo').color('#4FAAEB');
chart.line().position('month*London').color('#9AD681');
chart.render();
this.echartsComponnet.init((canvas, width, height, dpr)=>{
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
chart.setOption(option);
return chart;
})
}
})
function initChart(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
backgroundColor: '#ffffff',
series: [{
name: '業務指標',
type: 'gauge',
startAngle: 180,
endAngle: 0,
center: ['50%', '90%'],
radius: '170%',
axisLine: {
show: true,
lineStyle: {
width: 0,
shadowBlur: 0,
color: [
[0.2, '#DCE0E5'],
[0.8, '#DCE0E5'],
[1, '#DCE0E5']
]
}
},
axisTick: {
show: true,
lineStyle: {
color: '#46494C',
width: 1
},
length: -8,
splitNumber: 10
},
splitLine: {
show: true,
length: -18,
lineStyle: {
color: '#46494C',
}
},
axisLabel: {
color: '#46494C',
fontSize: 12,
distance: -45,
formatter: '{value}%'
},
pointer: {
show: true,
length: '60%',
width: 3
},
itemStyle: {
normal: {
color: '#DCE0E5'
}
},
detail: {
show: false,
},
data: [{
value: 50,
name: '完成率'
}]
}]
};
chart.setOption(option, true);
return chart;
}
原創文章，作者：UNZH，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/138321.html
微信掃一掃 
支付寶掃一掃 