微信小程序使用ECharts

一、ECharts简介

​ ECharts是一款基于JavaScript的数据可视化图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。ECharts最初由百度团队开源，并于2018年初捐赠给Apache基金会，成为ASF孵化级项目。

二、微信小程序使用ECharts

1.下载 GitHub 上的 ecomfe/echarts-for-weixin 项目

链接：https://github.com/ecomfe/echarts-for-weixin

2.创建微信小程序项目

3.将下载的文件夹解压，找到ec-canvas文件，拷贝到小程序page同层级目录下

4.创建图表

index.json 这一配置的作用是，允许我们在 pages/xxx/index.wxml 中使用<ec-canvas>组件

{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

index.wxml 创建了一个 <ec-canvas> 组件

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

index.js 其中 ec 是一个我们在 index.js 中定义的对象，它使得图表能够在页面加载后被初始化并设置

function initChart(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: initChart
    }
  }
});

index.wxss 注意，没有写完样式图表是无法展示

ec-canvas {
  width: 100%;
  height: 100%;
}
.container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

三、将echarts封装成自定义组件（请求后台获取数据）

component.wxml

<view class="container">
  <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

component.js

import * as echarts from '../../ec-canvas/echarts'
// 获取应用实例
const app = getApp()

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  // 组件的初始数据
  data: {
    ec: {
      lazyLoad: true, // 延迟加载
    },
  },
  created:function(){
    this.echarCanve = this.selectComponent("#mychart-dom-bar");
    this.getNearlyWeek();
  },

  // 组件的方法列表
  methods: {
    // 获取近一周的折线图数据
    async getNearlyWeek(){
      let that =this
      await app.api.getNearlyWeekLineData().then(res =>{
        if(res.data.code===20000){
          ... // 请求成功
          this.init()
        }else{
          ... // 请求失败
        }
      })
    },
    
    init:function(){
      this.echarCanve.init((canvas, width, height)=> {
        const chart = echarts.init(canvas, null, {
          width: width,
          height: height
        })
        chart.setOption(this.getOption());
        return chart;
        })
    },
    getOption: function(){
      var option = {
        ...
      };
      return option;
    }
  },
})

component.json

{
  "component": true,//表示启用这个组件
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"//引入ec-canvas文件
  }
}

四、echarts折线图各属性完全注解

1、基本注解

option = {
    title: {
        text: '世界人口总量',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    legend: {
        data: ['2011年', '2012年']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
    },
    xAxis: {
        type: 'category',
        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
    },
    series: [
        {
            name: '2011年',
            type: 'line',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
            name: '2012年',
            type: 'line',
            data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
    ]
};

2、详细注解

其中包含折线图左上角标题、右上角图例、背景网格线、两条坐标轴刻度、内容距离外框边距、横纵坐标单位、折线图下方阴影渐变等一系列问题的详细设置

option = {
    /*****************图例与折线颜色统一设置*****************/
    color:['#4472C5','#ED7C30'],
    
    /*****************左上方标题设置*****************/
    title: {
        top:"0%",  //距顶部
        left:"4%",  //距左侧
        text: '折线图堆叠',  //标题文本
        textStyle: {       //字体样式（颜色、大小、粗细）
            color: "#000",
            fontSize: 15,
            fontWeight: "bold"
        },
    },
    
    /*****************鼠标移入显示数据，无需修改*****************/
    tooltip: {
        trigger: 'axis'
    },
    
    /*****************右上图例设置*****************/
    legend: {
        /**图例左侧小矩形**/
        icon: "rect",   // rect是矩形图例   circle是圆点图例
        itemWidth: 20,  //宽
        itemHeight: 2,  //高
        itemGap: 20,   //间隔
        top: "0%",    //距顶部
        right: "6%",  //距右侧
        
        /**图例右侧文字**/
        textStyle: {
            color: "#000",
            fontSize: 15,
            fontWeight: "bold"
        },
        data: ['邮件营销', '联盟广告'],
    },
    
    /*****************中间内容距外边位置设置*****************/
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    
    /*****************x轴设置*****************/
    xAxis: {
        type: 'category',
        name:'星期',  //横坐标单位
        boundaryGap: true,   //改为false之后线条则铺满 可设置数组[x,y]对应左右距离
        axisTick: {
            show: false //是否显示x轴刻度
        },
        axisLine: {
            lineStyle: {
                color: "#000" //x轴的颜色。
            }
        },

        axisLabel: {
            margin: 20, //刻度标签与轴线之间的距离
            textStyle: {
                fontSize: 14, //文字的字体大小
                color: "#000"
            },
            // rotate:40,   //横坐标是否倾斜  
        },
        splitLine: {
            show: false,  //图形背景分割线  纵列
            lineStyle: {
            color: "rgba(54,115,196,.27)" //分隔线颜色设置
            }
        },
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    
    /*****************y轴设置*****************/
    yAxis: [
        {
            minInterval: 1,  //默认以1位分割单位，不允许出现小数点的情况
            type: "value",
            name:'人民币',  //纵坐标单位
            axisTick: {
              show: false, //是否显示y坐标轴刻度
              lineStyle: {
                color: "rgba(54,115,196,27)"
              }
            },
            
            /**左侧纵坐标竖线设置**/
            axisLine: {
              show: true,
              lineStyle: {
                color: "#054757" //左侧y轴线的颜色
              }
            },
            /**左侧纵坐标字体设置**/
            axisLabel: {
              margin: 10, //刻度标签与轴线之间的距离
              textStyle: {
                fontSize: 14,
                color: "#000"
              }
            },
            /**图内横向背景线条设置**/
            splitLine: {
              show:false,  //图形背景分割线  横向
              lineStyle: {
                color: "#000", //分隔线颜色设置
                type: "dashed"   //虚线
              }
            }
          }
    ],
    
     /*****************不同种类显示的数据*****************/
    series: [
        {
            name: '邮件营销',
            type: 'line',
            stack: '总量',
            // symbol:'none',   //是否去掉小圆点
            lineStyle: {
             width:2
           },
           
           /**渐变**/
           areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#dc3881" // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "rgba(220,56,129,0)" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            data: [120, 132, 101, 134, 90, 230, 210]
        },
        {
            name: '联盟广告',
            type: 'line',
            stack: '总量',
            // symbol:'none',   //是否去掉小圆点
            lineStyle: {
             width:2
           },
           
           /**渐变**/
           areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fff" // 0% 处的颜色
                    },
                    {
                      offset: 0.7,
                      color: "skyblue" // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                }
              }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
        },
       
    ]
};