微信小程序学习篇—1、echarts的使用

一、导入echarts包

通过访问在微信小程序中使用 Apache ECharts (incubating)下载最新的echarts包到微信小程序中

二、初始化

1、创建页面index，该页面包含index.wxml，index.wxss，index.js，index.json四个文件
2、在index.json引入，如下示例

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

3、在index.js初始化，option里面写上自己的配置，具体配置可前往echarts官网查看栗子

import * as echarts from '../../common/ec-canvas/echarts'
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    ...
  };
  chart.setOption(option);
  return chart;
}

Page({
  data: {
    ec: {
      onInit: initChart
    }
  }
});

4、在index.wxml使用

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

5、经过上述步骤，会发现echarts没有在页面显示出来，这个时候需要对echarts外面的盒子加上宽高
在index.wxss中写入

.box {
  display: block;
  width: 100%;
  height: 468rpx;
}

三、动态加载数据（参考）

index.js文件：

import * as echarts from '../../common/ec-canvas/echarts'
let chart =null 
let xData = []
let yData = []
function initChart(canvas, width, height,dpr) {
  chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr
  });
  canvas.setChart(chart);

  var option = {
    color:'#D3E5FF',
    tooltip : {
      trigger: 'item'
    },
    grid: {
      top: '20%',
      left: '10%',
      right: '10%',
      containLabel: false
    },
    xAxis: [{
      type: 'category',
      data: xData,
      axisLabel: {
        formatter: function(value, index) {
          return value+'月'
        }
      },
      axisLine: {
        lineStyle: {
            type:  'solid' ,
            color:  '#979797' , //左边线的颜色
            width: '0.5' //坐标线的宽度
        },
    },
    axisTick: { show: false }
    }
  ],
    yAxis: {
        type: 'value',
        splitLine:{
          show:false 
         },
         axisTick: { show: false },
         axisLabel:{ show :false}
    },
    dataZoom: [
      {
          type: 'inside',
          show:'true',
          start: 1,
          end: 50,
          zoomLock:true,
          moveOnMouseMove:true,   
          zoomOnMouseWheel:true, 
          filterMode: 'none',
      }
    ],
    series: [{
        data: yData,
        type: 'bar',
        barWidth: 20,
        itemStyle:{
          normal:{
            label:{
              formatter:"{c}",
              show:true,
              position:"top",
              textStyle:{
                color:'#000'
              }
            }
          }
        },
        emphasis:{
          itemStyle:{
            color:'#1878FF'
          }
        }
    }]
  };
  chart.setOption(option);
  return chart;
}
Page({
 data: {
    ec: {
      onInit: initChart,
    }
  },
  onReady: function () {
    this.fenchStatistics()
  },
  fenchStatistics(year){
   let data={}
   if(year){
     data.year = year
   }
   fenchStatistics({...data}).then(res=>{
     // console.log('积分对比===》',res.data);
     xData = res.data.map(item=>{
       return item.month
     })
     yData = res.data.map(item=>{
       return item.score
     })
     this.setData({
       isCharts:true
     })
     // console.log(xData,yData,'xdata','yData');
     // 将接口返回的数据赋值到echarts中
     chart.setOption({
       xAxis: {
         data: xData  //全局变量
       },
       series: [{
         data: yData //全局变量
       }]
     });
   })
 },
})