精华内容
下载资源
问答
  • min_echarts:小程序echarts

    2021-05-11 15:05:53
    min_echarts:小程序echarts
  • 微信小程序echarts饼图

    2021-01-13 18:07:58
    微信小程序echarts饼图中间显示百分比 1.效果图: 2.去echarts官网下载引入(首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。) 把ec-canvas放入小程序文件中。 .js文件: import * as echarts from ...

    微信小程序echarts饼图中间显示百分比
    1.效果图
    在这里插入图片描述
    2.去echarts官网下载引入(首先,下载 GitHub 上的 ecomfe/echarts-for-weixin 项目。)
    在这里插入图片描述
    把ec-canvas放入小程序文件中。
    .js文件:
    import * as echarts from ‘…/…/ec-canvas/echarts’; //引入
    function initChart(canvas, width, height) {
    const chart = echarts.init(canvas, null, {
    width: width,
    height: height
    });
    canvas.setChart(chart);

    var option = {
    title: {
    // left: ‘center’
    },
    tooltip: {
    trigger: ‘item’,
    formatter: ‘{a}
    {b} : {c} ({d}%)’
    },
    legend: {
    orient: ‘vertical’,
    left: ‘left’,
    bottom:0,
    itemWidth: 11,
    itemHeight: 6,
    formatter: ‘{name}’,
    textStyle: {
    color: ‘#666’
    },
    data: [‘套餐及固定费用’, ‘语音通话费用’, ‘上网费’, ‘短信费用’]
    },
    calculable: true,
    series: [{
    name: ‘’,
    type: ‘pie’,
    radius: ‘80%’,
    center: [‘60%’, ‘60%’],
    label: {
    normal: {
    show: true,
    position: ‘inner’,
    textStyle: {
    fontSize: 8,
    lineHeight: 8,
    letterSpacing: 0,
    },
    formatter: ‘{d}%’
    }
    },
    data: [{
    value: 350,
    name: ‘套餐及固定费用’,
    itemStyle: {
    normal: {
    color: ‘#fdb349’
    }
    }
    },
    {
    value: 310,
    name: ‘语音通话费用’,
    itemStyle: {
    normal: {
    color: ‘#08caf3’
    }
    }
    },
    {
    value: 234,
    name: ‘上网费’,
    itemStyle: {
    normal: {
    color: ‘#0888f3’
    }
    }
    },
    {
    value: 350,
    name: ‘短信费用’,
    itemStyle: {
    normal: {
    color: ‘#eed73f’
    }
    }
    },

      ],
      emphasis: {
        itemStyle: {
          // shadowBlur: 10,
          // shadowOffsetX: 0,
          // shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }]
    

    };
    chart.setOption(option);
    return chart;
    }

    Page({

    /**

    • 页面的初始数据
      */
      data: {
      // 头部的自定义高度
      statusBarHeight: wx.getSystemInfoSync()[‘statusBarHeight’],
      ec: {
      onInit: initChart
      }

    },
    /**

    .wxss文件:
    ec-canvas {
    width: 100%;
    height: 100%;
    }

    .echart_panel {
    position: absolute;
    top: 0;
    bottom: 2rpx;
    right: 0rpx;
    left: 0;
    margin-left: 12rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    }

    .json文件:
    {
    “usingComponents”: {
    “ec-canvas”: “…/…/ec-canvas/ec-canvas”
    }
    }
    .wxml文件:


    展开全文
  • 主要介绍了微信小程序Echarts图表组件使用方法详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
  • 微信小程序echarts在iOS上无法滑动,安卓机和微信开发工具中正常 预期效果: 微信小程序echarts折线图在iOS上滑动到最下方后应该可以滑回去 实际效果: 微信小程序echarts在iOS上滑动到最下方后&#...
  • 因最近需要做图表相关小程序,需要使用echarts,然微信小程序乃至echarts官方文档对如何在微信小程序中对echarts图表进行数据绑定所述甚少,在查阅借鉴大量博文和亲自踩坑后,总结如下,方便之后使用 一、echarts...

    微信小程序 echarts表绑定数据

    因最近需要做图表相关小程序,需要使用echarts,然微信小程序乃至echarts官方文档对如何在微信小程序中对echarts图表进行数据绑定所述甚少,在查阅借鉴大量博文和亲自踩坑后,总结如下,方便之后使用

    一、echarts图表绑定静态数据

    1.图表懒加载

    注意:因为页面程序在加载时会优先加载图表,其次才会加载其他内容,但是此时图表数据还未加载出来,因此需要先使其懒加载。

    Page({
      /**
       * 页面的初始数据
       */
      data: {
        ec: {
          lazyLoad: true    //开启延迟加载
        }
      },
    

    2.引入组件

    onLoad: function (options) {
        var that = this;
          this.echartsComponent = this.selectComponent('#mychart-dom-bar');
          //#mychart-dom-bar 此处为引入ec-canvas的id
    }
    

    3.重写初始化函数

    init:function() {
        this.echartsComponent.init((canvas,width,height,dpr)=>{
          const chart = echarts.init(canvas,null,{
            width:width,
            height:height,
            dpr:dpr
          });
          chart.setOption(this.getOption());
          return chart;
        })
      },
    
      getOption:function() {
        var option = {
          title: {
            text: comm.getStatic().title
        },
        tooltip: {},
        legend: {
            data:['城市']
        },
        xAxis: {
            data: cityList
        },
        yAxis: {},
        series: [{
            name: '城市',
            type: 'bar',
            data: qzList
        }]
        };
        return option;
      },
    

    4.在utils文件下创建data.js文件

    var echartData={
      title:'绑定数据',
      city:['大上海','北京','成都','重庆'],
      area:[1002,1100,2530,3330]
    }
    
    // 静态获取数据
    function getStatic() {
      return echartData;
    }
    
    //向外暴露该函数
    module.exports = {
      getStatic:getStatic
    }
    

    5.调用静态变量

    import * as echarts from '../../ec-canvas/echarts';
    var comm = require("../../utils/data")
    var city = comm.getStatic().city;
    var area = comm.getStatic().area;
    。。。。
    
    getOption:function() {
        var option = {
          title: {
            text: comm.getStatic().title
        },
        tooltip: {},
        legend: {
            data:['城市']
        },
        xAxis: {
            data: city
        },
        yAxis: {},
        series: [{
            name: '城市',
            type: 'bar',
            data: area
        }]
        };
        return option;
      },
    

    运行结果如图
    运行结果
    二、动态绑定数据

    1.在data.js文件中创建函数请求接口获取数据

    // 动态获取数据
    function getServer(){
      return new Promise(function(resolve,reject) {
        // 成功返回resolve的值,失败返回reject的值
        wx.request({
          url: 'url',
          success(res){
            // console.log(res.data.results[0].cities);
            resolve(res.data);
          }
        })
      })
    }
    //暴露函数
    module.exports = {
      getStatic:getStatic,
      getServer:getServer
    }
    

    2.初始化变量

    // pages/bar/index.js
    import * as echarts from '../../ec-canvas/echarts';
    var comm = require("../../utils/data")
    var city = comm.getStatic().city;
    var area = comm.getStatic().area;
    var serverData = {};
    var cityList=[];
    var qzList=[];
    
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        ec: {
          lazyLoad: true    //开启延迟加载
        }
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
        var that = this;
          this.echartsComponent = this.selectComponent('#mychart-dom-bar');
          comm.getServer().then(function (res) {
            serverData=res;
            console.log(serverData)
            for(var i=0;i<serverData.cities.length;i++){
              qzList[i]=serverData.cities[i].confirmedCount;
              cityList[i]=serverData.cities[i].cityName;
            }
            console.log(res);
            that.init();
          })
      },
      
     getOption:function() {
        var option = {
          title: {
            text: comm.getStatic().title
        },
        tooltip: {},
        legend: {
            data:['城市']
        },
        xAxis: {
            data: cityList
        },
        yAxis: {},
        series: [{
            name: '城市',
            type: 'bar',
            data:  qzList
        }]
        };
        return option;
      },
    

    运行结果如图:
    动态数据绑定运行结果

    因为今日才接触小程序开发,如果有错误的地方,欢迎大家批评指正,提出自己的想法。

    展开全文
  • 微信小程序echarts学习记录——曲线图 需要在微信小程序中使用曲线图来展示数据,这里使用echarts插件来画曲线图 1、下载echarts组件 首先,下载echarts组件,下载地址...

    微信小程序echarts学习记录——曲线图

    需要在微信小程序中使用曲线图来展示数据,这里使用echarts插件来画曲线图

    1、下载echarts组件

    首先,下载echarts组件,下载地址https://github.com/ecomfe/echarts-for-weixin

    2、引入echarts组件

    下载好后,将下载文件中 ec-canvas目录下的文件拷贝到小程序的目录中。

    然后在需要的页面引入即可。

    3、开始在小程序中使用echarts组件画曲线图

    1)在页面开启使用echarts

    在.json页面的usingComponents里面引入echarts组件,如下:

    2)在js文件中引入echarts

    在.js文件中引入echarts组件,如下:

    3)前端页面使用echarts元素

    在.wxml文件中,echarts创建了一个 组件,内容如下

    其中 ec 是一个ECharts在 index.js 中定义的对象,它使得图表能够在页面加载后被初始化并设置

    4)开始编写曲线图

    在.js文件中编写方法,如下:

    var option = {
      color: ["#999999"],
      legend: {
        data: ['测量身高'],
        left: 'right',
        z: 100
      },
      grid: {
        containLabel: true,
        left: '5%',
        right: '5%'
      },
      tooltip: {
        show: true,
        trigger: 'axis',
        // formatter: "周数:{b}\n增重:{c}",
        position: function (pos, params, el, elRect, size) {
          var obj = { top: 100 };
          obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 3)]] = 30;
          return obj;
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: [],
        show: true,
      },
      yAxis: {
        x: 'center',
        type: 'value',
        name: '身高(厘米)',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        },
        min:45,
        max:135,
        interval: 5,
        // show: false
      },
      series: [{
        name: '建议增长上限',
        type: 'line',
        smooth: true,
        data: [],
        connectNulls: true
      }, {
        name: '测量身高',
        type: 'line',
        smooth: true,
        data: [],
        connectNulls: true
      }, {
        name: '建议增长下限',
        type: 'line',
        smooth: true,
        data: [],
        connectNulls: true
      }],
    };
    
    function initChart(canvas, width, height) {
      var windowWidth = 320;
      try {
        var res = wx.getSystemInfoSync();
        windowWidth = res.windowWidth;
      } catch (e) { }
      lineChart = echarts.init(canvas, null, {
        width: windowWidth,
        height: 480
      });
      canvas.setChart(lineChart);
      lineChart.setOption(option);
      return lineChart;
    }
    
    data: {
    image_height: 480,
        image_width: 0,
        ec: {
          onInit: initChart
        },
    }
    
    drawImage: function (data, that) {
        var windowWidth = 320;
        try {
          var res = wx.getSystemInfoSync();
          windowWidth = res.windowWidth;
        } catch (e) { }
        that.setData({
          image_width: windowWidth
        })
        let gravidaInfo = wxcache.get(sessionKey.gravidaInfo)
        var category = [];
        for (var i = 0; i < 49; i++) category.push(i == 0 ? (i + "月") : i);
        let series = [{
          name: '建议增长上限',
          data: ''
        }, {
          name: '测量身高',
          data: data
        }, {
          name: '建议增长下限',
          data: ''
        }];
        setTimeout(function () {
          lineChart.setOption({
            xAxis: {
              data: category
            },
            series: series
          });
        }, 500)
      },
    
    onShow: function() {
      let that = this
      that.drawImage(Stature, this);
    }

    5)最终效果

     

     

     

     

     

     

     

     

     

    转载于:https://www.cnblogs.com/huangxc/p/10589418.html

    展开全文
  • 微信小程序echarts组件

    2018-10-24 12:19:48
    为了兼容小程序 Canvas,ECharts提供了一个小程序的组件,用这种方式可以方便地使用 ECharts。index.json 配置如下: { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } }
  • 微信小程序ECharts的tooltip不支持问题 使用这个文章里面的小程序demo https://github.com/ecomfe/echarts-examples 然后把里面的ec-canvas引入到项目中即可支持tooltip ECharts动态赋值问题: ...

    微信小程序ECharts的tooltip不支持问题
    使用这个文章里面的小程序demo
    https://github.com/ecomfe/echarts-examples
    然后把里面的ec-canvas引入到项目中即可支持tooltip

    ECharts动态赋值问题:
    https://blog.csdn.net/qq_24468953/article/details/103821132

    import * as echarts from '../../ec-canvas/echarts';
    
    const app = getApp();
    var chart = null
    
    function initChart(canvas, width, height) {
      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chart);
      return chart;
    }
    
    Page({
      onShareAppMessage: function (res) {
        return {
          title: 'ECharts 可以在微信小程序中使用啦!',
          path: '/pages/index/index',
          success: function () { },
          fail: function () { }
        }
      },
      data: {
        ec: {
          onInit: initChart
        },
        kk:[{
          value: 55,
          name: '他人'
        }, {
          value: 20,
          name: '个人'
        }]
      },
    
      onReady() {
    
      },
    
      onLoad(){
        this.getLastDay()
      },
      //获取七天的日期
      getLastDay(){
        var that = this;
        var option = {
    
          tooltip: {
            trigger: 'item',
            formatter: '{a}\n{b}: {c} ({d}%)'
          },
          grid: {
            width: '500',
            height: '500'
          },
          backgroundColor: "#ffffff",
          color: ["#37A2DA", "#32C5E9", "#67E0E3", "#91F2DE", "#FFDB5C", "#FF9F7F"],
          series: [{
            name: '访问来源',
            label: {
              normal: {
                fontSize: 14
              }
            },
            type: 'pie',
            center: ['50%', '50%'],
            radius: ['60%', '80%'],
            data: that.data.kk
          }]
        };
        setTimeout(()=>{
          chart.clear()
          chart.setOption(option);
        },1500)
      }
    });
    
    <view class="pieContainer">
     
      <ec-canvas 
      id="mychart-dom-pie" 
      canvas-id="mychart-pie"
      ec="{{ ec }}"
      bind:init="echartInit" 
      data-record="{{recordData}}">
      
      </ec-canvas>
    </view>
    

    详细请看:www.ricemc.cn
    另外:
    查看外国人对中国的看法的网站谁在说话社区:www.mcqi.cn

    展开全文
  • 微信小程序 Echarts 异步数据更新的练习,被坑了很多次,特作记录。 作者:罗兵 地址:https://www.cnblogs.com/hhh5460/p/9989805.html 0、效果图   1、视图 &lt;!--index.wxml--&gt; &lt;view class...
  • 在微信小程序中使用 Apache ECharts (incubating) 这里面也写了具体的引入过程 可参考: 微信小程序使用echarts 微信小程序中使用echarts 或者直接看github里面的示例代码 使用echarts,一般使用都是从后端获取...
  • 0 小程序开发背景1 下载官方Github项目2 按照Echarts官网的map示例使用3 点击事件的函数效果图 0 小程序开发背景 前段时间在上学校的软件开发与实践B课程 因为赶上了工大百年校庆,选择了开发百年工大校庆微信...
  • 最近公司的项目中需要在小程序内使用echarts组件来展示数据,同时因为使用了自定义导航栏以及蒙版层,导致Echarts图形覆盖于所有组件的上方,不符合设计要求。  尝试解决的思路:  z-index:Echarts使用的是微信...
  • 小程序echarts太大

    千次阅读 2019-06-10 12:24:34
    当在小程序里面使用echarts,发现项目过大的时候,可以 在线定制 (https://echarts.baidu.com/builder.html) 可自由选择所需图表、坐标系、组件进行打包下载,并且可对渲染引擎、兼容及压缩问题进行设置,想用...
  • 小程序中代码上传大小规定只有2M,而echarts小程序中使用必须要在本地使用,无法使用连接的方式外部引用(微信官方规定项目有请求白名单)。 那么在项目中使用了echarts会非常占用我们有限的空间,那怎么办呢,下面就...
  • uniapp 小程序echarts 使用

    千次阅读 热门讨论 2019-03-14 17:40:13
    npm install echarts mpvue-echarts --save 3.将这三个文件夹复制粘贴到项目echarts、mpvue-echats、zrender 4. 5. &lt;template&gt; &lt;view class="content"&gt; &lt;...
  • 小程序echarts折线图

    2020-07-16 11:45:15
    import * as echarts from '../../ec-canvas/echarts'; const util = require('../../utils/util.js') const app = getApp(); function initChart(canvas, width, height) { const chart = echarts.init(canvas, ...
  • 小程序ECharts使用接口调入数据 首先附上js文件链接:axios.js 提取码:AxIo 将此放到小程序目录下的utils文件夹下 在已经完成图表的js文件中完成以下修改: ①引用axios.js const axios = require('../../utils/...
  • 小程序echarts+canvasdrawer实现页面转化图片并保存到相册 场景:小程序测试活动,实现echarts雷达图展示不同的结果、微信头像、二维码、测试结果文字,最终绘制出一张图片用户保存相册。考虑到开发时间及各种坑使用...
  • import * as echarts from '../../ec-canvas/echarts';... title: 'ECharts 可以在微信小程序中使用啦!', path: '/pages/index/index', success: function () { }, fail: function () { } } }, .
  • <div><p>backgroundColor 可以更改颜色,但是透明度更改不了 borderWidth 无效 borderColor 无效 <p><img alt="image" src=...ecomfe/echarts-for-weixin</p></div>
  • 首先要在小程序管理后台的“设置-第三方服务-插件管理”中添加插件。开发者可登录小程序管理后台,通过wx1db9e5ab1149ea03查找插件并添加。通过申请后,方可在小程序中使用相应的插件 2、引入插件配置 在 app.json...
  • 小程序Echarts初体验

    2020-05-28 12:00:07
    2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完美的。 如果是在项目里面引入组件的话,打开从github上面下载的代码,将ec-canvas文件夹复制黏贴到你的项目里面。 图片.png 好的,组件...
  • 微信小程序Echarts—饼图

    万次阅读 2019-03-08 16:38:59
    Echarts官方文档:http://www.echartsjs.com/examples/ wxml: &amp;lt;ec-canvas id=&quot;mychart-dom-bar&quot; class='mychart-bar' canvas-id=&quot;mychart-bar&quot; ec=&quot;{...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,223
精华内容 489
关键字:

小程序echarts