微信小程序添加Echarts图表

  • 第一步 下载Echarts插件

这个echarts插件不是像vant组件一样使用npm下载 而是去下面这个地址下载GitHub - ecomfe/echarts-for-weixin: Apache ECharts 的微信小程序版本

下载好解压文件后长这样,我们将里面的ec-canvas文件复制到微信小程序的文件夹中,一般放在pages同级目录下

在你所需要引入的page页面中的json文件,wxml和js文件分别添加一下代码 

//home.json  在usingComponents添加 路径为你ec-canvas文件的相对路径
{
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}


// home.wxml 这里必须拿一个view包裹住 设置 高宽 不然显示不出来
<view class="chart_one"> 
    <ec-canvas  class="canvas" id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>

// home.js 在js文件里先引入 然后写方法 这个方法是写在page({})外 ,
// 但是定义的参数是放在page({})里的data中 具体如下
import * as echarts from '../../ec-canvas/echarts';
function initChart(canvas, width, height, dpr) {
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr // new
    });
    canvas.setChart(chart);
   
    var option = {
      title: {
        text: '测试下面legend的红色区域不应被裁剪',
        left: 'center'
      },
      legend: {
        data: ['A', 'B', 'C'],
        top: 50,
        left: 'center',
        backgroundColor: 'red',
        z: 100
      },
      grid: {
        containLabel: true
      },
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        // show: false
      },
      yAxis: {
        x: 'center',
        type: 'value',
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
        // show: false
      },
      series: [{
        name: 'A',
        type: 'line',
        smooth: true,
        data: [18, 36, 65, 30, 78, 40, 33]
      }, {
        name: 'B',
        type: 'line',
        smooth: true,
        data: [12, 50, 51, 35, 70, 30, 20]
      }, {
        name: 'C',
        type: 'line',
        smooth: true,
        data: [10, 30, 31, 50, 40, 20, 10]
      }]
    };
   
    chart.setOption(option);
    return chart;
  }
Page({
    data:{
       ec: {
            onInit: initChart
        }}
}),
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad() {

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }

// home.wxss
  .chart_one{
	width: 750rpx;
	height: 600rpx;
  }

亲测 这样是可以成功将echarts图表显示出来的 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: uniapp 是一种跨平台开发框架,支持多个小程序平台的开发,包括微信小程序。而 echarts 是一种非常强大的数据可视化工具,能够轻松地将数据转化成图形化的展示方式,方便用户进行数据的分析和理解。 在使用 uniapp 开发微信小程序时,可以通过引入 echarts 库的方式,在小程序中使用 echarts 进行数据可视化的展示。首先,在 uniapp 中安装 echarts 库,然后在需要使用 echarts 的页面中引入 echarts 库,可以直接在引入的页面中使用 echarts 的 API 进行图表的创建和展示。 同时也需要注意的是,在使用 echarts 进行数据可视化展示时,要根据实际情况选择合适的图表类型,以达到最好的展示效果。另外还需要根据项目的实际需求,对数据进行预处理和格式化,确保数据的准确性和可读性。 总之,使用 uniapp 开发微信小程序中使用 echarts 进行数据可视化,并非难事,只需按照 echarts 的 API 进行开发即可。如此一来,开发者便可轻松地创建优美而实用的图表,完美呈现出数据的内在价值。 ### 回答2: uniapp 是一种跨平台开发框架,可以同时支持微信小程序、H5、安卓、iOS等平台。而 Echarts 是一款优秀的数据可视化工具,可以将数据以图表的形式展示出来,支持多种图表类型和交互方式。那么在 uniapp 中如何使用 echarts 呢? 首先,在 uniapp 中引入 echarts 库。可以使用 npm 安装 echarts,也可以直接下载 echarts.js 文件并放置在项目中。 然后,在需要使用 echarts 的页面或组件中,引入并初始化 echarts。可以在页面或组件的 onReady 或 mounted 生命周期中进行初始化。具体步骤如下: 1. 引入 echarts 库 ``` import * as echarts from 'echarts'; ``` 2. 初始化 echarts ``` onReady() { let myChart = echarts.init(this.$refs.chart); myChart.setOption({...}); // 设置图表的配置项和数据 } ``` 其中,`this.$refs.chart` 是一个 div 元素,用来承载图表。 3. 设置图表的配置项和数据 ``` let option = { title: {...}, legend: {...}, xAxis: {...}, yAxis: {...}, series: {...} }; myChart.setOption(option); ``` 配置项和数据决定了图表的样式和内容,可以根据自己的需求进行设置。 需要注意的是,微信小程序有一些特殊的限制,如不能使用动态的 DOM,因此echarts的一些动态特效不能使用。同时,echarts 也只能显示在固定大小的画布上,不能根据屏幕大小自适应调整。 总结来说,使用 echarts 在 uniapp 中的流程是:引入库、初始化 echarts、设置配置项和数据。需要特别注意微信小程序的限制,对一些动态特效或屏幕适应做出相应的调整。通过这些步骤,可以让我们在 uniapp 中轻松使用 echarts 进行数据可视化。 ### 回答3: 在uniapp中可以使用echarts来实现数据可视化的效果,适用于各种类型的微信小程序。 首先,在uniapp项目中引入echarts组件库,可以使用npm或手动下载方式引入。先安装echarts组件库,然后通过uni_modules目录下的uni-mpvue-router-patch插件引入,最后通过Vue.use()进行注册。 接下来,在需要使用echarts的页面引入echarts组件,并使用template标签来编写echarts图表的HTML模板。其中,通过echarts.init()初始化echarts,使用option配置项来配置图表的样式和数据。 最后,在vue页面组件中导入数据,并在echarts实例的setOption()方法中更新图表数据。此时,页面中的echarts图表便会根据更新后的数据来重新绘制。 需要注意的是,在使用echarts时,应该了解相关API和样式配置,以便更好地使用其功能,实现所需的数据可视化效果。 总之,通过以上步骤,可以在uniapp微信小程序中实现使用echarts进行数据可视化的功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值