11

pages/index/index.js

@@ -5,7 +5,7 @@ import {path} from '../../utils/circle';
 const app = getApp()
 Page({
   data: {
-    showRight:false,
+    showRight:1,
     transportStatusData:{},
     transportBusinessData:{},
     transportBusinessNum:1,
@@ -148,6 +148,11 @@ Page({
       showRight:true,
     })
   },
+  gopage1(){
+    this.setData({
+      showRight:false,
+    })
+  },
   onReady: function () {
     var that = this;
     // that.canvasRingA = that.selectComponent("#canvasRingA");

pages/index/index.wxml

@@ -42,7 +42,7 @@
       </view>
     </view>
   </view>
-  <index-right wx:if="{{showRight}}"></index-right>
+  <index-right wx:if="{{showRight}}" bind:goPage1="gopage1"></index-right>
   <view wx:if="{{!showRight}}">
     <view wx:if="{{status.statusLabelType}}" class="product_one">
       <view class="product_All">

pages/index/index.wxss

@@ -728,7 +728,6 @@
   height: 80%;
   width: 100%;
 }
-
 .product_All{
   width: 100%;
   background: #FFF;

pages/index/indexRight/indexRight.js

@@ -1,4 +1,9 @@
 const app = getApp();
 Component({
-
+  methods:{
+    goPage1(){
+      console.log(112)
+      this.triggerEvent('goPage1', {}, {})
+    },
+  }
 })

pages/index/indexRight/indexRight.json

@@ -1,3 +1,11 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "right-pie": "./rightPie/rightPie",
+    "right-bar2": "./rightBar2/index",
+    "right-line2": "./rightLine2/index",
+    "right-bar3": "./rightBar3/index",
+    "right-huan": "./rightHuan/index",
+    "right-line1": "./rightLine1/index",
+    "right-bar1": "./rightBar1/rightPie"
+  }
 }

pages/index/indexRight/indexRight.wxml

@@ -1,8 +1,45 @@
 <view class="index_right">
   <view class="product_All">
     <view class="product_name">
-      <view class="card_text">疫苗种类统计</view>
-      <view class="card_tab">实时追溯</view>
+      <view class="card_text">产品统计</view>
+      <view class="card_tab" bindtap="goPage1">实时追溯</view>
     </view>
+    <view class="cptj_con">
+      <view class="cptj_item">
+        <right-pie></right-pie>
+      </view>
+      <view class="cptj_item">
+        <right-bar1></right-bar1>
+      </view>
+    </view>
+    <view class="cptj_con">
+      <view class="cptj_item">
+        <right-bar2></right-bar2>
+      </view>
+    </view>
+  </view>
+  <view class="syqk_con">
+    <view class="syqk_item">
+      <view class="product_name">
+        <view class="card_text">疫苗使用情况</view>
+      </view>
+      <view class="syqk_item_chart">
+        <right-huan></right-huan>
+      </view>
+    </view>
+    <view class="syqk_item">
+      <view class="product_name">
+        <view class="card_text"> </view>
+      </view>
+      <view class="syqk_item_chart">
+        <right-line1></right-line1>
+      </view>
+    </view>
+  </view>
+  <view class="syqk_chart">
+    <right-bar3></right-bar3>
+  </view>
+  <view class="syqk_chart">
+    <right-line2></right-line2>
   </view>
 </view>

pages/index/indexRight/indexRight.wxss

@@ -9,11 +9,30 @@
   justify-content: space-between;
   padding: 35rpx 20rpx;
   align-content: center;
+  box-sizing: content-box;
+  height: 40rpx;
+}
+.card_text{
+  font-size: 30rpx;
+  line-height: 40rpx;
+  color: black;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 .product_name .card_tab{
   border-radius: 20rpx;
   color: #2D59E6;
   padding:0 16rpx;
   font-size: 26rpx;
+  line-height: 40rpx;
   border: 2rpx solid #2d59e6;
-}
+}
+.cptj_con{ display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #F0F0F0;}
+.cptj_item{ width: 100%; margin-top: 60rpx; height:450rpx; flex: auto; position: relative;border-left: 1px solid #F0F0F0;}
+.cptj_item:first-child{ border: none;}
+.syqk_con{ margin-top: 20rpx; display: flex; justify-content: space-between; align-items: stretch;}
+.syqk_item{ width: 100%; flex: auto; margin-left: 10rpx; background: #ffffff;}
+.syqk_item:first-child{ margin: 0;}
+.syqk_item_chart{ height: 400rpx; background: #ffffff; position: relative;}
+.syqk_chart{ height: 600rpx; background: #ffffff; position: relative; margin-top: 10rpx;}

pages/index/indexRight/rightBar1/rightPie.js

@@ -0,0 +1,108 @@
+const app = getApp();
+import * as echarts from '../../../../ec-canvas/echarts' // 这个是自己实际的目录
+Component({
+  data:{
+    Ec: { lazyLoad: true, },
+  },
+  lifetimes: {
+    attached: function () {
+      this.init()
+    },
+    moved: function () { },
+    detached: function () { },
+  },
+  methods:{
+    init(){
+      var that = this;
+      that.selectComponent('#chartConDom').init((canvas, width, height, dpr) => {
+        const chart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr
+        });
+        var option = that.getOrderWarnOption();
+        chart.setOption(option);
+        return chart;
+      });
+    },
+    getOrderWarnOption(){
+      var list = [
+        {name:"支",data:[{name:"北京",value:30,},{name:"上海",value:30,},{name:"杭州",value:20,},{name:"天津",value:30,}]},
+        {name:"包",data:[{name:"北京",value:50,},{name:"上海",value:30,},{name:"杭州",value:30,},{name:"天津",value:30,}]},
+        {name:"箱",data:[{name:"北京",value:50,},{name:"上海",value:30,},{name:"杭州",value:30,},{name:"天津",value:30,}]},
+        {name:"托盘",data:[{name:"北京",value:50,},{name:"上海",value:30,},{name:"杭州",value:30,},{name:"天津",value:30,}]},
+      ]
+      var fontSize = 10
+      var fontColor = "#999999"
+      return {
+        color:["#7A4AFF","#28E556","#2D59E6","#FFAE36","#EA1C43",],
+        title:{
+          text:"不同产品包装",
+          show:0,
+          textStyle:{
+            color:fontColor,
+            fontSize:fontSize,
+          },
+          left:'1%',
+          top:0,
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        legend:{
+          icon:"circle",
+          right:'10%',
+          top:0,
+          itemWidth:fontSize*0.8,
+          itemHeight:fontSize*0.8,
+          textStyle:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+          data:list.map(item=>item.name)
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          }
+        },
+        yAxis: {
+          type: 'value',
+          axisTick:{show:false,},
+          axisLabel:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+        },
+        xAxis: {
+          type: 'category',
+          axisTick:{show:false,},
+          axisLabel:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+          data: list[0].data.map(item=>item.name)
+        },
+			  series:this.setOptItem(list),
+      }
+    },
+    setOptItem(list){
+      var data = []
+      for(var i in list){
+        data.push({
+          type: 'bar',
+          silent:1,
+          barMaxWidth:this.fontSize*1.5,
+          name:list[i].name,
+          data:list[i].data
+        })
+      }
+      return data
+    },
+  },
+})

pages/index/indexRight/rightBar1/rightPie.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "ec-canvas": "../../../../ec-canvas/ec-canvas"
+  }
+}

pages/index/indexRight/rightBar1/rightPie.wxml

@@ -0,0 +1,3 @@
+<view class="chart_con">
+  <ec-canvas id="chartConDom" canvas-id="chartCon" ec="{{ Ec }}"></ec-canvas>
+</view>

pages/index/indexRight/rightBar1/rightPie.wxss

@@ -0,0 +1,2 @@
+
+.chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

pages/index/indexRight/rightBar2/index.js

@@ -0,0 +1,150 @@
+const app = getApp();
+import * as echarts from '../../../../ec-canvas/echarts' // 这个是自己实际的目录
+Component({
+  data:{
+    Ec: { lazyLoad: true, },
+  },
+  lifetimes: {
+    attached: function () {
+      this.init()
+    },
+    moved: function () { },
+    detached: function () { },
+  },
+  methods:{
+    init(){
+      var that = this;
+      that.selectComponent('#chartConDom').init((canvas, width, height, dpr) => {
+        const chart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr
+        });
+        var option = that.getOrderWarnOption();
+        chart.setOption(option);
+        return chart;
+      });
+    },
+    getOrderWarnOption(){
+      var list = [
+        {name:"已使用",data:[{name:"2022",value:35,},{name:"2021",value:30,},{name:"2020",value:20,},{name:"2019",value:30,}]},
+        {name:"未使用",data:[{name:"2022",value:50,},{name:"2021",value:30,},{name:"2020",value:30,},{name:"2019",value:30,}]},
+        {name:"不良率",data:[{name:"2022",value:10,},{name:"2021",value:5,},{name:"2020",value:10,},{name:"2019",value:10,}]},
+      ]
+      var fontSize = 10
+      var fontColor = "#999999"
+      return {
+        color:["#2D59E6","#7FD1FF","#E1291C","#2D59E6"],
+        title:{
+          text:"历年所有试剂的数据",
+          show:0,
+          textStyle:{
+            color:fontColor,
+            fontSize:fontSize,
+          },
+          left:'15%',
+          top:0,
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          }
+        },
+        legend:{
+          icon:"circle",
+          right:'auto',
+          top:0,
+          itemWidth:fontSize*0.8,
+          itemHeight:fontSize,
+          textStyle:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+          data:list.map(item=>item.name)
+        },
+        yAxis: [
+          {
+            type: 'value',
+            name:"",
+            splitNumber:5,
+            axisTick:{show:false,},
+            axisLabel:{
+              fontSize:fontSize,
+              color:fontColor,
+            },
+            nameTextStyle:{
+              fontSize:fontSize,
+              color:fontColor,
+            },
+            nameGap:5,
+          },
+          {
+            type: 'value',
+            position: 'right',
+            splitNumber:5,
+            boundaryGap:[0,1],
+            name:"%",
+            axisTick:{show:false,},
+            splitLine:{show:false,},
+            axisLabel:{
+              fontSize:fontSize,
+              color:fontColor,
+            },
+            nameTextStyle:{
+              fontSize:fontSize,
+              color:fontColor,
+            },
+            nameGap:5,
+          },
+        ],
+        xAxis: {
+          type: 'category',
+          // boundaryGap: false,
+          axisTick:{show:false,},
+          axisLabel:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+          data: list[0].data.map(item=>item.name)
+        },
+			  series:this.setOptItem(list),
+      }
+    },
+    setOptItem(list){
+      var data = []
+      var fontSize = 10
+      for(var i in list){
+        if(i==2){
+          data.push({
+            type: 'line',
+            name:"%",
+            silent:1,
+            yAxisIndex: 1,
+            barMaxWidth:fontSize*1.5,
+            name:list[i].name,
+            data:list[i].data
+          })
+        }else{
+          data.push({
+            type: 'bar',
+            stack: 'Total',
+            name:"千万",
+            silent:1,
+            barMaxWidth:fontSize*1.5,
+            name:list[i].name,
+            data:list[i].data
+          })
+        }
+      }
+      return data
+    },
+  },
+})

pages/index/indexRight/rightBar2/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "ec-canvas": "../../../../ec-canvas/ec-canvas"
+  }
+}

pages/index/indexRight/rightBar2/index.wxml

@@ -0,0 +1,3 @@
+<view class="chart_con">
+  <ec-canvas id="chartConDom" canvas-id="chartCon" ec="{{ Ec }}"></ec-canvas>
+</view>

pages/index/indexRight/rightBar2/index.wxss

@@ -0,0 +1,2 @@
+
+.chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

pages/index/indexRight/rightBar3/index.js

@@ -0,0 +1,89 @@
+const app = getApp();
+import * as echarts from '../../../../ec-canvas/echarts' // 这个是自己实际的目录
+Component({
+  data:{
+    Ec: { lazyLoad: true, },
+  },
+  lifetimes: {
+    attached: function () {
+      this.init()
+    },
+    moved: function () { },
+    detached: function () { },
+  },
+  methods:{
+    init(){
+      var that = this;
+      that.selectComponent('#chartConDom').init((canvas, width, height, dpr) => {
+        const chart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr
+        });
+        var option = that.getOrderWarnOption();
+        chart.setOption(option);
+        return chart;
+      });
+    },
+    getOrderWarnOption(){
+      var list = [{name:"生化诊断",value:50,},{name:"免疫诊断",value:30,},{name:"分子诊断",value:30,},{name:"血液检测",value:30,}]
+      var fontSize = 10
+      var fontColor = "#999999"
+      return {
+        color:["#333FFF","#FFAE36"],
+        title:{
+          text:"产品分类信息",
+          show:0,
+          textStyle:{
+            color:fontColor,
+            fontSize:fontSize,
+          },
+          left:'center',
+          top:0,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          }
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value',
+          axisTick:{show:false,},
+          axisLabel:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+        },
+        xAxis: {
+          type: 'category',
+          axisTick:{show:false,},
+          axisLabel:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+          axisLine:{
+            lineStyle:{
+              color:"#cccccc"
+            }
+          },
+          data: list.map(item=>item.name)
+        },
+			  series:[
+          {
+            type: 'bar',
+            barMaxWidth:fontSize*1.5,
+            data:list
+          },
+        ],
+      }
+    },
+  },
+})

pages/index/indexRight/rightBar3/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "ec-canvas": "../../../../ec-canvas/ec-canvas"
+  }
+}

pages/index/indexRight/rightBar3/index.wxml

@@ -0,0 +1,3 @@
+<view class="chart_con">
+  <ec-canvas id="chartConDom" canvas-id="chartCon" ec="{{ Ec }}"></ec-canvas>
+</view>

pages/index/indexRight/rightBar3/index.wxss

@@ -0,0 +1,2 @@
+
+.chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

pages/index/indexRight/rightHuan/index.js

@@ -0,0 +1,63 @@
+const app = getApp();
+import * as echarts from '../../../../ec-canvas/echarts' // 这个是自己实际的目录
+Component({
+  data:{
+    Ec: { lazyLoad: true, },
+  },
+  lifetimes: {
+    attached: function () {
+      this.init()
+    },
+    moved: function () { },
+    detached: function () { },
+  },
+  methods:{
+    init(){
+      var that = this;
+      that.selectComponent('#chartConDom').init((canvas, width, height, dpr) => {
+        const chart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr
+        });
+        var option = that.getOrderWarnOption();
+        chart.setOption(option);
+        return chart;
+      });
+    },
+    getOrderWarnOption(){
+      var list = [{name:"追溯产品",value:999,},{name:"非追溯产品",value:666,},]
+      var fontSize = 10
+      var fontColor = "#999999"
+      return {
+        color:["#7A4AFF","#FFAE36"],
+        legend:{
+          icon:"circle",
+          itemWidth:fontSize*0.8,
+          itemHeight:fontSize*0.8,
+          textStyle:{
+            fontSize:fontSize*0.9,
+            color:fontColor,
+          },
+          data:list.map(item=>item.name)
+        },
+			  series:[
+          {
+            type: 'pie',
+            silent:1,
+            radius:["35%", '75%'],
+            center: ["50%", '55%'],
+            label:{
+              show:true,
+              formatter:"{c}",
+              fontSize:10,
+              position:"inside",
+              color:'#ffffff',
+            },
+            data: list,
+          },
+        ]
+      }
+    },
+  },
+})

pages/index/indexRight/rightHuan/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "ec-canvas": "../../../../ec-canvas/ec-canvas"
+  }
+}

pages/index/indexRight/rightHuan/index.wxml

@@ -0,0 +1,3 @@
+<view class="chart_con">
+  <ec-canvas id="chartConDom" canvas-id="chartCon" ec="{{ Ec }}"></ec-canvas>
+</view>

pages/index/indexRight/rightHuan/index.wxss

@@ -0,0 +1,2 @@
+
+.chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

pages/index/indexRight/rightLine1/index.js

@@ -0,0 +1,113 @@
+const app = getApp();
+import * as echarts from '../../../../ec-canvas/echarts' // 这个是自己实际的目录
+Component({
+  data:{
+    Ec: { lazyLoad: true, },
+  },
+  lifetimes: {
+    attached: function () {
+      this.init()
+    },
+    moved: function () { },
+    detached: function () { },
+  },
+  methods:{
+    init(){
+      var that = this;
+      that.selectComponent('#chartConDom').init((canvas, width, height, dpr) => {
+        const chart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr
+        });
+        var option = that.getOrderWarnOption();
+        chart.setOption(option);
+        return chart;
+      });
+    },
+    getOrderWarnOption(){
+      var list = [
+        {name:"生产",data:[{name:"2022",value:30,},{name:"2021",value:30,},{name:"2020",value:20,},{name:"2019",value:30,}]},
+        {name:"销售",data:[{name:"2022",value:50,},{name:"2021",value:30,},{name:"2020",value:30,},{name:"2019",value:30,}]},
+        {name:"在途",data:[{name:"2022",value:50,},{name:"2021",value:30,},{name:"2020",value:30,},{name:"2019",value:30,}]},
+        {name:"交付",data:[{name:"2022",value:50,},{name:"2021",value:30,},{name:"2020",value:30,},{name:"2019",value:30,}]},
+      ]
+      var fontSize = 10
+      var fontColor = "#999999"
+      return {
+        color:["#583DC8","#D1B645","#31CE7B","#5B7DEB"],
+        title:{
+          text:"产品年报数据",
+          show:false,
+          textStyle:{
+            color:fontColor,
+            fontSize:fontSize,
+          },
+          left:'10%',
+          top:0,
+        },
+        grid: {
+          top: '10%',
+          left: '6%',
+          right: '10%',
+          bottom: '3%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          }
+        },
+        legend:{
+          show:0,
+          icon:"circle",
+          right:'10%',
+          top:0,
+          itemWidth:fontSize*0.8,
+          itemHeight:fontSize*0.8,
+          textStyle:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+          data:list.map(item=>item.name)
+        },
+        yAxis: {
+          type: 'value',
+          axisTick:{show:false,},
+          axisLabel:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          axisTick:{show:false,},
+          axisLabel:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+          data: list[0].data.map(item=>item.name)
+        },
+			  series:this.setOptItem(list),
+      }
+    },
+    setOptItem(list){
+      var data = []
+      for(var i in list){
+        data.push({
+          type: 'line',
+          stack: 'Total',
+          areaStyle: {},
+          lineStyle: { width:1,},
+          silent:1,
+          symbolSize:1,
+          name:list[i].name,
+          data:list[i].data
+        })
+      }
+      return data
+    },
+  },
+})

pages/index/indexRight/rightLine1/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "ec-canvas": "../../../../ec-canvas/ec-canvas"
+  }
+}

pages/index/indexRight/rightLine1/index.wxml

@@ -0,0 +1,3 @@
+<view class="chart_con">
+  <ec-canvas id="chartConDom" canvas-id="chartCon" ec="{{ Ec }}"></ec-canvas>
+</view>

pages/index/indexRight/rightLine1/index.wxss

@@ -0,0 +1,2 @@
+
+.chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

pages/index/indexRight/rightLine2/index.js

@@ -0,0 +1,88 @@
+const app = getApp();
+import * as echarts from '../../../../ec-canvas/echarts' // 这个是自己实际的目录
+Component({
+  data:{
+    Ec: { lazyLoad: true, },
+  },
+  lifetimes: {
+    attached: function () {
+      this.init()
+    },
+    moved: function () { },
+    detached: function () { },
+  },
+  methods:{
+    init(){
+      var that = this;
+      that.selectComponent('#chartConDom').init((canvas, width, height, dpr) => {
+        const chart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr
+        });
+        var option = that.getOrderWarnOption();
+        chart.setOption(option);
+        return chart;
+      });
+    },
+    getOrderWarnOption(){
+      var list = [{name:"生化诊断",value:50,},{name:"免疫诊断",value:30,},{name:"分子诊断",value:30,},{name:"血液检测",value:30,}]
+      var fontSize = 10
+      var fontColor = "#999999"
+      return {
+        color:["#333FFF","#FFAE36"],
+        title:{
+          text:"产品分类信息",
+          show:0,
+          textStyle:{
+            color:fontColor,
+            fontSize:fontSize,
+          },
+          left:'center',
+          top:0,
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+          }
+        },
+        grid: {
+          top: '20%',
+          left: '6%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value',
+          axisTick:{show:false,},
+          axisLabel:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+        },
+        xAxis: {
+          type: 'category',
+          axisTick:{show:false,},
+          axisLabel:{
+            fontSize:fontSize,
+            color:fontColor,
+          },
+          axisLine:{
+            lineStyle:{
+              color:"#cccccc"
+            }
+          },
+          data: list.map(item=>item.name)
+        },
+			  series:[
+          {
+            type: 'line',
+            data:list
+          },
+        ],
+      }
+    },
+  },
+})

pages/index/indexRight/rightLine2/index.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "ec-canvas": "../../../../ec-canvas/ec-canvas"
+  }
+}

pages/index/indexRight/rightLine2/index.wxml

@@ -0,0 +1,3 @@
+<view class="chart_con">
+  <ec-canvas id="chartConDom" canvas-id="chartCon" ec="{{ Ec }}"></ec-canvas>
+</view>

pages/index/indexRight/rightLine2/index.wxss

@@ -0,0 +1,2 @@
+
+.chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}

pages/index/indexRight/rightPie/rightPie.js

@@ -0,0 +1,63 @@
+const app = getApp();
+import * as echarts from '../../../../ec-canvas/echarts' // 这个是自己实际的目录
+Component({
+  data:{
+    Ec: { lazyLoad: true, },
+  },
+  lifetimes: {
+    attached: function () {
+      this.init()
+    },
+    moved: function () { },
+    detached: function () { },
+  },
+  methods:{
+    init(){
+      var that = this;
+      that.selectComponent('#chartConDom').init((canvas, width, height, dpr) => {
+        const chart = echarts.init(canvas, null, {
+          width: width,
+          height: height,
+          devicePixelRatio: dpr
+        });
+        var option = that.getOrderWarnOption();
+        chart.setOption(option);
+        return chart;
+      });
+    },
+    getOrderWarnOption(){
+      var list = [{name:"追溯产品",value:999,},{name:"非追溯产品",value:666,},]
+      var fontSize = 10
+      var fontColor = "#999999"
+      return {
+        color:["#7A4AFF","#FFAE36"],
+        legend:{
+          icon:"circle",
+          itemWidth:fontSize*0.8,
+          itemHeight:fontSize*0.8,
+          textStyle:{
+            fontSize:fontSize*0.9,
+            color:fontColor,
+          },
+          data:list.map(item=>item.name)
+        },
+			  series:[
+          {
+            type: 'pie',
+            silent:1,
+            radius:'75%',
+            center: ["50%", '55%'],
+            label:{
+              show:true,
+              formatter:"{c}",
+              fontSize:10,
+              position:"inside",
+              color:'#ffffff',
+            },
+            data: list,
+          },
+        ]
+      }
+    },
+  },
+})

pages/index/indexRight/rightPie/rightPie.json

@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "ec-canvas": "../../../../ec-canvas/ec-canvas"
+  }
+}

pages/index/indexRight/rightPie/rightPie.wxml

@@ -0,0 +1,3 @@
+<view class="chart_con">
+  <ec-canvas id="chartConDom" canvas-id="chartCon" ec="{{ Ec }}"></ec-canvas>
+</view>

pages/index/indexRight/rightPie/rightPie.wxss

@@ -0,0 +1,2 @@
+
+.chart_con{ position: absolute; top: 0; left: 0; right: 0; bottom: 0;}