小程序图表，完美呈现数据的可视化效果

发布时间：2023-05-19

一、小标题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} <br>{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;
    })
  }
})
  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 = {
      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} <br>{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;
}
推荐文章