小程序echarts

Posted 2023-04-19

参考技术A 一、引入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))
)
)

)

echart在微信小程序中的应用

echart全家桶

echart是基于cavans的图表绘制最为强大的H5组件，其在微信小程序中也有很好的支持，全面的使用 已经有很多介绍文章，本人就不拾人牙慧了，这里补充一些在其他文章中没有出现，但是在使用过程中可能会遇到的一些问题解决方法。

引用方法

• 复制echart相关文件到小程序的根目录，最好单独建立一个目录来存储

微信小程序echart组件包文件清单

• 修改小程序的配置文件，声明对echart组件的依赖，例如要在home页使用echart组件，则应该在home页的配置文件index.json中加入如下代码：

{
  "navigationBarTitleText": "听诊器",
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

• js中导入echart组件，即在使用echart的页的主js程序import echart组件

import * as echarts from ‘../../ec-canvas/echarts.min‘

修改图表视图宽度、高度

微信小程序定义了<ec-canvas></ec-canvas>标签来使用echart组件，但是图表视图在页面中显示的宽度和高度并不能如一般的标签一样通过class来进行设置，而是在echart组件目录中的ec-cavans.wxss中，这个在实际使用中一定要注意。

.ec-canvas {
  width: 100%;
  height: 600rpx;
}

定制合适的echart组件包

echart包含了很多的组件，而且每种组件是可以按照实际需要自定义组合的，这样也能够有效的减少组件包的大小，进入echart官网，选择项目需要的组件，在线生成echart包，把生成的包复制到上面的echart组件目录中替换缺省的echart.js

https://echarts.apache.org/zh/builder.html

动态更新数据使echart以 动图的方式实时显示数据

echart最常用的场景是显示静态数据，然而还有一些场景需要实时更新数据并以可视化的方式显示出来，echart同样很好的支持了这个需要。只需要更新echart的核心option中的series.data，然后调用echart的setOption函数即可。

//echart画图
    if(pointNumber>100){
      option.series[0].data = lineData
      chart.setOption(option)
      pointNumber=0
    }

备注：其中lineData是一个要显示的数据的数组

动态数据显示效果

 

echart在微信小程序中的应用

疯冰无极 2020-07-23 09:53:43

echart全家桶

echart是基于cavans的图表绘制最为强大的H5组件，其在微信小程序中也有很好的支持，全面的使用 已经有很多介绍文章，本人就不拾人牙慧了，这里补充一些在其他文章中没有出现，但是在使用过程中可能会遇到的一些问题解决方法。

引用方法

• 复制echart相关文件到小程序的根目录，最好单独建立一个目录来存储

微信小程序echart组件包文件清单

• 修改小程序的配置文件，声明对echart组件的依赖，例如要在home页使用echart组件，则应该在home页的配置文件index.json中加入如下代码：

{
  "navigationBarTitleText": "听诊器",
  "usingComponents": {
    "ec-canvas": "../../ec-canvas/ec-canvas"
  }
}

• js中导入echart组件，即在使用echart的页的主js程序import echart组件

import * as echarts from ‘../../ec-canvas/echarts.min‘

修改图表视图宽度、高度

微信小程序定义了<ec-canvas></ec-canvas>标签来使用echart组件，但是图表视图在页面中显示的宽度和高度并不能如一般的标签一样通过class来进行设置，而是在echart组件目录中的ec-cavans.wxss中，这个在实际使用中一定要注意。

.ec-canvas {
  width: 100%;
  height: 600rpx;
}

定制合适的echart组件包

echart包含了很多的组件，而且每种组件是可以按照实际需要自定义组合的，这样也能够有效的减少组件包的大小，进入echart官网，选择项目需要的组件，在线生成echart包，把生成的包复制到上面的echart组件目录中替换缺省的echart.js

https://echarts.apache.org/zh/builder.html

动态更新数据使echart以 动图的方式实时显示数据

echart最常用的场景是显示静态数据，然而还有一些场景需要实时更新数据并以可视化的方式显示出来，echart同样很好的支持了这个需要。只需要更新echart的核心option中的series.data，然后调用echart的setOption函数即可。

//echart画图
    if(pointNumber>100){
      option.series[0].data = lineData
      chart.setOption(option)
      pointNumber=0
    }

备注：其中lineData是一个要显示的数据的数组