一、小标题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;
}
