小程序图形:echarts-weixin 入门使用

去官网下载整个项目:

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

拷贝ec-canvs文件夹到小程序里面

index.js里面的写法

复制代码
import * as echarts from "../../components/ec-canvas/echarts"
const app = getApp();
function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr 
  });
  canvas.setChart(chart);
  var option = {
    backgroundColor: "#ffffff",
    series: [{
      label: {
        normal: {
          fontSize: 14
        }
      },
      type: 'pie',
      center: ['50%', '50%'],
      radius: ['20%', '40%'],
      data: [{
        value: 55,
        name: '北京'
      }, {
        value: 20,
        name: '武汉'
      }, {
        value: 10,
        name: '杭州'
      }, {
        value: 20,
        name: '广州'
      }, {
        value: 38,
        name: '上海'
      }]
    }]
  };
  chart.setOption(option);
  return chart;
}

Page({
  /**
   * 页面的初始数据
   */
  data: {
    ec: {onInit: initChart}
  }
})

index.json里面的写法

复制代码
{
  "usingComponents": {
    "ec-canvas":"../../components/ec-canvas/ec-canvas"
  }
}

页面的写法

复制代码
<view class="chart">
      <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
    </view>

样式大小控制

复制代码
.chart{
  width: 100%;
  height: 300px;
}
ec-canvas {width: 100%;height: 100%;}

效果图

相关推荐
難釋懷6 小时前
微信小程序全局配置
微信小程序·小程序
Enti7c6 小时前
微信小程序核心知识点速览
微信小程序·小程序
2501_9159184119 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域20 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷20 小时前
第一个小程序
小程序
春哥的研究所20 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld20 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点21 小时前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖1 天前
微信小程序---下拉框
微信小程序·小程序
mon_star°1 天前
搭建一款结合传统黄历功能的日历小程序
微信·微信小程序·小程序·微信公众平台