微信现在是太多人使用了，应用这东西也非常的多，也包含小程序了，小程序发展到现在已经是非常好了。我很久都没写小程序的教程了，现在就开始今天的教程吧。
预览官方git网站。你可以微信扫一扫扫下面的二维码，进行查看：
下载下载地址：官方git网站。请按照下图可以进行下载，也可以通过git。手册：
引入项目中第一步：拷贝文件，将echarts-for-weixin-master项目里面的ec-canvas文件夹拷贝到项目目录中，
第三步：在需要显示页面配置文件中配置组件及引入。
.json配置组件{"usingComponents":{"ec-canvas":"../../ec-canvas/ec-canvas"}}.wxml使用组件!--index.wxml--viewclass="box"ec-canvasid="mychart-dom-bar"canvas-id="mychart-bar"ec="{{ec}}"/ec-canvas/view.wcss必须得样式.box{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;}.js脚本//1、引入依赖脚本import*asechartsfrom'../../ec-canvas/echarts';letchart=null;//2、进行初始化数据functioninitChart(canvas,width,height){chart=echarts.init(canvas,null,{width:width,height:height});canvas.setChart(chart);varoption={color:['#37a2da','#32c5e9','#67e0e3'],tooltip:{trigger:'axis',axisPointer:{//坐标轴指示器，坐标轴触发有效type:'shadow'//默认为直线，可选为：'line'|'shadow'}},legend:{data:['热度','正面','负面']},grid:{left:20,right:20,bottom:15,top:40,containLabel:true},xAxis:[{type:'value',axisLine:{lineStyle:{color:'#999'}},axisLabel:{color:'#666'}}],yAxis:[{type:'category',axisTick:{show:false},data:['汽车之家','今日头条','百度贴吧','一点资讯','微信','微博','知乎'],axisLine:{lineStyle:{color:'#999'}},axisLabel:{color:'#666'}}],series:[{name:'热度',type:'bar',label:{normal:{show:true,position:'inside'}},data:[300,270,340,344,300,320,310],itemStyle:{//emphasis:{//color:'#37a2da'//}}},{name:'正面',type:'bar',stack:'总量',label:{normal:{show:true}},data:[120,102,141,174,190,250,220],itemStyle:{//emphasis:{//color:'#32c5e9'//}}},{name:'负面',type:'bar',stack:'总量',label:{normal:{show:true,position:'left'}},data:[-20,-32,-21,-34,-90,-130,-110],itemStyle:{//emphasis:{//color:'#67e0e3'//}}}]};chart.setOption(option);returnchart;}Page({onShareAppMessage:function(res){return{title:'ECharts',path:'/pages/index/index',success:function(){},fail:function(){}}},data:{ec:{onInit:initChart//3、将数据放入到里面}},onReady(){setTimeout(function(){//获取chart实例的方式console.log(chart)},2000);}});
