小程序中多個echarts折線圖在同一個頁面的使用

最近做小程序的業務中遇到一個頁面要同時顯示幾個echarts圖，剛開始遇到各種沖突，死數據可以，動態數據就報錯的問題，折磨了一天，仔細看了官網和查在各種資料之后，終於解決了。

直接上代碼：

commin.js /***
 * echartName ： echarts的別名
 * func ：渲染函數的函數名
 * ***/
function wxCharts(echartName,fun) {
  this.chart1 = echartName; //去獲取echarts    這里的id就是echarts的id
  this.chart1.init((canvas, width, height, dpr) => {
    // 初始化圖表 
    let barChart = echarts.init(canvas, null, { //echarts會繼承父元素的寬高
      width: width,
      height: height,
      devicePixelRatio: dpr // 像素
    });
    barChart.setOption(fun);
    return barChart; //一定要return出去
  });
}
module.exports.wxCharts = wxCharts;

 

 

html : <!--圓環 -->
  <ec-canvas id="tendency" canvas-id="tendency" force-use-old-canvas="true" ec="{{ tendency }}" ></ec-canvas>
  <!--或者：-->
  <ec-canvas id="tendency" canvas-id="tendency"  ec="{{ tendency }}" ></ec-canvas>

js:

data:{
        //圓環
         tendency: {
            disableTouch: true,
            lazyLoad: true
        }

    },
    //圓
    tendencyInit:function (chartData) {
        this.chart = this.selectComponent('#tendency'); //去獲取echarts    這里的id就是echarts的id
        commin.wxCharts(this.chart,this.tendencyvray(chartData))
    },
    // 這里換成 所需折現圖的配置就可以了
    tendencyvray: function (chartData) {
        var option = {
            backgroundColor: "#ffffff",
                series: [{
                  type: 'pie',
                  label: {
                    normal: {
                        position: 'inner'
                    }
                  },
                  center: ['50%', '50%'],
                  radius: ['80%', '70%'],
                  data: chartData
                }]
          }
        return option
    },

    //這里是折現圖的數據就可以了
    tendencyInitData:function () {
        let chartData = [
            {
              value:20,
              itemStyle: { color: '#FFD234' } 
            },
            {
              value:40,
              itemStyle: { color: '#FF8340' } 
            },
            {
              value: 40,
              itemStyle: { color: '#3AD868' }
            }
          ]
        this.tendencyInit(chartData)
    },

 

html :

<!--疊加柱狀圖-->
  <ec-canvas id="stat" canvas-id="stat" force-use-old-canvas="true" ec="{{ stat }}" ></ec-canvas>
  <!--或者-->
  <ec-canvas id="stat" canvas-id="stat"  ec="{{ stat }}" ></ec-canvas>

js:

 data:{
        //疊加柱狀圖    
        stat:{
            disableTouch: true,
            lazyLoad: true
        }
　　},
 //疊加柱狀圖   --- chart圖
    chargeYears:function (chartData) {
        this.chart = this.selectComponent('#stat'); //去獲取echarts    這里的id就是echarts的id
        commin.wxCharts(this.chart,this.chargevrayYears(chartData))
    },
    chargevrayYears:function (chartData) {
    let option = {
        legend: {
            data: ['完成工單', '轉派工單','超時工單']
        },
        tooltip:{
            axisPointer:{
                type:"shadow"
            },
            trigger:"axis"
        },
        label:{
            position:"insideRight",
            show:true
        },
        grid:{
            top:'40',
            bottom:"20%",
            containLabel:true,
            left:"3%",
            right:"4%"
        },
        xAxis:{
            data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
            type:"category"
        },
        yAxis:{
            type:"value"
        },
        series: chartData.seriesData
        }
        return option
    },
    chargeInitYears() {
        var dataArr = [
            {
              data:[10,20,30,13,34,56,24,78,56,37,56,15],
              label:{
                "position":"insideRight",
              },
              name:"完成工單",
              stack:"總量",
              type:"bar",
              color:"#4CC340",
            },
            {
              data:[10,20,30,13,34,56,24,78,56,37,56,15],
              label:{
                "position":"insideRight",
              },
              name:"轉派工單",
              stack:"總量",
              type:"bar",
              color:"#FAAA42"
            },
            {
              data:[10,20,30,13,34,56,24,78,56,37,56,15],
              label:{
                "position":"insideRight",
              },
              name:"超時工單",
              stack:"總量",
              type:"bar",
              color:"#FA734B"
            },
          ]
          for (var i = 0; i < dataArr.length; i++) {
            var dic = dataArr[i];
            dic['type'] = 'bar';
            dic['itemStyle'] = {
              normal: {
                label: {
                  show: true, //開啟顯示
                  position: 'inside', //在上方顯示
                  distance: i == 0 ? 5 : 10,
                  formatter: function (val) {
                    if (val.value !== 0) {
                      return val.value;
                    } else {
                      return '';
                    }
                  },
                  textStyle: { //數值樣式
                    fontSize: 10,
                    color: '#fff'
                  }
                },
              }
            }
          }
          var chartData = {
            seriesData: dataArr
          };
          this.chargeYears(chartData)
    },

 

html :

  <!--柱狀圖-->
  <ec-canvas id="station" canvas-id="station" force-use-old-canvas="true" ec="{{ station }}" ></ec-canvas>
  <!--或者-->
  <ec-canvas id="station" canvas-id="station"  ec="{{ station }}" ></ec-canvas>

JS :  
data:{
      //柱狀圖
      station:{
          disableTouch: true,
          lazyLoad: true
      },
　},
//柱狀圖 --- chart圖
    station: function (chartData) {
        this.chart = this.selectComponent('#station'); //去獲取echarts    這里的id就是echarts的id
        commin.wxCharts(this.chart,this.stationvray(chartData))
    },
    stationvray: function (chartData) {
        var option = {
            color:'#4CC340',
            type: 'bar',
            label: {
            normal: {
                show: true,
                position: 'top'
            }
            },
            grid: {
                top:'0',
                left: '3%',
                right: '4%',
                bottom: '20%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'value',
            },
            yAxis: {
                type: 'category',
                data: ['小谷圍站場','羅沖圍站場','西北山站場','羅小黑站場','西北山站場'],
            },
            series: chartData.seriesData
        }
        return option
    },
    stationInitChart(){
        var chartData = {
            seriesData: [{
            type:'bar',
            label: {
                show: true, //開啟顯示
                position: 'inside', //在上方顯示
                color:"#fff"
            },
            data: [14,28,38,24,32],
            },
        ]
        };
        this.station(chartData)
    }

 

 

 index.html <!--圓-->
  <ec-canvas id="warn" canvas-id="warn" force-use-old-canvas="true" ec="{{ warn }}" ></ec-canvas>
  <!--或者-->
  <ec-canvas id="warn" canvas-id="warn" ec="{{ warn }}" ></ec-canvas>

Js :
data:{
        //圓
        warn:{
            disableTouch: true,
            lazyLoad: true
        }
},
 // 圓
    warnInit:function (chartData) {
        this.chart = this.selectComponent('#warn'); //去獲取echarts    這里的id就是echarts的id
        commin.wxCharts(this.chart,this.warnvray(chartData))
    },
    warnvray: function (chartData) {
        var option = {
            backgroundColor: "#ffffff",
            series: [{
              label: {
                formatter: '{b} \n\n  {d}%',
              },
              type: 'pie',
              center: ['50%', '40%'],
              radius: ['15%', '50%'],
              data: chartData
            }]
        }
        return option
    },
    warnInitChart:function () {
        let chartData = [
            {
              value:20,
              name:"嚴重告警",
              itemStyle: { color: '#fa393a' } 
            },
            {
              value:10,
              name:"一級告警",
              itemStyle: { color: '#FA6437' } 
            },
            {
              value: 30,
              name:"二級告警",
              itemStyle: { color: '#F79431' }
            },
            {
              value: 30,
              name:"三級告警",
              itemStyle: { color: '#F0C61F' }
            },
            {
              value: 10,
              name:"提示告警",
              itemStyle: { color: '#2997E6' }
            }
          ]
        this.warnInit(chartData)
    }