jhwxapp/miniprogram/pages/components/bar-chart/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)',
            //   legend:['X轴', 'Y轴'],
            //   color:['#2e6ed0','#fb9300'],
            //   Xdata :['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30'],
            //   Ydata:[[2,1,0,0,0,0,0],[-10,10,5,-5,-3,-1,10]]
            // }

            var unit=''
            if(data.unit){
              unit='单位：'+data.unit
            }
            
            var series = []
            for(var i = 0;i<data.Ydata.length ;i++){
              series.push({
                  name: data.legend[i],
                  type: 'line',
                  //smooth: true,
                  symbol: 'roundRect',
                  symbolSize:5,
                  //showSymbol: false,
                  lineStyle: {
                      normal: {
                          color: data.color[i],
                          width:1,
                          type: 'dashed',
                      },
  
                  },
                  data: data.Ydata[i]
              })
            }

            var option = {
              tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                      lineStyle: {
                          color: '#57617B'
                      }
                  },
                  formatter: function (params) {
                    var dom =  params[0].axisValue+'\n'+params[0].seriesName+'：'+params[0].data+' '+data.unit+'\n'+params[1].seriesName+'：'+params[1].data+' '+data.unit
                    return dom
                  }

                //   formatter: function (params) {
                //     var dom = '<div style="padding:3px 5px;">' +
                //         '<div>'+params[0].axisValue+'</div>'+
                //         '<div>'+params[0].seriesName+'：'+params[0].data+'° </div>'+
                //         '<div>'+params[1].seriesName+'：'+params[1].data+'° </div>'+
                //         '</div>'
                //     return dom
                // }

              },
              color:['#2e6ed0','#fb9300'],
              legend: {
                  icon: 'rect',
                  itemWidth: 10,
                  itemHeight: 8,
                  itemGap: 10,
                  data: data.legend,
                  right: '4%',
                  textStyle: {
                      fontSize: 12,
                      color: '#8ba3eb'
                  },
      
              },
              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:series
          };
            
            return option;
        }
    }
})