一、导入echarts包
通过访问在微信小程序中使用 Apache ECharts (incubating)下载最新的echarts包到微信小程序中
二、初始化
1、创建页面index
,该页面包含index.wxml
,index.wxss
,index.js
,index.json
四个文件
2、在index.json
引入,如下示例
{
"usingComponents": {
"ec-canvas":"../../common/ec-canvas/ec-canvas"
},
"navigationStyle": "custom",
"enablePullDownRefresh": false
}
3、在index.js
初始化,option
里面写上自己的配置,具体配置可前往echarts官网查看栗子
import * as echarts from '../../common/ec-canvas/echarts'
function initChart(canvas, width, height, dpr) {
const chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr // 像素
});
canvas.setChart(chart);
var option = {
...
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart
}
}
});
4、在index.wxml
使用
<view class="box">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>
</view>
5、经过上述步骤,会发现echarts没有在页面显示出来,这个时候需要对echarts外面的盒子加上宽高
在index.wxss
中写入
.box {
display: block;
width: 100%;
height: 468rpx;
}
三、动态加载数据(参考)
index.js
文件:
import * as echarts from '../../common/ec-canvas/echarts'
let chart =null
let xData = []
let yData = []
function initChart(canvas, width, height,dpr) {
chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chart);
var option = {
color:'#D3E5FF',
tooltip : {
trigger: 'item'
},
grid: {
top: '20%',
left: '10%',
right: '10%',
containLabel: false
},
xAxis: [{
type: 'category',
data: xData,
axisLabel: {
formatter: function(value, index) {
return value+'月'
}
},
axisLine: {
lineStyle: {
type: 'solid' ,
color: '#979797' , //左边线的颜色
width: '0.5' //坐标线的宽度
},
},
axisTick: { show: false }
}
],
yAxis: {
type: 'value',
splitLine:{
show:false
},
axisTick: { show: false },
axisLabel:{ show :false}
},
dataZoom: [
{
type: 'inside',
show:'true',
start: 1,
end: 50,
zoomLock:true,
moveOnMouseMove:true,
zoomOnMouseWheel:true,
filterMode: 'none',
}
],
series: [{
data: yData,
type: 'bar',
barWidth: 20,
itemStyle:{
normal:{
label:{
formatter:"{c}",
show:true,
position:"top",
textStyle:{
color:'#000'
}
}
}
},
emphasis:{
itemStyle:{
color:'#1878FF'
}
}
}]
};
chart.setOption(option);
return chart;
}
Page({
data: {
ec: {
onInit: initChart,
}
},
onReady: function () {
this.fenchStatistics()
},
fenchStatistics(year){
let data={}
if(year){
data.year = year
}
fenchStatistics({...data}).then(res=>{
// console.log('积分对比===》',res.data);
xData = res.data.map(item=>{
return item.month
})
yData = res.data.map(item=>{
return item.score
})
this.setData({
isCharts:true
})
// console.log(xData,yData,'xdata','yData');
// 将接口返回的数据赋值到echarts中
chart.setOption({
xAxis: {
data: xData //全局变量
},
series: [{
data: yData //全局变量
}]
});
})
},
})