微信小程序> 小程序使用echarts-条形统计图-小程序统计图插件-微信小程序统计图

小程序使用echarts-条形统计图-小程序统计图插件-微信小程序统计图

浏览量:4890 时间: 来源:编程小橙子
timg.jpg先看效果图image.png下载GitHub上的ecomfe/echarts-for-weixin项目

1.首先在app.json中新建一个页面("pages/echarts/echarts")

image.png

2.将下载好的echarts-for-weixin-master进行解压后找到ec-canvas该文件夹,将该文件夹粘贴到项目中

image.png3.在echarts.json中进行配置{"usingComponents":{"ec-canvas":"../../ec-canvas/ec-canvas"},"navigationBarTitleText":"统计图"}

4.echarts.wxml

viewclass="content-echarts"ec-canvasid="mychart-line"canvas-id="mychart-line"ec="{{ec}}"/ec-canvas/view

5.echarts.js

//pages/echarts/echarts.jsimport*asechartsfrom'../../ec-canvas/echarts'functioninitChart(canvas,width,height){constchart=echarts.init(canvas,null,{width:width,height:height})canvas.setChart(chart)varoption={color:['#FFCC00'],title:{text:'本周销量统计图'},tooltip:{},legend:{data:['销量']},xAxis:{data:["周一","周二","周三","周四","周五","周六",'周日']},yAxis:{},series:[{name:'销量',type:'bar',data:[5,20,36,10,13,20,38]}]};chart.setOption(option)returnchart}Page({/***页面的初始数据*/data:{ec:{onInit:initChart}},/***用户点击右上角分享*/onShareAppMessage:function(){return{title:'在微信中使用echarts',path:'pages/echarts/echarts',success:function(res){},fail:function(){}}}})

6.echarts.wxss

/*pages/echarts/echarts.wxss*/.content-echarts{position:absolute;top:25%;left:0;right:0;bottom:0;display:flex;flex-direction:column;box-sizing:border-box;}ec-canvas{width:100%;height:600rpx;background:#fff;}

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎