彩票平台

  • <tr id='FeiNoL'><strong id='FeiNoL'></strong><small id='FeiNoL'></small><button id='FeiNoL'></button><li id='FeiNoL'><noscript id='FeiNoL'><big id='FeiNoL'></big><dt id='FeiNoL'></dt></noscript></li></tr><ol id='FeiNoL'><option id='FeiNoL'><table id='FeiNoL'><blockquote id='FeiNoL'><tbody id='FeiNoL'></tbody></blockquote></table></option></ol><u id='FeiNoL'></u><kbd id='FeiNoL'><kbd id='FeiNoL'></kbd></kbd>

    <code id='FeiNoL'><strong id='FeiNoL'></strong></code>

    <fieldset id='FeiNoL'></fieldset>
          <span id='FeiNoL'></span>

              <ins id='FeiNoL'></ins>
              <acronym id='FeiNoL'><em id='FeiNoL'></em><td id='FeiNoL'><div id='FeiNoL'></div></td></acronym><address id='FeiNoL'><big id='FeiNoL'><big id='FeiNoL'></big><legend id='FeiNoL'></legend></big></address>

              <i id='FeiNoL'><div id='FeiNoL'><ins id='FeiNoL'></ins></div></i>
              <i id='FeiNoL'></i>
            1. <dl id='FeiNoL'></dl>
              1. <blockquote id='FeiNoL'><q id='FeiNoL'><noscript id='FeiNoL'></noscript><dt id='FeiNoL'></dt></q></blockquote><noframes id='FeiNoL'><i id='FeiNoL'></i>

                小程序中使用Echart

                发布日期:2020-09-05  浏览:393 

                最近有几个小程序用到◆了图表,把我一顿折腾。所以来讲一下使用图表时所遇到的问题。

                我们〖所用到的是 ECharts 的微信小程序版本 ;它提供了一个小程序原生的组件,然后我们只需要在相关页面引用改组件就好了。

                使用前准备

                 

                先下载 ecomfe/echarts-for-weixin 中 ec-canvas 整个文件夹里面的文件

                 

                 

                引用:然后在你的页面中 json文件中 引用。当然你也可以作为全局组件写在app.json 中。

                 

                {

                  "usingComponents": {

                     "ec-canvas": "../../components/ec-canvas/ec-canvas"

                    }

                }

                复制代码

                注意:上面的 ec-canvas 引用组件名不能随意改变,因为在封装的组件 ec-canvas.js 中,需要找到 该节点 。

                使用

                我们要手动给 我们的图表设置宽高,不然页面只♂会显示空白。也就是给.container 设置宽高。

                <view>

                  <ec-canvas

                   id="mychart-dom-bar"

                   canvas-id="mychart-bar"

                   ec="{{ ec }}">

                  </ec- canvas>

                </view>

                复制代码

                其中 ec 是一个我们在 我们页面 中定义的对象,它使得图表能够在页面加载▓后被初始化ぷ并设置。初始化图表的方法如下:

                function initChart(canvas, width, height, dpr) {

                  const chart = echarts.init(canvas, null, {

                    width: width,

                    height: height,

                    devicePixelRatio: dpr // 像素

                   });

                  canvas.setChart(chart);

                   // 图表数据初始化

                var option = {

                       ...

                   };

                   chart.setOption(option);

                     return chart;

                 }

                复制代码

                这对于所↘有 ECharts 图表都是通用的,用户只需要修改上面 option 的内容,即可改变图表。 option 的使用方法》参见 ECharts 配置项文档 。对于不熟悉 ECharts 的用户,可以参见 [5 分钟上手 ECharts]( echarts.baidu.com/tutorial.ht… 分钟上手 ECharts) 教程。

                因为我们一般都是需要延迟加载的, 也就是获取数据后才加载图表的,所以我们不能直接使用,

                我们需要在获取数据重■新设置 options 之后才能使用。

                代码入下:

                **.wxml 文件 **

                <view>

                  <view>全国疫情新趋势</view>

                  <ec-canvas

                    wx:if="{{hasGetOption}}"

                    class="map-chart"   

                    id="map-chart"

                    canvas-id="map-chart"

                    ec="{{ ec }}">

                   </ec-canvas>

                </view>

                复制代码

                .js 文件

                // 页面中需要引入 ec-canvas 文件夹中〗的 echcrts.js

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

                page({

                  data: {

                    hasGetOption: false,

                    ec: {

                      // 当我们设置lazyLoad 为true 的时候,我们需要手动初始→化图表。

                      lazyLoad: true,

                    }

                  },

                  ready() {

                    // 在ready 的时候获取组件的实例。否▂则可能获取不到。

                    this.echartInstance = this.selectComponent('.map-chart');

                },

                setOption () {

                  let option = {

                     title: {

                        // text: '全国疫情新增趋势'

                     },

                     tooltip: {

                       trigger: 'axis'

                     },

                     legend: {

                       data: [ '确诊']

                      },

                     grid: {

                       left: '3%',

                       right: '4%',

                       bottom: '3%',

                       containLabel: true

                     },

                     xAxis: {

                       type: 'category',

                       boundaryGap: false,

                       data: []

                     },

                     yAxis: {

                       type: 'value'

                     },

                     series: [{

                       name: '确诊',

                       type: 'line',

                       stack: '总量',

                       data: [120, 132, 101, 134, 90, 230, 210],

                       smooth: true

                      }

                      ]

                    }

                  },

                initChart(canvas, width, height, dpr) {

                  const chart = echarts.init(canvas, null, {

                    width: width,

                    height: height,

                    devicePixelRatio: dpr // new

                  });

                   canvas.setChart(chart);

                   let option = this.getOption();

                   chart.setOption(option);

                   return chart;

                  },

                getPageData() {

                   wx.request({

                  ...

                     success: (res) => {

                        // 获取到数据后再手▲动初始化

                      this.echartInstance.init(this.initChart);

                       this.setData({

                         hasGetOption: true,

                          ...

                        })

                      }

                    })

                  }

                })

                复制代码

                在之前的版本中会出现这么一个问题:

                 

                 

                因为最新基础库版本中 支持 Canvas 2d,这个可∑以提升渲染性能,解决非同层渲染问题。

                解决这个「问题只需要在 ec-cnavas.js 的data 中将 isUseNewCanvas 设为true即可。

                Taro 中使用

                因为 Taro 中可以使用 微信中▓的原生组件㊣ ,以及微信中的自定义组件。 所以使用方法同微信小程序类似。

                 

                下载

                 

                 

                页面引用

                 

                config = {

                  navigationBarTitleText: '首页',

                  usingComponents: {

                     "ec-canvas": "../../components/ec-canvas/ec-canvas"

                  }

                }

                复制代码

                使用:

                state = {

                  ec: {

                    lazyLoad: true,

                  }

                };

                // 获取↘组件实例。

                setCanvasRef = node => this.canvasRef = node;

                render () {

                  return (

                    <View className="line-chart">

                       <ec-canvas

                         id="price-chart"

                         canvas-id="price-chart"

                         ref={this.setCanvasRef}

                         ec={ec} />

                   </View>)

                }

                复制代码

                然后在数据请求完后 再图□表初始化。 init 是再组件中定义的

                this.canvasRef.init (this.initChart);   

                复制代码