1. Descripción
Este artículo registra principalmente el uso de gráficos en el proceso de desarrollo de subprogramas WeChat. Aquí explicamos principalmente el uso de eCharts y finalmente hablaremos sobre el uso de wecharts. En cuanto a la diferencia entre los dos, echarts es más poderoso, pero su volumen es mayor, ha importado más de 500K, incluso si importa componentes personalizados, sigue siendo muy grande, mientras que wxcharts no es tan poderoso, pero su volumen es relativamente pequeño, especialmente la versión liviana, solo un poco más de 30K, lo cual es muy adecuado para programas pequeños con requisitos de tamaño relativamente altos.
1. Uso de echarts
(1) Descargar
Los echarts descargados aquí son la versión adaptada por otros en el subprograma. enlace de descarga
(2) Importar echarts al subprograma
Descomprima el paquete comprimido echarts-for-weixin-master descargado y luego copie todos los archivos en la carpeta ec-canvas directamente al subprograma, lo copié en el directorio de utilidades aquí.
(3) Realizar la configuración y el desarrollo relacionados.
En primer lugar, para hacer referencia a módulos relacionados en la página, aquí hay una nueva página llamada echarts, el código relevante de echarts.json:
{
"navigationBarTitleText": "饼状图实现",
"usingComponents": {
"ec-canvas": "../../utils/ec-canvas/ec-canvas"
}
}
El siguiente es el código de echarts.wxml
<view class="econtainer">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{
{ ec }}"></ec-canvas>
</view>
Asegúrese de prestar atención al estilo del control, porque si la longitud y el ancho no se configuran correctamente, es posible que el gráfico no se muestre. Además, debe prestar atención a la diferencia entre rpx y px, especialmente cuando se usa wxcharts, de lo contrario el formato será desordenado en diferentes teléfonos móviles. El siguiente es el código de echarts.wxss:
/* pages/echarts/echarts.wxss */
ec-canvas {
width: 100%;
height: 300px;
}
.econtainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 30rpx 0;
box-sizing: border-box;
}
El siguiente es el código del archivo echarts.js:
// pages/echarts/echarts.js
import * as echarts from '../../utils/ec-canvas/echarts'
const app = getApp();
function initPie(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '饼状图',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '项目：',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
label: {
show: true,
formatter: '{b}({d}%)'
},
data: [
{
value: 335, name: '直接访问' },
{
value: 310, name: '邮件营销' },
{
value: 234, name: '联盟广告' },
{
value: 135, name: '视频广告' },
{
value: 1548, name: '搜索引擎' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initPie
}
},
onReady() {
}
});
La siguiente es una captura de pantalla en ejecución, depurando y ejecutándose en la computadora, parte de la visualización está incompleta:
(4) Precauciones
Si sigue los pasos anteriores, puede copiar directamente el código anterior y debería funcionar.
En este momento tendremos una pregunta, ¿qué pasa si cambiamos a otros gráficos? Ordenamos el archivo echarts.js y descubrimos que, de hecho, podemos cambiar la opción en el método initPie a otros gráficos, excepto que todo el marco permanece sin cambios, pero hay un lugar, preste atención, es decir, no elimine la definición de var delante de la opción; de lo contrario, no funcionará. Mostrar el gráfico. El siguiente es el marco de echarts.js:
import * as echarts from '../../utils/ec-canvas/echarts'
const app = getApp();
function initPie(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initPie
}
},
onReady() {
}
});
Por qué echarts es poderoso, no solo porque es más hermoso, sino que también podemos copiar directamente el código de ejemplo en el sitio web (tenga en cuenta que debe ser el gráfico del código de opción, y otros deben ser adaptados por nosotros mismos) para el método initPie de echarts.js En la opción, algunos gráficos relativamente simples se pueden copiar y usar directamente, y luego los datos se pueden cambiar a los datos que desee.
Otra pregunta es ¿cómo cargar dos o más gráficos en la misma página?
Simplemente agregue una etiqueta al archivo echarts.wxml:
<!--index.wxml-->
<view class="econtainer">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{
{ ec }}"></ec-canvas>
</view>
<view class="econtainer">
<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{
{ cl }}"></ec-canvas>
</view>
Luego agregue otro método en echarts.js y luego inicialícelo en los datos de la página. El siguiente es el código completo de echarts.js con dos gráficos:
// pages/echarts/echarts.js
import * as echarts from '../../utils/ec-canvas/echarts'
const app = getApp();
function initPie(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '饼状图',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '项目：',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
label: {
show: true,
formatter: '{b}({d}%)'
},
data: [
{
value: 335, name: '直接访问' },
{
value: 310, name: '邮件营销' },
{
value: 234, name: '联盟广告' },
{
value: 135, name: '视频广告' },
{
value: 1548, name: '搜索引擎' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
chart.setOption(option);
return chart;
}
function initClomn(canvas, width, height) {
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
var option = {
title: {
text: '柱形图'
},
color: ["#ff9966"],
tooltip: {
show: true,
trigger: 'axis'
},
legend: {
data: ['销量']
},
xAxis: {
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
},
yAxis: {
},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initPie
},
cl: {
onInit: initClomn
}
},
onReady() {
}
});
captura de pantalla:
2. gráficos wx
Primero descargue wxcharts y luego copie el archivo wxcharts.js a la carpeta utils.
Debido a que el código wxcharts es más fácil de entender, es necesario definir una etiqueta y luego dibujar el gráfico de acuerdo con los datos en el archivo js, para que el código se cargue directamente.
Código del archivo wxcharts.wxml:
<view class="mycontainer">
<canvas canvas-id="feiyu1" class="canvas"></canvas>
</view>
<view class="mycontainer">
<canvas canvas-id="feiyu2" class="canvas"></canvas>
</view>
<view class="mycontainer">
<canvas canvas-id="feiyu3" class="canvas"></canvas>
</view>
Código del archivo wxcharts.wxss:
.canvas {
width: 750rpx;
height: 500rpx;
}
.mycontainer {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 30rpx 0;
box-sizing: border-box;
}
Finalmente, el código del archivo wxcharts.js, hay tres gráficos:
//wxcharts.js
const util = require('../../utils/util.js');
var wxCharts = require('../../utils/wxcharts-min.js');
Page({
data: {
},
onReady: function (e) {
var windowWidth = 320;
var windowHeight = 150;
try {
var res = wx.getSystemInfoSync();
windowWidth = res.windowWidth;
windowHeight = res.windowHeight;
} catch (e) {
console.error('getSystemInfoSync failed!');
}
new wxCharts({
animation: true, //是否有动画
canvasId: 'feiyu1',
type: 'pie',
series: [{
name: '成交量1',
data: 15,
}, {
name: '成交量2',
data: 35,
}, {
name: '成交量3',
data: 78,
}],
width: windowWidth,
height: 200,
dataLabel: true,
});
new wxCharts({
animation:true,
canvasId: 'feiyu2',
type: 'line',
categories: ['2015', '2016', '2017', '2018', '2019', '2020'],
series: [{
name: '成交量1',
data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
format: function (val) {
return val.toFixed(2) + '万';
}
}, {
name: '成交量2',
data: [0.30, 0.37, 0.65, 0.78, 0.69, 0.94],
format: function (val) {
return val.toFixed(2) + '万';
}
}],
yAxis: {
title: '成交金额 (万元)',
format: function (val) {
return val.toFixed(2);
},
min: 0
},
width: windowWidth,
height: 200
});
new wxCharts({
canvasId: 'feiyu3',
type: 'column',
animation: true,
categories: ['2013', '2014', '2015', '2016', '2017'],
series: [{
name: '订单量',
color: '#188df0',
data: [23, 28, 35, 54, 95],
format: function (val, name) {
return val.toFixed(2) + '万';
}
}],
yAxis: {
format: function (val) {
return val + '万';
},
min: 0
},
xAxis: {
disableGrid: false,
type: 'calibration'
},
extra: {
column: {
width: 15,
},
legendTextColor: '#000000'
},
width: windowWidth,
height: 200,
});
}
});
Captura de pantalla del efecto:
