小程序图形: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%;}

效果图

相关推荐
cookqq1 小时前
Cursor和Hbuilder用5分钟开发微信小程序
微信小程序·小程序·curosor
老华带你飞2 小时前
考研论坛平台|考研论坛小程序系统|基于java和微信小程序的考研论坛平台小程序设计与实现(源码+数据库+文档)
java·vue.js·spring boot·考研·小程序·毕设·考研论坛平台小程序
毕设源码-钟学长3 小时前
【开题答辩全过程】以 基于微信小程序的美发服务系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
canglingyue4 小时前
微信小程序罗盘功能开发指南
微信小程序·小程序
2501_915106328 小时前
App Store 软件上架全流程详解,iOS 应用发布步骤、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
开发加微信:hedian11610 小时前
微信推客小程序系统开发技术实践
微信·小程序
说私域13 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序在淘宝公域流量运营中的应用研究
人工智能·小程序·开源
2501_9160137413 小时前
App 上架全流程指南,iOS App 上架步骤、App Store 应用发布流程、uni-app 打包上传与审核要点详解
android·ios·小程序·https·uni-app·iphone·webview
canglingyue13 小时前
微信小程序加速计开发指南
微信小程序·小程序
SY_FC14 小时前
uniapp发布成 微信小程序 主包内 main.wxss 体积太大
微信小程序·小程序·uni-app