wxml
<view class="container">
<ec-canvas id="myechart" canvas-id="graph" ec="{{ ec }}"></ec-canvas>
</view>
wxss
.container{width:702rpx;height: 360rpx;position: relative;left:24rpx}
ec-canvas{width: 100%;height: 100%;position: relative;z-index: 1;}
js
import * as echarts from '../../ec-canvas/echarts';
Page({
onLoad: function (options) {
let _this = this
this.echartsComponnet = this.selectComponent('#myechart');
this.getChartData()
},
// 获取数据
getOption1: function () {
var _this = this
var option = {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff"
}
},
},
calculable: true,
xAxis: [{
type: "category",
splitLine: {
show: false
},
axisLabel: {
show: true,
fontSize: 14,
textStyle: {
color: '#333333'
}
},
axisLine: {
show: false,
onZero: false
},
axisTick: {
show: false,
},
data: _this.data.xData,
}],
yAxis: [{
splitNumber: 3,//控制x,y轴对应的展示几个字段
type: "value",
splitLine: {
show: false
},
axisLabel: {
show: true,
fontSize: 14,
textStyle: {
color: '#333333'
}
},
axisLine: {
show: false,
onZero: false
},
axisTick: {
show: false,
},
}],
dataZoom: [{
show: true,
backgroundColor:"#D8D8D8", //组件的背景颜色
height: 6,
xAxisIndex: [0],
bottom: 30,
"start": 10,
"end": 40,
// 拖拽手柄样式 svg 路径
handleIcon: 'M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z',
handleColor: '#fff',
handleSize: 16,
handleStyle: {
borderColor: '#D8D8D8',
// shadowBlur: 4,
// shadowOffsetX: 1,
// shadowOffsetY: 1,
// shadowColor: '#e5e5e5'
},
textStyle: {
color: "#333333",
},
fillerColor: "#5260FF",
borderColor: "#D8D8D8",
}, {
type: "inside",
show: true,
height: 15,
start: 1,
end: 35
}],
series: [{
type: "line",
symbolSize: 4,
symbol: 'circle',
symbol: 'none',
smooth: true, //曲线平滑
itemStyle: {
normal: {
color: "#6236FF",
borderColor: "#6236FF",
borderWidth:6,
lineStyle: { //线的颜色
color: '#6236FF',
width:4
},
},
},
data: _this.data.dataCur,
}]
}
return option
},
// 页面一加载获取图表数据
getChartData: function () {
var that = this
console.log(that.data.date01, that.data.date02)
let xDataList = function () {
var data = [];
for (var i = 1; i < 31; i++) {
data.push(i + "日");
}
return data;
}();
let dataCurList = [1,2,3,4,5,6,7,8,9,10,1,12,1,3,14,5,6,7,8,16,15,8,9,10,1,12,1,3,14,5]
this.setData({
dataCur:dataCurList,
xData:xDataList,
})
setTimeout(()=>{
that.init_echarts()
},1000)
},
//初始化图表
init_echarts: function () {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
const Chart = echarts.init(canvas, null, {
width: width,
height: height
});
Chart.setOption(this.getOption1());
Chart.on('datazoom',function(params){
console.log(params);//里面存有代表滑动条的起始的数字
let xAxis=Chart.getModel().option.xAxis[0];//获取axis
console.log(xAxis.data);//axis的标号数据
console.log(xAxis.rangeStart);//滑动条左端对应在xAxis.data的索引
console.log(xAxis.rangeEnd);//滑动条右端对应在xAxis.data的索引
})
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return Chart;
});
},
data: {
xData:[],//图表x轴数据的默认值
dataCur:[],//图表数据的默认值
ec: {
lazyLoad: true //初始化加载
},
}
})