小程序Echarts图表组件使用

1：下载 GitHub 上的 项目

https://github.com/ecomfe/echarts-for-weixin

2：但项目下载之后，打开小程序开发工具，可以看到效果如下，适配性还是比较完美的。

如果是在项目里面引入组件的话，打开从github上面下载的代码，将ec-canvas文件夹复制黏贴到你的项目里面。

图片.png

好的，组件已经复制到了我的项目里面，现在我想实现一个折线图，现在开始去组件里面搬运复制黏贴代码了。 wxml

<!--index.wxml-->  <view class="containergauge">     <ec-canvas id="mychart-dom-gauge" canvas-id="mychart-gauge" ec="{{ ec }}"></ec-canvas>  </view>

js

import * as echarts from '../../ec-canvas/echarts';
	
   
 

		
	
   
 

function initChart(canvas, width, height) {  const chart = echarts.init(canvas, null, {  width: width,  height: height  });  canvas.setChart(chart);  var option = {  backgroundColor: "#ffffff",  color: ["#37A2DA", "#32C5E9", "#67E0E3"],  series: [{  name: '',  type: 'gauge',  center: ['50%', '50%'],  radius: '80%',  min: 0, //最小刻度  max: 45, //最大刻度  splitNumber: 2, //刻度数量  startAngle: 210,  endAngle: -30,  axisLine: {  show: true,  lineStyle: {  width: 0,  opacity: 0,  color: [  [0.3, '#67e0e3'],  [0.7, '#37a2da'],  [1, '#fd666d']  ]  }  }, //仪表盘轴线  axisTick: {  show: true,  splitNumber: 20,  lineStyle: {  color: 'auto', //用颜色渐变函数不起作用  width: 2,  },  length: 12  }, //刻度样式  splitLine: {  show: false,  length: 10,  lineStyle: {  color: '#5c53de', //用颜色渐变函数不起作用  }  }, //分隔线样式  // axisLabel: {  //  show: false,  //  color: '#4d5bd1',  //  distance: 5,  //  formatter: function(v) {  //  switch (v + '') {  //  case '0':  //  return '0';  //  case '50':  //  return '20';  //  case '100':  //  return '40';  //  }  //  }  // }, //刻度标签。  detail: {  formatter: '{value}℃'  },  data: [{  value: 39.2,  name: '体温',  }]  }]  };  chart.setOption(option, true);  return chart;
}

Page({  /**
	
   
 

		
    
   
    
   * 页面的初始数据
	
   
 
  */  data: {  title: '疫情检测助手',  currentTab: 0,  items: [{  "iconPath": "/images/home.png",  "selectedIconPath": "/images/home_select.png",  "text": "首页"  },  {  "iconPath": "/images/mine.png",  "selectedIconPath": "/images/mine_select.png",  "text": "我的"  }  ],  ec: {  onInit: initChart  }  },  swichNav: function(e) {  let that = this;  // console.log(this.data.currentTab)  console.log(e.currentTarget.dataset.current)  if (this.data.currentTab === e.currentTarget.dataset.current) {  return false;  } else {  that.setData({  currentTab: e.currentTarget.dataset.current  })  }  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function(options) {  },  /**   * 生命周期函数--监听页面初次渲染完成   */  onReady: function() {  },  /**   * 生命周期函数--监听页面显示   */  onShow: function() {  },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function() {  },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function() {  },  /**   * 页面相关事件处理函数--监听用户下拉动作   */  onPullDownRefresh: function() {  },  /**   * 页面上拉触底事件的处理函数   */  onReachBottom: function() {  },  onShareAppMessage: function(res) {  return {  title: 'ECharts 可以在微信小程序中使用啦！',  path: '/pages/index/index',  success: function() {},  fail: function() {}  }  },
})
	
   
 

		
	
   
 

json

css

/**index.wxss**/
ec-canvas {  width: 100%;  height: 100%;
}

ec-canvas {  width: 100%;  height: 100%;
}

.container {  position: absolute;  top: 0;  bottom: 0;  left: 0;  right: 0;  display: flex;  flex-direction: column;  align-items: center;  justify-content: space-between;  box-sizing: border-box;
}

.picker-pos {  margin-top: -130rpx;  margin-left: 150rpx;  color: blueviolet;
}
	
    
  
 
  

这个时候 小程序Echarts图表组件算是已经可以运用在项目里面啦