微信小程序Echarts封装 -- 柱状图封装
- 在自己的小程序里面创建一个分包
"subPackages": [
{
"root": "packages/report",
"pages": [
"pages/reportAnalyse/reportMain/index",
]
}
]
- 在该分包中建立一个components的文件夹,在文件夹中将官方的 ec-canvas 文件夹放在其中,官方提供的版本是2.0的版本的,小程序版本如果使用其他版本的可能在点击的时候会报错,所以只能退而且其次
- 然后继续在该文件夹中建立一个组件(echarts-bar) – 柱状图
{
"component": true,
"usingComponents": {
"ec-canvas": "../es-canvas/ec-canvas"
}
}
<ec-canvas style="width:630rpx;height:500rpx" id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>
import * as echarts from '../es-canvas/echarts';
Component({
properties: {
echartStyle: {
type: Object,
value: {
width: '630rpx',
height: '500rpx'
}
},
dataList: {
type: Array,
value: [],
},
yAxis: {
type: Object,
value: {
x: 'center',
type: 'value',
minInterval: 1,
splitLine: {
lineStyle: {
type: 'dashed'
}
},
nameTextStyle: {
fontSize: 10,
color: "#80858D"
},
axisLine: {
show: false,
lineStyle: {
color: "#80858D",
width: 0,
type: "solid"
}
},
axisTick: {
show: true
}
}
},
xAxis: {
type: Array,
value: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
},
legend: {
type: Array,
value: []
},
colorList: {
type: Array,
value: ['#5570CB', '#E36E6A'],
},
haveClick: {
type: Boolean,
value: false
}
},
data: {
ec: {
onInit: null
}
},
observers:{
'dataList':function(dataList){
if(this.chartBar) {
this.chartBar.setOption(this.createOptions());
return
}
this.setData({
ec: {
onInit: this.initChart.bind(this)
}
})
}
},
methods: {
initChart(canvas, width, height, dpr) {
chartBar = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
canvas.setChart(chartBar);
let option = this.createOptions()
this.chartBar = chartBar;
chartBar.setOption(option);
chartBar.off('click');
chartBar.getZr().on('click',(params)=>{
let pointInPixel = [params.offsetX, params.offsetY];
if(chartBar.containPixel('grid', pointInPixel)) {
let pointInGrid = chartBar.convertFromPixel({
seriesIndex: 0
}, pointInPixel);
let xIndex = pointInGrid[0];
let handleIndex = Number(xIndex);
let seriesObj = chartBar.getOption();
var op = chartBar.getOption();
var abscissa = op.xAxis[0].data[handleIndex];
console.log('op.xAxis', op.xAxis);
console.log('abscissa', abscissa);
console.log('handleIndex, seriesObj',handleIndex, seriesObj);
if(this.data.haveClick) {
this.triggerEvent('clickChange', handleIndex);
}
}
})
return chartBar;
},
createOptions(){
return {
disableTouch: true,
color: this.data.colorList,
legend: {
data: this.data.legend,
bottom: 0,
left: 'center',
icon: 'pin',
backgroundColor: '#fff',
z: 100,
show: this.data.legend.length > 0
},
dataZoom:[
{
show: this.data.xAxis.length > 4,
startValue: 0,
showDetail:false,
type: "slider",
start: 0,
zoomLock:true,
endValue: 3,
height: '10px',
}
],
grid: {
containLabel: true,
left: '3%',
top: '8%',
right: '4%',
bottom: this.data.legend.length == 0 ? '3%' : (this.data.xAxis.length > 4 ? '15%' : '10%'),
},
tooltip: {
show: true,
trigger: 'axis',
backgroundColor:'rgba(0,0,0,0.6)',
color: "#fff",
textStyle: {
color: "#fff"
},
},
xAxis: {
type: 'category',
axisTick:{
show: false
},
axisLine:{
show: true,
lineStyle: {
color: "#80858D",
width: 1,
type: "solid"
}
},
axisLabel:{
interval: 0,
showMinLabel: true,
showMaxLabel: true,
},
data: this.data.xAxis
},
yAxis: {
type: 'value'
},
series: this.data.dataList
}
}
}
})