微信小程序使用Echarts图表 |
您所在的位置：网站首页 › 青岛92号汽油历史价格走势图片 › 微信小程序使用Echarts图表 |
微信小程序使用Echarts图表
|
微信小程序是一种不需要下载安装即开即用的应用，可实现现用app应用70%的功能，用户扫一扫或者搜索即可使用，快捷方便使得微信小程序在我们生活中已经广泛使用。为了满足微信小程序开发者的需求，Echarts官方和微信小程序官方团队合作，提供了 ECharts 的微信小程序版本。开发者可以通过熟悉的 ECharts 配置方式，快速开发图表，满足各种可视化需求。这篇博客记录一下微信小程序中使用Echarts图表库 1. 新建微信小程序项目首先我们微信开发者工具新建一个不使用云开发的微信小程序项目（图1所示），新建后的微信小程序目录结构（图2所示）
使用Echarts的图表库，我们需要将Echarts的组件先下载到本地，可以从Echarts官网（图3所示）中找到github上的图表组件下载地址（图4），下面是两个链接： Echarts官方地址：Echarts官方介绍微信小程序使用Echarts 图表组件下载地址：github官网上的 ecomfe/echarts-for-weixin 项目下载
把图表文件夹下载复制成功，我们需要修改index页面下的wxml；json；js和wxss实现图表的展示 4.1 修改index.json代码我们需要在页面json文件中引入ec-canvas组件，内容如下： { "usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" } } 4.2 修改index.html代码index.html用组件标签显示图表，指定id；canvas-id；ec，内容如下： 4.3 修改index.js代码index.js中引入了echarts.js获取echarts实例，定义绑定数据ec以及获取图表数据的初始化函数 // 引入echarts.js import * as echarts from '../../ec-canvas/echarts'; let chart = null; Page({ data: { ec: { onInit: initChart } } }) // 初始化图表函数 function initChart(canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }) canvas.setChart(chart) // 显示Echarts图表类型信息，可以去Echarts官网复制粘贴 let option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'bar', showBackground: true, backgroundStyle: { color: 'rgba(180, 180, 180, 0.2)' } }] } chart.setOption(option); return chart; } 4.4 修改index.wxss代码我们需要为view容器和ec-canvas组件指定样式才可以显示，不然无法显示图表 .echarts{ width: 800rpx; height: 800rpx; } ec-canvas{ width: 100%; height: 100%; } 5. 编译运行 图表信息复制的是柱状图的信息，所以显示的是柱状图，可以自行去Echarts官网复制粘贴样式echarts图表还是挺有意思的，值得去学习一下，用一些可视化图表去展示数据更加直观，很有成就感，引入图表需要一些echarts的基础知识，可以去Echarts官网了解学习一下，一起学习，一起努力吧 |
【本文地址】