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

news/2024/7/20 2:55:57 标签: 小程序

去官网下载整个项目:

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%;}

效果图


http://www.niftyadmin.cn/n/5404283.html

相关文章

设计模式学习笔记 - 设计原则 - 5.依赖反转原则(控制反转、依赖反转、依赖注入)

前言 今天学习 SOLID 中的最后一个原则&#xff0c;依赖反转原则。 本章内容&#xff0c;可以带着如下几个问题&#xff1a; “依赖反转” 这个概念指的是 “谁跟谁” 的 “什么依赖” 被反转了&#xff1f; “反转” 这两个字该如何理解。我们还经常听到另外两个概念&#…

架构面试题汇总:并发和锁(三)

在现代软件开发中&#xff0c;并发编程和多线程处理已成为不可或缺的技能。Java作为一种广泛使用的编程语言&#xff0c;提供了丰富的并发和多线程工具&#xff0c;如锁、同步器、并发容器等。因此&#xff0c;对于Java开发者来说&#xff0c;掌握并发编程和多线程处理的知识至…

借助 Aspose.Words,使用 C#、Java、Python 和 C++ 创建 Word 文档

以编程方式创建和操作 Word 文档是许多应用程序的常见要求。幸运的是&#xff0c;有各种编程语言的强大库可以简化此任务。Aspose.Words 就是此类多功能解决方案之一&#xff0c;它是强大的 API&#xff0c;使开发人员能够无缝生成、修改和转换 Word 文件。在这篇博文中&#x…

LeetCode 刷题 [C++] 第279题.完全平方数

题目描述 给你一个整数 n &#xff0c;返回 和为 n 的完全平方数的最少数量 。 完全平方数是一个整数&#xff0c;其值等于另一个整数的平方&#xff1b;换句话说&#xff0c;其值等于一个整数自乘的积。例如&#xff0c;1、4、9 和 16 都是完全平方数&#xff0c;而 3 和 11…

leetcode-简单

448. 找到所有数组中消失的数字 硬解 时间O(n)&#xff0c;空间O(n) class Solution { public:vector<int> findDisappearedNumbers(vector<int>& nums) {vector<int> result;vector<int> tem(nums.size()1, 0);for(int i: nums){tem[i] 1;}for…

hexo图片显示不出且图片路径错误/.com//

参考博客&#xff1a; hexo 图片显示问题及使用typora设置图片路径-CSDN博客 javascript - hexo 图片路径错误/.com// - SegmentFault 思否 先说如何让hexo图片成功地显示出来 Step1: 修改config设置 将 _config.yml 设置文件中的 post_asset_folder 修改为 true 这一步的作…

【LeetCode周赛】第 387 场周赛

目录 100243. 将元素分配到两个数组中 I 简单100237. 元素和小于等于 k 的子矩阵的数目 中等100234. 在矩阵上写出字母 Y 所需的最少操作次数 中等100246. 将元素分配到两个数组中 II 困难 100243. 将元素分配到两个数组中 I 简单 100243. 将元素分配到两个数组中 I 分析&…

51单片机(6)-----直流电机的介绍与使用(通过独立按键控制电机的运行)

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步。 目录 一. 直流电机模块介绍 1.直流电机介绍 2.电机参数 二. 程序设计…