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

效果图

相关推荐
racerun7 小时前
小程序导航设置更多内容的实现方法
小程序
说私域7 小时前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6687 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
The_era_achievs_hero12 小时前
微信小程序41~50
微信小程序·小程序
走,带你去玩20 小时前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
CC同学呀1 天前
从0到100:单位订餐统计小程序开发日记2025
小程序
666HZ6661 天前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss
二十十十十十1 天前
微信点餐小程序—美食物
微信·小程序
向明天乄1 天前
在小程序中实现实时聊天:WebSocket最佳实践
websocket·网络协议·小程序