微信小程序Echarts封装 -- 柱状图封装

• 先下载官方的示例项目:echarts-for-weixin

1. 在自己的小程序里面创建一个分包

// 在app.json里面
"subPackages": [
  {
      "root": "packages/report",
      "pages": [
          "pages/reportAnalyse/reportMain/index",
      ]
  }
]

2. 在该分包中建立一个components的文件夹,在文件夹中将官方的 ec-canvas 文件夹放在其中，官方提供的版本是2.0的版本的，小程序版本如果使用其他版本的可能在点击的时候会报错，所以只能退而且其次
3. 然后继续在该文件夹中建立一个组件(echarts-bar) – 柱状图

// index.json
{
  "component": true,
  "usingComponents": {
      "ec-canvas": "../es-canvas/ec-canvas"
  }
}

// index.wxml
/**
 * force-use-old-canvas="true" 是否使用新的 Canvas 2d
 * 不配置默认使用最新的
 * 电脑上调试阶段配置上这个，不会出现滑动页面，图标不会随着页面的滑动而滑动的bug
 * 真机调试的时候，可以去掉这个配置
 */ 
<ec-canvas style="width:630rpx;height:500rpx" id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ec }}"></ec-canvas>

// 引入echarts
import * as echarts from '../es-canvas/echarts';
Component({
/**
 * 组件的属性列表
 */
properties: {
  echartStyle: { // 图表的宽高
    type: Object,
    value: {
      width: '630rpx',
      height: '500rpx'
    }
  },
  dataList: { // 图表的数据
    type: Array,
    value: [],
  },
  yAxis: { // y轴
    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 // new
    });

    canvas.setChart(chartBar);

    let option = this.createOptions()
    this.chartBar = chartBar;
    // chart.setOption(option);

    chartBar.setOption(option);
    // 给图表添加点击事件
    chartBar.off('click'); // 防止触发两次点击事件
    // 使用getZr获取点击事件
    chartBar.getZr().on('click',(params)=>{
      let pointInPixel = [params.offsetX, params.offsetY];
      // 判断在图标中是否含有这个坐标值
      if(chartBar.containPixel('grid', pointInPixel)) {
        let pointInGrid = chartBar.convertFromPixel({
          // finder 用于指示『使用哪个坐标系进行转换』
          // pointInPixel 要被转换的值，为像素坐标值，以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。
          // pointInGrid 转换的结果，为逻辑坐标值。
            seriesIndex: 0
        }, pointInPixel);
        /**
         *  pointInGrid[0] 获取的是点击的X轴的索引
         *  pointInGrid[1] 获取的是点击的Y轴的索引
         *  因为我们是横向的柱状图，所以我们需要获取X轴的索引
         */ 
        let xIndex = pointInGrid[0]; //获得点击的索引
        let handleIndex = Number(xIndex);
        let seriesObj = chartBar.getOption(); //图表object对象
        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
      },
      // this.data.xAxis.length > 4 ? legend.top = 0 : length.bottom = 0,
      dataZoom:[
        // 滑动条
        {
          // yAxisIndex: 1, //这里是从X轴的0刻度开始
          show: this.data.xAxis.length > 4, //是否显示滑动条，不影响使用
          startValue: 0,
          showDetail:false,
          type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
          start: 0, // 从头开始
          zoomLock:true,
          endValue: 3, // 一次性展示4个
          height: '10px',
          // width: "100%"
        }
      ],

      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:{
          // x轴线的颜色以及宽度
          show: true,
          lineStyle: {
            color: "#80858D",
            width: 1,
            type: "solid"
          }
        },
        axisLabel:{
          interval: 0,
          showMinLabel: true,  //是否显示最小 tick 的 label
          showMaxLabel: true,  //是否显示最大 tick 的 label
        },
        data: this.data.xAxis
      },

      yAxis: {
        type: 'value'
      },

      series: this.data.dataList
    }
  }
}
})