微信小程序使用echarts-青狐资源网

微信小程序使用echarts

第一种使用方法

wxml

<viewstyle=“height:500rpx;“><ec-canvasid=“mychart-dom-line”canvas-id=“mychart-line”ec=“{{ ec }}”></ec-canvas></view><buttonbindtap=“pie”type=“primary”>饼图</button>

js

https://github.com/ecomfe/echarts-for-weixin找到里面的ec-canvas文件夹import*as echarts from../ec-canvas/echarts;Page({/**编程网点我wcqh.cn * 页面的初始数据 */ data:{ ec:{ onInit:Object}}, drawWorkOrderCharts(){var oneComponent =this.selectComponent(#mychart-dom-line2) oneComponent.init((canvas, width, height,dpr)=>{const chart = echarts.init(canvas,null,{ width: width, height: height, devicePixelRatio: dpr}); canvas.setChart(chart);//canvas画布上创建一个图表 chart.setOpti编程网点我wcqh.cnon({ tooltip:{ trigger:axis, axisPointer:{// 坐标轴指示器，坐标轴触发有效 type:cross,// 默认为直线，可选为：line | shadow | cross axis:“x”,},}, grid:{ top:15, left:15, bottom:15, containLabel:true}, xAxis:{ type:category, data:[周一,周二,周三,周四,周五,周六,周日],}, yAxis:{}, series:[{ name:工单总数, type:line, data:[120,130,140,133,122,167,176],},{ name:完成总数编程网点我wcqh.cn, type:line, data:[110,120,140,80,112,160,170],}]});this.setData({ ec:{ onInit:()=> chart}})});},/** * 生命周期函数–监听页面加载 */ onLoad:function(options){this.drawWorkOrderCharts()//也可以直接调用，但是会有提示。},})

第二种使用方法

import*as echarts from~/ec-canvas/echarts;//这里我设置的绝对路径var option =[];//图表配置项声明// 初始化图表函数开始let chart =null;functi编程网点我wcqh.cnon initChart(canvas, width, height, dpr){ chart = echarts.init(canvas,null,{ width: width, height: height, devicePixelRatio: dpr}) canvas.setChart(chart)return chart;}Page({ data:{ topLabel:检验详情, ec:{ onInit: initChart},Pie:null, x:null, y:null,}, drawWorkOrderCharts(){//图表 setTimeout(()=>{let arr2 =[23,24,25,26,27,28,29];//编程网点我wcqh.cn X轴假数据let datas2 =[773,768,865,937,148,487,410];// Y轴假数据letPie=[{ value:23, name:773},{ value:24, name:768},{ value:25, name:865},{ value:26, name:937},{ value:27, name:148},{ value:28, name:487},{ value:29, name:410}];// 饼图假数据 chart.setOption({// backgroundColor:#578EFF, tooltip:{ trigger:“axis”, axisPointer:{ type:“sh编程网点我wcqh.cnadow”}}, grid:{ left:40, right:10, bottom:30, top:20}, xAxis:[{ type:category, data:[收缩压(mmHg),舒张压 (mmHg),脉搏 (bpm)], axisLabel:{ fontSize:9}}], yAxis:[{ type:“value”}], series:[{ barWidth:“20%”, data:[{ value:120, itemStyle:{ color:#578EFF,}},{ value:200, itemStyle:{ color:#51AEFF,}},{ value:150, itemStyle:{ color:#78A4FF,编程网点我wcqh.cn}}], type:bar}]})this.setData({ x: arr2, y: datas2,Pie:Pie,})},1000);}, pie(){//饼图 option ={ tooltip:{ trigger:item}, legend:{ top:5%, left:center}, series:[{ name:收益明细, type:pie, radius:[40%,70%], avoidLabelOverlap:false, itemStyle:{ borderRadius:10, borderColor:#fff, borderWidth:2}, label:{ show:false, position:center},em编程网点我wcqh.cnphasis:{ label:{ show:true, fontSize:40, fontWeight:bold}}, labelLine:{ show:false}, data:this.data.Pie,}]}; chart.setOption(option)}, reques(){//请求方式数据的方式 wx.request({ url:填入自己的接口，把下面的假数据更改即可,//请求数据信息的接口地址 data:{}, header:{content-type:application/json// 默认值}, success:(res)=>{let arr2 =[23,24,25,26,27,28,29];// X轴编程网点我wcqh.cn假数据let datas2 =[773,768,865,937,148,487,410];// Y轴假数据letPie=[{ value:23, name:773},{ value:24, name:768},{ value:25, name:865},{ value:26, name:937},{ value:27, name:148},{ value:28, name:487},{ value:29, name:410}];// 饼图假数据// 显示Echarts图表类型信息，可以去Echarts官网复制粘贴// 默认输出柱状图的配置项 option ={ xAxis:{ type:category, data: arr2},yAx编程网点我wcqh.cnis:{ type:value}, series:[{ label:{//数据显示 show:true, color:inherit, position:top, fontSize:10,}, data: datas2, type:bar, showBackground:true, backgroundStyle:{ color:rgba(180, 180, 180, 0.2)}},]}// 输出到页面 chart.setOption(option);// 数据获取结束this.setData({ x: arr2, y: datas2,Pie:Pie,})}})}, onLoad:function(options){this.d编程网点我wcqh.cnrawWorkOrderCharts()}, onReady:function(){},})

作者最新博文

npm,webpack常用命令

2022-09-06 23:07:01

1.如需技术支持联系QQ：1339833655 2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！ 4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 6. 如有链接无法下载、失效或广告，请联系管理员处理！ 7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！ 8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！

THE END