微信小程序使用ECharts----折线图

微信小程序的开发者在很多情况下需要使用图形化数据展示，现有的 ECharts 这样的可视化工具由于一些原因并不能在微信小程序中使用。

因此，ECharts 团队和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。

体验示例小程序

在微信中扫描下面的二维码即可体验 ECharts Demo：

GitHub 地址  GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

 ECharts小程序版在微信小程序中是以组件的方式使用，对于小程序开发者来说非常容易

一、首先下载

下载项目到本地，并使用微信开发者工具打开，如下图

项目下载地址 GitHub 地址  GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

可以自行从 ECharts 项目中下载最新发布版

 

 pages文件夹是demo中每个图形的使用案例，

ec-canvas文件夹就是我们即将要引用的组件了，将ec-canvas文件夹复制到自己的项目中就可以愉快的在自己的项目中使用数据可视化开发了

 二、在自己项目中使用ECharts

 1、首先把整个ec-canvas文件夹复制到自己项目中，位置可以自己根据自己使用情况定，因为我的项目是全局使用的所以就放到了项目根目录

 2、引用组件

json:

在你要是用组件的页面json文件中引入组件

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  },
  "navigationStyle": "custom"
}

js:

在js中引入（上一步引入的只是画布的功能，这里引入的js才是处理数据的）

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

wxml:

页面中的引用方式和其他组件相同

<view style="width: 100%; height: 400rpx;">
        <ec-canvas style="width: 100%; height: 200px;" id="mychart_bloodPressure" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
</view>

 二、开始绘制自己的图形

到这里我们就可以使用ECharts在小程序中绘制自己想要的数据图形了，我这里只用到了折线图，但是是两种展示方式

1、有x轴无y轴，数据匹配方式为value

先说一下数据匹配方式，官方称之为y轴类型，共分了四种：

坐标轴类型。

可选：

• 'value' 数值轴，适用于连续数据。

• 'category' 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 yAxis.data 设置类目数据。

• 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。

• 'log' 对数轴。适用于对数数据。

wxml文件和json文件按上述方式引入即可，重点说一下js文件数据的处理

因为数据要从后台获取考虑到可能后台数据传回来慢所以要使用延迟加载，在js的data中加入

ec: {
      lazyLoad: true // 延迟加载
    },

获取元素并赋值的方法

init_echarts: function () {
      //小程序的仿dom操作获取元素
      this.echartsComponnet = this.selectComponent('#mychart');
      this.echartsComponnet.init((canvas, width, height) => {
        // 初始化图表
        const Chart = echarts.init(canvas, null, {
          width: width,
          height: height
        });
        //处理数据我放到了一个单独的js
        Chart.setOption(getOption(this.data.pointsA, this.data.dates));
        // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return Chart;
      });

    },

 因为我把数据处理都拿到了单独的js所以要新建一个js文件，并在原js中引入

import {getOption} from '../../eChartsData'

新建js

function getOption (points, dates) {
  dates = ["8.14","8.15","8.16","8.17","8.18","8.19","8.20"]
  points = [356,456,567,234,345,456,567]
  // 指定图表的配置项和数据
  var option = {
  //直角坐标系内绘图网格，单个 grid 内最多可以放置上下两个 X 轴，左右两个 Y 轴。
  //用他可以配置图形在父元素中的位置
    grid:{
      top:30,
      left: 14,
      width: "82%",
      height: "45%"
    },
    //x轴
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dates,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      // show: false
    },
    //y轴
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      show: false
    },
    //数据
    series: [{
      connectNulls: true,
      name: 'A',
      type: 'line',
      // smooth: true,
      data: points,
      lineStyle: {
        normal: {
          color: '#17998C',
        }
      },
      areaStyle: {
        color: '#A2F5EC',
        opacity: 0.5
      },
      label: {
        show: true,
        position:'top',
		distance:-28,
        textStyle: {
          fontSize: 12,
          color: "#17998C",
        },
        //因为提示数值官方只能设置同一位置，而我想要一上一下，用到了格式化，其实很好理解就是换行展示
        formatter:function(value){
          let valueType
          if(value.dataIndex%2!=0){
            valueType="shuang";
            return  value.data ;
          }else{
            valueType="dan";
            return value.data + '\n\n\n';
          }
        },
      }
    }]
  }
  return option;
}


module.exports = {
  getOption: getOption
};

数据配置完，页面中就会出现你想要的数据图形

 以上的数据配置项都可以在ECharts的官方文档中找到，我就不一一列举了，详细信息大家可以去官方文档中了解

2、有x轴有y轴，数据匹配方式为类目

这种展示方式和上述方式一样，只是配置向有差别，使用方式就不再赘述了，只列举一下配置项，大家可以做个参考

function getOption1 (name, yAxis, data) {

  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 40,
      left: 60
    },
    // tooltip: {
    //   show: true,
    //   trigger: 'axis'
    // },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLabel:{
        rotate:-40 
      }
      // show: false
    },
    yAxis: {
      name: name,
      // x: 'center',
      type: 'category',//这里是关键
      nameTextStyle: {
        fontSize: 10,
        overflow: 'breakAll'
      },
      data: yAxis,//该项可以配置也可以不配置，不配置会默认在data中选取
      axisLabel:{
        rotate:-40 ,
    },
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      show: true
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: data,
      lineStyle: {
        normal: {
          color: '#17998C',
        }
      },
      areaStyle: {
        color: '#A2F5EC',
        opacity: 0.5
      },
      label: {
        show: false,
        position: 'top',
        textStyle: {
          fontSize: 16,
          color: "#17998C",
        }
      }
    }]
  }
  return option;
}

主要属性：

yAxis.type

yAxis.data: 该项可以配置也可以不配置，不配置会默认在series.data中选取，本人倾向于自己配置

 注：

如果你在配置数据是配置的是["1","2","-","1","2","1","2"]这样，就会和上图一样出现两个点之间没有连线

重要提示：
全部图表的echarts.js非常大,如果你的项目较大可能会导致项目上传失败,

在你把整个js导入项目时开发者工具也会有如下提示:
[JS 文件编译错误] 以下文件体积超过 500KB，已跳过压缩以及 ES6 转 ES5 的处理。ec-canvas/echarts.js

处理方法:

按你项目所需的图表定制化下载, 定制地址ECharts 在线构建

勾选你所需要的图表,最下方点下载

下载完成后

把新定制的echarts.min.js替换掉原来的echarts.js