分享学习：小程序使用Echarts的方法

echarts的使用

前排提醒：有echarts基础会容易看懂

使用到echarts微信版 地址： https://github.com/ecomfe/echarts-for-weixin

可以通过git克隆到本地

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

拉取下来长这样，复制ec-canvas这个文件夹

image.png

新建一个小程序项目，粘贴ec-canvas这个文件夹

image.png

pages下新建一个bar文件夹，不叫bar也可以，自己取

右键ber文件夹新建page，输入index创建js json wxml wxss四个基础的文件

不起index也可以，起你文件夹名字bar也行

image.png

然后到app.json里看看新建的那个bar页面注册成功没，没有自己敲上去

image.png

"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/bar/index"
  ],

下一步，引入echarts的组件

bar页面文件夹下的json文件里注册ec-canvas组件

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

image.png

然后wxml文件里写好页面代码

image.png

接着是js文件

image.png

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

function initChart(canvas, width, height, dpr) {
  // null可换成你引入的主题，没有的话默认null就行
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素
  });
  canvas.setChart(chart);

  var option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      type: 'bar',
      data: [120, {
        value: 200,
        itemStyle: {
          color: '#a90000'
        }
      }, 150, 80, 70, 110, 130],
    }]
  };
  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      // 图表数据绑定,oninit随便起名字
      onInit: initChart
    }
  }
})

最后是wxss文件，echarts需要设置宽高才会显示，所以需要写下样式
页面样式

image.png

全局样式app.wxss

image.png

/**index.wxss**/
ec-canvas{
  width: 100%;
  height: 100%;
}

/**app.wxss**/
.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;
} 

效果

image.png

假如你成功了，欢迎点赞、留言、关注！