jhwxapp/miniprogram/pages/components/bar-chart-warning/index.js

// components/bar-chart/index.js
import * as echarts from '../../../ec-canvas/echarts'

Component({
    /**
     * 组件的属性列表
     */
    properties: {
        chartId:{ 
            type: String
        },
        chartData:{
            type: Object
        }
    },
    observers: {
        chartData: function (val) {
            //console.log(val)
            //this.initChart() 
        },
    },
    /**
     * 组件的初始数据
     */
    data: {
        ec: {
            lazyLoad: true
        },
        chart:undefined,
    },
    lifetimes: {
        created: function(){
        //在组件实例刚刚被创建时执行，注意此时不能调用 setData
        },
        attached: function () {
            //在组件实例进入页面节点树时执行
           
        },
        ready: function () {
            // 在组件在视图层布局完成后执行
          
            this.initChart();
        },
        detached: function () {
            // 在组件实例被从页面节点树移除时执行
        },
        
    },
    /**
     * 组件的方法列表
     */
    methods: {
        initChart(){
            var id ='#' +  this.data.chartId;
            this.component = this.selectComponent(id);
            this.component.init((canvas, width, height, dpr) => {
                let chart = echarts.init(canvas, null, {
                    width: width,
                    height: height,
                    devicePixelRatio: dpr
                })
                chart.clear();
                chart.setOption(this.getData());
                return chart;
            })
        },
        getData() {
            var data = this.data.chartData

            // var data ={
            //   unit : '变化量(mm)',
            //   Xdata:['2022-12-2', '2022-12-3', '2022-12-4', '2022-12-5', '2022-12-6', '2022-12-7', '2022-12-8'],
            //   Ydata:[2,0,0,0,0,0,0],
            //   warningMax :[10,10,10,10,10,10,10],
            //   warningMin :[-10,-10,-10,-10,-10,-10,-10],
            //   policeMax : [20,20,20,20,20,20,20],
            //   policeMin : [-20,-20,-20,-20,-20,-20,-20],
            // }
            
            var unit=''
            if(data.unit){
              unit='单位：'+data.unit
            }
        
            var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      lineStyle: {
                          color: '#57617B'
                      }
                  },
                  formatter: function (params) {
                    var dom =  params[0].axisValue+'\n'+ params[4].seriesName+'：'+params[4].data+' '+data.unit+'\n'+params[2].seriesName+'：'+params[2].data+' '+data.unit+'/'+params[3].data+' '+data.unit+'\n'+params[0].seriesName+'：'+params[0].data+' '+data.unit+'/'+params[1].data+' '+data.unit
                    return dom
                  }
                  // formatter: function (params) {
                  //     var dom = '<div style="padding:3px 5px;">' +
                  //         '<div>'+params[0].axisValue+'</div>'+
                  //         '<div>'+params[4].seriesName+'：'+params[4].data+'° </div>'+
                  //         '<div>'+params[2].seriesName+'：'+params[2].data+'/'+params[3].data+'° </div>'+
                  //         '<div>'+params[0].seriesName+'：'+params[0].data+'/'+params[1].data+'° </div>'+
                  //         '</div>'
                  //     return dom
                  // }
              },
              color:['#ff0000','#fb9300','#2e6ed0'],
      
              grid: {
                top:'15%',
                left: '3%',
                right: '5%',
                bottom: '3%',
                containLabel: true
            },
              xAxis: [{
                type: 'category',
                boundaryGap: true,
                axisLine: {
                    lineStyle: {
                        color: '#252b41',
                        type: 'dashed',
                    }
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 10,
                        color:'#879be2 '
                    },
                    rotate:40,
                },
                axisTick: {
                    show: false
                },
                  data: data.Xdata
              }],
              yAxis: [{
                name: unit,
                nameTextStyle: {		//Y轴那么的样式
                  color: '#89a4eb',   
                  fontSize: 10,
                },
                type: 'value',
                // max:30,
                // min:-30,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#252b41'
                    }
                },
                axisLabel: {
                    textStyle: {
                        fontSize: 10,
                        color:'#008fe8'
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: '#252b41',
                        type: 'dashed',
                    }
                }
              }],
              series: [{
                  name: '报警',
                  type: 'line',
                  //smooth: true,
                  symbol: 'circle',
                  symbolSize: 0,
                  showSymbol: false,
                  lineStyle: {
                      normal: {
                          color: '#ff0000',
                          width:1,
                          type: 'dashed',
                      }
                  },
                  data: data.policeMax
              }, {
                  name: '报警',
                  type: 'line',
                 // smooth: true,
                  symbol: 'circle',
                  symbolSize: 0,
                  showSymbol: false,
      
                  lineStyle: {
                      normal: {
                          color: '#ff0000',
                          width:1,
                          type: 'dashed',
                      }
                  },
      
                  data: data.policeMin
              },{
                  name: '预警',
                  type: 'line',
                 // smooth: true,
                  symbol: 'circle',
                  symbolSize: 0,
                  showSymbol: false,
                  lineStyle: {
                      normal: {
                          color: '#fb9300',
                          width:1,
                          type: 'dashed',
                      }
                  },
                  data: data.warningMax
              },{
                  name: '预警',
                  type: 'line',
                 // smooth: true,
                  symbol: 'circle',
                  symbolSize: 0,
                  showSymbol: false,
                  lineStyle: {
                      normal: {
                          color: '#fb9300',
                          width:1,
                          type: 'dashed',
                      }
                  },
                  data: data.warningMin
              }, {
                  name: '测量',
                  type: 'line',
                  //smooth: true,
                  symbol: 'roundRect',
                  symbolSize:5,
                  //showSymbol: false,
                  lineStyle: {
                      normal: {
                          color: '#2e6ed0',
                          width:1,
                      },
      
                  },
                  data: data.Ydata
                  }
              ]
          };
            
            return option;
        }
    }
})