小程序echarts

一、引入ec-canvas文件

https://github.com/ecomfe/echarts-for-weixin

“ec-canvas”

二、配置json

{

"usingComponents":{

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

}

}

三、书写结构

<view class="container log-list">

<ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ec}}"></ec-canvas>

</view>

四、js文件

//logs.js

const util = require('../../utils/util.js')

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

const app = getApp()

function initChart(canvas,width,height){

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

width:width,

height:height

})

canvas.setChart(chart)

var option = {

color:["#37A2DA","#67E0E3","#9FE6B8"],

legend:{

data:["A","B","C"],

top:20,

left:"center",

z:100

},

grid:{

left:"3%",

right:"4%",

bottom:"3%",

containLabel:true

},

xAxis:{

type:"category",

boundaryGap:false,

data:["周一","周二","周三","周四","周五","周六","周日"]

}

chart.setOption(option)

return chart

}

Page({

onShareAppMessage:function(res){

return{

title:"Echarts",

path:"/pages/index/index",

success:function(){},

fail:function(){}

}

},

data: {

ec:{

onInit:initChart

},

logs: []

},

onReady(){},

onLoad: function () {

this.setData({

logs: (wx.getStorageSync('logs') || []).map(log =>{

return util.formatTime(new Date(log))

})

})

}

})

在微信小程序中使用Echarts需要进行一些额外的配置才能正确显示，以下是可能的解决方法：

确认echarts库是否已正确安装，可以在uniapp的依赖管理器中查看echarts是否已被正确安装。

在uniapp中，需要先引入Echarts组件库，在页面中进行调用。可以在页面的 .json 文件中添加以下配置：

css

Copy code

{

"usingComponents": {

"ec-canvas": "@echarts-weixin/ec-canvas"

}

}

确保使用的Echarts版本是支持微信小程序的版本，可以使用以下命令安装：

kotlin

Copy code

npm install echarts@^4.0.0 --save

npm install echarts-gl@^1.1.0 --save

npm install echarts-liquidfill@^1.1.1 --save

在使用Echarts的页面中，需要初始化echarts实例，以及将实例绑定到页面的canvas元素上，可以参考以下示例代码：

kotlin

Copy code

import * as echarts from 'echarts'

export default {

data() {

return {

ec: {

lazyLoad: true // 延迟加载

}

}

},

onLoad() {

this.ecComponent = this.selectComponent('#mychart')

this.ecComponent.init((canvas, width, height, dpr) =>{

// 初始化echarts实例

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

width: width,

height: height,

devicePixelRatio: dpr // 像素比

})

// 设置options

chart.setOption({

// options 配置

})

// 将图表实例绑定到页面上

this.chart = chart

this.canvas = canvas

return chart

})

}

}

希望这些解决方法能够帮助你解决问题。

taro单独为某个项目切换taro版本环境

单独为某一个项目升级#这样做的好处是全局的 Taro 版本还是 1.x 的，多个项目间的依赖不冲突，其余项目依然可以用旧版本开发。 如果你的项目里没有安装 Taro CLI，你需要先装一个：

# 如果你使用 NPM

$ npm install --save-dev @tarojs/cli@2.x

# 如果你使用 Yarn

$ yarn add -D @tarojs/cli@2.x

echarts在小程序中滑动卡顿

由于微信小程序中，echarts的层级最高，无论设置多大层级也无法遮住echarts。而且小程序中好像只能用echarts吧。所以为了解决这个bug，我只能委屈求全了。打开ec-canvas.wxml文件，将touchStart、touchMove和touchEnd去掉了，直接删除就好啦。这三个事件应该是做缩放的吧，我们也没有这个缩放的需求。所以就去掉了。虽然暂时满足的需求，还是没有真正的解决问题。

原：

bindinit="init"

bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}"

bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}"

bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"

现：

bindinit="init"

echarts在小程序中无法跟随页面滑动

在卡顿问题中能与echarts交互少的，可以直接使用图片代替cannvas，即在echarts渲染完毕后将它替换为一张图片。

如果我更新了数据，那么就重新放出echarts，等它渲染完毕后，再次替换为一张图片。

chart.on('finished', () =>{

getCurrentInstance().page.selectComponent(id).canvasToTempFilePath({

success: res =>{

console.log('res.tempFilePath====',res.tempFilePath)

this.setState({

echartImgSrc: res.tempFilePath

      })

},

    fail: res =>console.log('转换图片失败', res)

})

})

render:

this.state.echartImgSrc =='' ?

  ref={this.refChart}

id={this.state.id}

canvas-id="mychart-area"

  force-use-old-canvas="true"

  ec={this.state.ec}

/>

:

<CoverImage src={this.state.echartImgSrc}></CoverImage>

---