微信小程序+canvas+echarts循环数据生成折线图

Upward Force

于 2020-06-29 08:59:00 发布

阅读量1.5k

点赞数 4

分类专栏：图表微信小程序 Echarts 文章标签：小程序 javascript canvas 数据可视化 css

本文链接：https://blog.youkuaiyun.com/qq_43884155/article/details/107002607

版权

1、下载GitHub上的 ecomfe/echarts-for-weixin 项目

2、拷贝 ec-canvas 目录到自己的项目中
在这里插入图片描述

3、循环生成折线图效果预览
在这里插入图片描述

4、代码演示 - 在需要的页面创建折线图

test.json

{
   
  "usingComponents": {
   
    "ec-canvas": "../../lib/ec-canvas/ec-canvas"
  }
}

test.wxml

<view class="box" wx:for="{
    {ecLine}}" wx:key="index">
    <ec-canvas ec="{
    { ecLine[index] }}"></ec-canvas>
</view>

test.wxss

.box {
   
	width:100%;
	height:600rpx;
	background-color: pink;
}