小程序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

ec-canvas {
  width: 100%;
  height: 480rpx;
}
.containergauge {
  position: absolute;
  top: 250rpx;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}