前言

在当今数据驱动的世界里，如何有效地展示和分析数据成为了每一个开发者必须面对的挑战。对于微信小程序而言，提供直观、交互性强的数据可视化解决方案显得尤为重要。ECharts 作为一款强大的开源可视化库，凭借其丰富的图表类型和高度可定制性，成为了众多开发者的首选工具。然而，在微信小程序中集成 ECharts 并非一蹴而就，它涉及到一系列特定的配置与优化步骤。本文将带你一步步探索如何在微信小程序中轻松集成 ECharts，并通过实际案例展示如何创建一个既美观又功能强大的数据可视化界面。 

正文

准备工作

可以去GitHub上下载ecahts组件（点击跳转），获取使用git直接拉去下来

git clone https://github.com/ecomfe/echarts-for-weixin.git

下载下来的目录是下面这样的

这里我们只需要把ec-canvas目录复制到我们微信小程序中的components组件目录下

页面使用

我们在需要使用的页面的json文件中引入组件

{
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas" //可能每个人的引入路径不一样
  }
}

在页面中我们需要创建一个这样的节点，然后给我父节点一个容器的宽高，

<view class="container" style="width: 100%; height: 50vh;">
  <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec="{{ ec }}"></ec-canvas>
</view>

在js里我们写出我们需要的可视化图标的配置对象option，然后在画布上进行渲染。

import * as echarts from '../../components/ec-canvas/echarts';

let chart = null;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);

  var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '邮件营销',
        type: 'line',
        stack: '总量',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '联盟广告',
        type: 'line',
        stack: '总量',
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  };


  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  onReady() {
    // 在页面初次渲染完成后调用，此时可以获取到echarts实例
  }
});

图示

案例

下面的案例的配置代码直接替换上面的js中的option就可以！ 

案例一

 配置代码

import * as echarts from '../../components/ec-canvas/echarts';

let chart = null;

function initChart(canvas, width, height, dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);

  var option = {
    xAxis:
    {
      type: 'category',
      show: false,
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    }
    ,
    yAxis:
    {
      type: 'value',
      show: false
    }
    ,
    series: [
      {
        name: '邮件营销',
        type: 'line',
        stack: '总量',
        smooth: true,
        areaStyle: {},
        emphasis: {
          focus: 'series'
        },
        itemStyle: {
          normal: {
            opacity: 0
          }
        },
        symbol: 'none',
        data: [120, 132, 101, 134, 90, 230, 210]
      }

    ]
  };


  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  },
  onReady() {
    // 在页面初次渲染完成后调用，此时可以获取到echarts实例
  }
});

图示

案例二

配置代码

 var option = {
    title: {
      text: '折线图示例'
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line',
      smooth: true // 平滑曲线
    }]
  };

 图示

案例三 

配置代码

var option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: ['直接访问', '邮件营销', '联盟广告']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    series: [
      {
        name: '直接访问',
        type: 'bar',
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '邮件营销',
        type: 'bar',
        stack: '广告',
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '联盟广告',
        type: 'bar',
        stack: '广告',
        data: [220, 182, 191, 234, 290, 330, 310]
      }
    ]
  };

 图示

案例四

配置代码 

var option = {
    title: {
      text: '饼状图示例',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 1048, name: '搜索引擎' },
          { value: 735, name: '直接访问' },
          { value: 580, name: '邮件营销' },
          { value: 484, name: '联盟广告' },
          { value: 300, name: '视频广告' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };

图示

结语

通过本文的学习，你应该能够在微信小程序中成功集成 ECharts，并根据自己的需求定制各种类型的图表。ECharts 强大的功能和灵活的配置选项为数据可视化提供了无限可能。希望这篇博客能激发你在项目中尝试更多创意，让数据说话，为用户提供更加直观和有价值的信息呈现方式。继续探索 ECharts 的更多特性，开启你的数据可视化之旅吧！