微信小程序使用echarts下拉画布从新渲染

最新推荐文章于 2024-07-24 21:37:50 发布

小齐的编程之路

最新推荐文章于 2024-07-24 21:37:50 发布

阅读量376

点赞数 4

文章标签：微信小程序 echarts 小程序

本文链接：https://blog.csdn.net/a896532147/article/details/134289361

版权

1，在Apache ECharts官网找到自己想要的图表，这里需要注意的是从后台拿到的数据格式要与你的图表的数据格式一致，

2，将下载的文件名为“ec-canvas”Copy到你的微信小程序中，在需要的json中引入

  "usingComponents": {
        "ec-canvas":"../ec-canvas/ec-canvas"
    }

wxml中

<ec-canvas id="echart-pie-three" disable-scroll="{{true}}" ec="{{costincome}}"></ec-canvas>

js中

import * as echarts from '../ec-canvas/echarts.min';

//饼状图
function setOption(chart,data){
    var option = {
    
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [5, 60],
            center: ['50%', '50%'],
            bottom: 50,
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: data
          }
        ]
      
        };
        chart.setOption(option);
        return chart;
  }


page({

    data:{
        costincome:{
                //懒加载，手动初始化图表
            lazyLoad: true
                }
        

    },



      /**
     * 生命周期函数--监听页面加载
     */
      onLoad(options) {
        
        this.inti();
    },

    inti(){
            //获取后台数据如：
        data:[
            { value: 40, name: '日用品' },
            { value: 35, name: '生活用品' },
            { value: 32, name: '旅行' },
            { value: 30, name: '购物' },
            { value: 28, name: '送礼' },
            { value: 26, name: '三餐' },
            { value: 22, name: '出行' },
            { value: 38, name: '学习用品' }
              ],

    //调用initchart方法
        this.initchart(data)
            
           }

    initchart:function(data){
            //wxml中的id"echart-pie-two",，不要写成“canvas-id”的值
      let ecComponent = this.selectComponent('#echart-pie-two');
        ecComponent.init((canvas, width, height, dpr) => {
          // 初始化图表
          const chart = echarts.init(canvas, null, {
            width: width,
            height: height,
            devicePixelRatio: dpr // new
          });
          //调用setOption()方法，并且将从后台拿到的数据传到Echarts
          setOption(chart,data);
          return chart;
        });

      },

})

最后成品展示