请问有大神在 wepy 中使用 ec-chart 或者 wxchart 的组件吗?

请问有大神在wepy中使用ec-chart或者wxchart的组件吗?我已经写成组件,可以在wepy使用,如果在同一页使用两次组件,数据之间有影响,始终显示在第一个组件中,第二个组件不显示,请问怎样解决?我也想用自定义canvas id解决,但是还是不行。

《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 2
liyu001989

没用过,你可以把问题说明的再具体一点,代码截图啥的,遇到的同学可能会帮到你

5年前 评论
purson

我把我的组件编写和使用过程写一下下来,请各位大神指导一下问题出在哪里:

 1.下载包,首先编译出util/wxcharts-min.js

git clone https://github.com/xiaolin3303/wx-charts.git
npm install rollup -g
npm install
rollup --config rollup.config.prod.js


 2.编写组件

<template>
<canvas  canvasId="{{canvasId}}"  ></canvas>
</template>
<script>
import wepy from 'wepy';
import wxCharts from '../utils/wxcharts-min';

export default class Wxcharts extends wepy.component {
    props = {

      syncCategories: {
        type: Object,
        default: ['2012', '2013', '2014', '2015', '2016', '2017']
      },
      // 父页面传入,请求url
      syncSeries: {
        type: Object,
        default: [{
        name: '成交量1',
        data: [0.15, 0.2, 0.45, 0.37, 0.4, 0.8],
        format: function (val) {
            return val.toFixed(2) + '万';
        }
    }, ]
      },
      canvasId: String,

    };
    onLoad () {
        if (!this.data.canvasId) {
            console.warn('组件需绑定 canvasId 变量,例:<wx-canvas id="mychart-dom-bar" ' +
                'canvas-id="mychart-bar" ></wx-canvas>');
            return;
        }

    new wxCharts({
    canvasId: this.data.canvasId,
    type: 'line',
    categories: this.data.syncCategories,
    series: this.data.syncSeries,
    yAxis: {
        title: '成交金额 (万元)',
        format: function (val) {
            return val.toFixed(2);
        },
        min: 0
    },
    width: 300,
    height: 200
});

    };
}
</script>


 3.调用组件

<template>
     <view class="page">
    <view class="page__bd" >
       <view class="weui-article">
                <view class="weui-article__section">
                    <view class="weui-article__section">
                        <view class="weui-article__h3">美元价格(24h)</view>
                        <view class="weui-article__p">
                           <wxcharts class="charts" canvasId="lineCanvas"></wxcharts>
                        </view>

                    </view>
                    <view class="weui-article__section">
                        <view class="weui-article__h3">RAM价格</view>
                        <view class="weui-article__p">
                            <wxcharts2 class="chartsb" canvasId="lineCanvas2"></wxcharts2>
                        </view>
                    </view>
                </view>
            </view>

    </view>
  </view>
</template>
<script>
import wepy from 'wepy'
import Wxcharts from '../components/wxcharts'

export default class Index extends wepy.page {
  config = {
    'navigationBarTitleText': '统计数据'
  };

  components = {
    wxcharts: Wxcharts,
    wxcharts2: Wxcharts,

  }
}
</script>


4.最后什么也显示不出来

file


如果我将组件改成:

<template>
<canvas  canvasId="lineCanvas"  ></canvas>
<canvas  canvasId="lineCanvas2"  ></canvas>
</template>
<script>
·
·
·

file


虽然能显示两个图,但是这样的组件不灵活,组件图形也是出现在第一个组件的位置,第二个组件根本没有内容渲染。


是否有大神能指导一下,我想封装一个组件一个图表,而且两个或以上的图表组件能同时在同一个页面分别显示。

5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!