最近做小程式的業務中遇到一個頁面要同時顯示幾個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-canvasid="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){
varoption={
backgroundColor:"#ffffff",
series:[{
type:'pie',
label:{
normal:{
position:'inner'
}
},
center:['50%','50%'],
radius:['80%','70%'],
data:chartData
}]
}
returnoption
},

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

html :

<!--疊加柱狀圖-->
  <ec-canvasid="stat"canvas-id="stat"force-use-old-canvas="true"ec="{{stat}}"></ec-canvas>
  <!--或者-->
  <ec-canvasid="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-canvasid="station"canvas-id="station"force-use-old-canvas="true"ec="{{station}}"></ec-canvas>
  <!--或者-->
  <ec-canvasid="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-canvasid="warn"canvas-id="warn"force-use-old-canvas="true"ec="{{warn}}"></ec-canvas>
  <!--或者-->
 <ec-canvasid="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)
    }

本文來自部落格園，作者：_小狐狸，轉載請註明原文連結：https://www.cnblogs.com/zwh520/p/15122562.html