回复 刷新

暂无评论

小程序-引入 echart 图表画圆饼图

在 web 中引入echart可视化图表是很常见的操作,那在小程序当中又如何引入使用呢

下载使用 ec-canvas

在github上下载echarts-for-weixin代码,并将ec-canvas文件夹,复制拷贝到根目录路径下,与pages目录同级,或者放置到components自定义组件文件夹中

在引用ec-canvas时,相对路径引入正确即可

如下所示:pages/piecharts

配置 json

{ "usingComponents": { "ec-canvas": "../../components/ec-canvas/ec-canvas" } } 复制代码
wxml <view> <view class="pie-charts"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}" ></ec-canvas> </view> </view> 复制代码
wxss .pie-charts { width: 100%; height: 500rpx; // 一定要给ec-canvas最外层一个高度,否则canvas就不会显示出来 margin: 20px 0 0 10px; } 复制代码

js

// pages/piecharts/piecharts.js // 引入echarts,一定要引入ec-canvas中的echarts.js文件 import * as echarts from '../../components/ec-canvas/echarts'; // 图表选项 let option = { title: { // 标题 text: '圆饼图示例', x: 'center', }, tooltip: { // tip提示 trigger: 'item', formatter: '{a} \n{b} : {c} ({d}%)', }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center', }, legend: { orient: 'vertical', left: 'left', data: ['前端', '后端', '小程序', '面试题解', '读书'], }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold', }, }, labelLine: { show: false, }, data: [ // 展示的数据,一般情况下,只要动态替换到这里的数据即可,注意小程序中换行用\n而非br { value: 335, name: '前端 \n 23%' }, { value: 310, name: '后端' }, { value: 234, name: '小程序' }, { value: 135, name: '面试题解' }, { value: 1548, name: '读书' }, ], itemStyle: { // 阴影 emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, }, ], }; let chart; // 图表初始化 function initChart(canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr, // 像素 }); canvas.setChart(chart); chart.setOption(option); return chart; } Page({ /** * 页面的初始数据 */ data: { ec: { onInit: initChart, }, }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, }); 复制代码

注意事项

  1. 在小程序中的引用图表的页面中的配置 json 文件中要引入ec-canvas组件,注意路径的引用正确
  2. 在逻辑页面中,使用ec-charts前需要手动导入引入echarts,即import * as echarts from
    ‘…/…/xxxx/ec-canvas/echarts’;
  3. 在页面的wxss中需要给ec-canvas最外层一个高度,ec-canvas默认的高度是0
  4. 具体各个参数选项配置,可参考 echart 官方文档的echarts 官方文档

如何修改 ec-canvas 默认数据

知道了怎么把数据渲染到页面上,但是又如何修改默认的初始化数据呢,其实只要按照原有的数据结构,把新的数据将原来的给覆盖掉就可以了的

更新与恢复图表数据

// 假设如下是要更新的数据,一般是后台返回的 // 后台返回的数据字段可能跟图表的字段可能不一致,但是结构是必须要相同的 const pieObj = { updatelegends: ['吃饭', '约会', '购物', '旅游', '请客'], updateExpendData: [ { money: 1500, type: '吃饭' }, { money: 2000, type: '约会' }, { money: 300, type: '购物' }, { money: 400, type: '旅游' }, { money: 600, type: '请客' }, ], resetlegend: ['前端', '后端', '小程序', '面试题解', '读书'], resetExpendData: [ { value: 335, name: '前端' }, { value: 310, name: '后端' }, { value: 234, name: '小程序' }, { value: 135, name: '面试题解' }, { value: 1548, name: '读书' }, ], }; module.exports = pieObj; // 导出数据 复制代码

wxml 更新数据

<view class="change-box"> <view class="update-btn btn" bindtap="onUpdate">更新数据</view> <view class="reset-btn btn" bindtap="onResetDate">恢复数据</view> </view> 复制代码

样式代码

/* pages/piecharts/piecharts.wxss */ .pie-charts { width: 100%; height: 500rpx; // 图表的外层需要设置一个高度,否则echarts不会显示,默认高度是0 margin: 20px 0 0 10px; } .change-box { display: flex; justify-content: center; } .btn { width: 80px; height: 40px; text-align: center; line-height: 40px; border-radius: 5px; color: #fff; } .update-btn { background: #f56c6c; margin-right: 10px; } .reset-btn { background: #409eff; } 复制代码

逻辑代码

// pages/piecharts/piecharts.js // 引入echarts import * as echarts from '../../components/ec-canvas/echarts'; const pieData = require('./date'); // 引入数据 // 选项 let option = { // 初始化数据 title: { text: '圆饼图示例', x: 'center', }, legend: { orient: 'vertical', left: 'left', data: ['前端', '后端', '小程序', '面试题解', '读书'], }, tooltip: { trigger: 'item', formatter: '{a} \n{b} : {c} ({d}%)', }, series: [ { name: '访问来源', type: 'pie', radius: ['50%', '70%'], avoidLabelOverlap: false, label: { show: false, position: 'center', }, legend: { orient: 'vertical', left: 'left', data: ['前端', '后端', '小程序', '面试题解', '读书'], }, emphasis: { label: { show: true, fontSize: '20', fontWeight: 'bold', }, }, labelLine: { show: false, }, data: [ { value: 335, name: '前端 \n 23%' }, { value: 310, name: '后端' }, { value: 234, name: '小程序' }, { value: 135, name: '面试题解' }, { value: 1548, name: '读书' }, ], itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, }, ], }; let chart; function initChart(canvas, width, height, dpr) { chart = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr, // 像素 }); canvas.setChart(chart); chart.setOption(option); return chart; } Page({ /** * 页面的初始数据 */ data: { ec: { onInit: initChart, }, }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, // 更新数据 onUpdate() { console.log(pieData); const expendData = pieData.updateExpendData; const legend = pieData.updatelegends; const newExpends = expendData.map((item) => { return { name: item.type, // 因为数据结构字段不一样,所以要进行赋值,修改 value: item.money, // 如果后端返回的数据字段与图表接口字段一样,那可忽略 }; }); option.legend.data = legend; option.series[0].data = newExpends; if (chart) { chart.setOption(option); // 得重新设置Option才会生效 } }, // 恢复数据 onResetDate() { const expendData = pieData.resetExpendData; const legend = pieData.resetlegend; option.legend.data = legend; // 因为接口字段与后台返回字段相同,直接赋值即可 option.series[0].data = expendData; if (chart) { chart.setOption(option); // 得重新设置Option才会生效 } }, }); 复制代码

注意

唯一需要注意的是,不要更改图表渲染的内部数据结构,当后台返回的接口中的数据结构字段与图表不一致时

比如:上面的legend与series下的data中的name与value字段,当后端返回的子段不一样时,只需要在前台重新处理一下即可

上面的更新数据中后台返回字段时money与type,在更新数据时,需要重新赋值

最后需要setOption重新设置数据,否则图表数据是不会更新的,这个与vue-echarts与单独使用echarts有点不一样

实例效果

在这里插入图片描述
结语

主要介绍了在小程序中怎么引入图表echarts,是使用ec-canvas这个组件,在使用ec-canvas时,需要注意:
引入ec-canvas组件的路径,同时,还需要在使用的页面当中,引入组件的echart.js文件

图表的基本配置,可以参考echarts的官方文档,更新图表的数据时,需要注意:保持结构一致性,不要修改图表内部数据结构的字段

当后端返回的数据字段与图表字段不一致时,在你拿到数据接口的数据后,重新赋值即可.最后不要忘记重新setOption设置数据

  • 24
  • 0
  • 0