1、下载echarts
微信版,地址:https://github.com/ecomfe/echarts-for-weixin
2、将下载好的文件ec-canvas
目录放在小程序项目根目录中即可
3、在页面使用echarts的话,需要在index.json
中添加以下配置(以下为整个json配置):
效果截图:
{
"navigationBarTitleText": "echarts",
"disableSwipeBack": true,
"usingComponents": {
"ec-canvas": "../../ec-canvas/ec-canvas"
}
}
4、页面js中需要引入echarts,即const echarts = require('../../ec-canvas/echarts.js')
;
5、通过github下载的echarts包含类型比较多,上传代码进行发布时,提示echarts文件过大,可以忽略。
wxml代码:
<view class="container">
<view class="chronic-data-chart">
<text class="data-chart-title">图一</text>
<view class="data-chart-panel">
<ec-canvas ec="{{fastingBloodSugarEcharts}}"></ec-canvas>
</view>
</view>
<view class="chronic-data-chart">
<text class="data-chart-title">图二</text>
<view class="data-chart-panel">
<ec-canvas ec="{{afterMealBloodSugarEcharts}}"></ec-canvas>
</view>
</view>
</view>
wxss代码:
.chronic-data-chart{
background-color: rgba(255, 255, 255, 1);
margin: 20rpx 0rpx 10rpx 0rpx;
padding: 20rpx;
}
.data-chart-title{
font-weight: bold;
padding: 0rpx 0rpx 20rpx 0rpx;
display: block;
}
.data-chart-panel{
width: 100%;
height: 450rpx;
}
js代码:
const App = getApp();
const echarts = require('../../ec-canvas/echarts.js');
let fbsEcharts, ambsEcharts = null;
Page({
/**
* 页面的初始数据
*/
data: {
// 图一
fastingBloodSugarEcharts: {
onInit: function (canvas, width, height) {
fbsEcharts = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(fbsEcharts);
return fbsEcharts;
}
},
// 图二
afterMealBloodSugarEcharts: {
onInit: function (canvas, width, height) {
ambsEcharts = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(ambsEcharts);
return ambsEcharts;
}
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let that = this;
setTimeout(() => {
that.echartsData();
}, 3000);
},
/**
* 图标初始化
*/
echartsData: function(){
let that = this;
let xData1 = [1, 2, 3, 4, 5, 6, 7];
let yData1 = [2.2, 3.5, 5.1, 4.2, 3.5, 5, 4.8];
let yData2 = [2.5, 5.1, 3.5, 3.5, 4.2, 4.8, 5];
that.getSugarOption(fbsEcharts, xData1, yData1, 3.5);
that.getSugarOption(ambsEcharts, xData1, yData2, 3.5);
},
/**
* echarts图表
*/
getSugarOption: function (echarts, xData, yData, standardData) {
echarts.setOption({
tooltip: {
trigger: 'axis',
backgroundColor: '#009ee7',
position: function (pos, params, dom, rect, size) {
var obj = { top: 60 };
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
return obj;
},
formatter: '{c}mmol/L' + '\n' + '{b}'
},
grid: {
top: '20',
bottom: '20',
left: '10',
right: '30'
},
xAxis: {
type: 'category',
show: false,
boundaryGap: false,
data: xData
},
yAxis: {
type: 'value',
position: 'right',
axisLine: {
show: false
},
axisTick: {
show: false
},
splitLine: {
lineStyle: {
type: 'dashed'
}
},
axisLabel: {
fontSize: '14',
color: '#9e9e9e',
rich: {}
}
},
series: [
{
type: 'line',
symbol: 'circle',
symbolSize: 8,
lineStyle: {
color: '#63c3f5'
},
itemStyle: {
color: '#019de8'
},
data: yData
}
]
});
},
})