[移动开发]微信小程序--在微信小程序中使用echars

微信小程序中使用echars

1、微信小程序中使用echars效果展示：

2、下载引入ec-canvas组件

将下载好的ec-canvas组件文件 放到 components文件夹下 （三个下载地址都可以使用，选其一即可）

• echarts-for-weixin 下载地址：https://github.com/ecomfe/echarts-for-weixin

• 下载地址：链接：https://pan.baidu.com/s/1ezKkePG1O0_tzUUc54AH3w 提取码：4gar

• echars官方下载地址：https://echarts.apache.org/zh/builder.html （echars在线定制包）

3、log.json文件中声明注册使用ec-canvas组件

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {
    "ec-canvas": "../../components/ec-canvas/ec-canvas"
  }
}

4、log.wxml 页面引入ec-canvas组件

<!-- 使用echar记得先嵌套一层设置宽高 -->
<view class="echart-box">
  <ec-canvas class="ec-canvas" ec="{{ ec }}"></ec-canvas>
</view>

// css样式
.echart-box{
  width: 100%;
  height: 500px;
}
.ec-canvas{
  width: 100%;
  height: 100%;
}

5、log.js 页面

import * as echarts from '../../components/ec-canvas/echarts'; //(1)引入echarts.js

//(3)echars 初始化并生成图表
function initChart (canvas, width, height) {
  console.warn(width, height,'---canvas---',canvas);
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height
  });
  // canvas.setChart(chart);
  //饼图
  var option = {
    series: [
      {
        type: 'pie',
        data: [
          {
            value: 335,
            name: '直接访问'
          },
          {
            value: 234,
            name: '联盟广告'
          },
          {
            value: 1548,
            name: '搜索引擎'
          }
        ]
      }
    ]
  };

  //条形图
  var option2 = {
    xAxis: {
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {},
    series: [
      {
        type: 'bar',
        data: [23, 24, 18, 25, 27, 28, 25]
      }
    ]
  };
  
  //将图表数据 添加到setOption() 中
  chart.setOption(option2);
  return chart;
}


Page({
  data: {
    //（2）echars初始化
    ec: {
      onInit: initChart,
    },
  },
})

6、知识扩展：

• echars官网：https://echarts.apache.org/zh/index.html
• echars快速上手：https://echarts.apache.org/handbook/zh/how-to/chart-types/line/stacked-line