一、页面
<view class="chartBox" style="width: 100%;height:300px">
<ec-canvas id="efficiencyChart" canvas-id="graph" ec="{{ ec }}" ></ec-canvas>
</view>
二、JS
1、引用echarts 插件
import * as echarts from '../../ec-canvas/echarts.js';
2、data:{
ec:{ lazyLoad:false , // 延迟加载}
}
3、 onLoad: function (options) {
// 声明图表
this.scaComponnet = this.selectComponent('#efficiencyChart');
// 调用图表
this.initChart();
},
4、写方法
// 图表初始化
initChart:function(){
this.scaComponnet.init((canvas, width, height)=>{
console.log(width,'widt')
console.log(height,'height')
// 初始化图表
const history_chart = echarts.init(canvas, null, {
width: width,
height: height
});
history_chart.setOption(this.efficiencyChart_option());
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return history_chart;
})
},
// 图表 option
efficiencyChart_option:function(){
return{
xAxis: {
type: 'category',
data: ['TVOC(ppb)','PM(mg/m3)','CO(mg/m3)','PRESSURE(mbar)','O3(mg/m3)','CO2(mg/m3)',],
// 设置坐标轴字体颜色和宽度
axisLine: { //这是x轴文字颜色
lineStyle: {
color: "rgba(255,255,255,.7)",
}
},
axisLabel:{
rotate:40,
textStyle:{
fontSize:'10'
}
}
},
yAxis: {
type: 'value',
//网格样式
splitLine: {
show: true,
lineStyle:{
color: ['#515761'],
width: 1,
type: 'solid'
}
},
// 设置坐标轴字体颜色和宽度
axisLine: { // 这是y轴文字颜色
lineStyle: {
color: "rgba(255,255,255,.7)",
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110],
type: 'bar',
itemStyle:{
color:'#3E8EF6'
}
}]
}
},
