SZHY2.0/src/utils/app-ecahrts.js

//不同综合风险等级货物对应不同航线比例---柱状图
export const eleCake = {
  tooltip: {},
  // legend: {
  //   data: ['一月销量', '二月销量'],
  //   right: '25%',
  // },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '5%',
    containLabel: true
  },
  xAxis: {
    axisTick: {
      alignWithLabel: true
    },
    data: ["PEK", "CTU", "NTG", "NZH", "ORD", "OTP", "OVB", "PAP", "CTU", "NTG", "NZH", "OTP", "PEK", "PEK", "PEK", "PEK", "PEK", "PEK"]
  },
  yAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  series: [{
    name: '',
    type: 'bar',
    stack: '业务',
    barWidth: '24px',
    itemStyle: {
      normal: {
        //这里是重点
        color: "#F3C742"
      }
    },
    data: [630, 20, 36, 10, 10, 20]
  },
  {
    name: '',
    type: 'bar',
    stack: '业务',
    barWidth: '24px',
    itemStyle: {
      normal: {
        //这里是重点
        color: "#EE50A6"
      }
    },
    data: [300, 25, 26, 20, 10, 20]
  },
  ]
}

//不同综合风险等级货物分布比例----饼图
export const pillar = {
  tooltip: {
    trigger: 'item'
  },

  title: {
    text: '主标题',
    // 副标题
    subtext: "50%",
    // 主副标题间距
    itemGap: 12,
    x: 'center',
    y: 'center',
    top: '35%',
    // 主标题样式
    textStyle: {
      fontSize: '16',
      color: '#ffffff'
    },
    // itemStyle: {

    //   normal: {
    //     borderColor: 'red', //背景色
    //   }
    // },
    // 副标题样式
    subtextStyle: {
      fontSize: '20',
      fontWeight: '800',
      color: '#ffffff'
    }
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['60%', '90%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: false,
          fontSize: '40',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
      ]
    },
    {
      name: '总数',
      type: 'pie',
      // silent: 'ture',
      radius: ['0%', '50%'],
      avoidLabelOverlap: false,
      itemStyle: {
        normal: {
          color: '#383C54'
        }
      },
      label: {
        show: false,
        position: 'center'
      },
      // 自定义中心内容的话需要把这个关闭
      emphasis: {
        label: {
          show: false,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 100 },
      ]
    }
  ],
}
export const pillars = {
  title: {
    text: '主标题',
    // 副标题
    subtext: "50%",
    // 主副标题间距
    itemGap: 12,
    x: 'center',
    y: 'center',
    top: '35%',
    // 主标题样式
    textStyle: {
      fontSize: '16',
      color: '#ffffff'
    },
    // itemStyle: {

    //   normal: {
    //     borderColor: 'red', //背景色
    //   }
    // },
    // 副标题样式
    subtextStyle: {
      fontSize: '20',
      fontWeight: '800',
      color: '#ffffff'
    }
  },
  series: [
    {
      name: '访问来源',
      type: 'pie',
      radius: ['65%', '90%'],
      avoidLabelOverlap: false,
      silent: 'ture',
      label: {
        show: false,
        position: 'center'
      },
      color: [],
      // itemStyle: {
      //   normal: {
      //     color: ['#6161BD', '#E7EBF4']
      //   }
      // },
      // 自定义中心内容的话需要把这个关闭
      emphasis: {
        label: {
          show: false,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
      ]
    },

    {
      name: '访问来源',
      type: 'pie',
      silent: 'ture',
      radius: ['0%', '55%'],
      avoidLabelOverlap: false,
      itemStyle: {
        normal: {
          color: '#383C54'
        }
      },
      label: {
        show: false,
        position: 'center'
      },
      // 自定义中心内容的话需要把这个关闭
      emphasis: {
        label: {
          show: false,
          fontSize: '30',
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 100 },
      ]
    }
  ]
}

//安检通道综合效率----柱状图
export const discoloration = {
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  backgroundColor: "rgba(223,227,234, 0.15)",
  //这里就不重要了，可以删掉
  color: ['#c23531', '#2f4554', '#61a0a8'],
  xAxis: {
    type: 'category',
    data: ['通道A', '通道B', '通道C', '通道D', '通道E']
  },
  yAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#B0B3C3'
      }
    }
  },
  series: [{
    data: [120, 200, 150, 80, 70],
    type: 'bar',
    itemStyle: {
      normal: {
        //这里是重点
        color: function (params) {
          //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
          var colorList = ['#ECBF79', '#6CDDAF', '#6D94E4', '#A46DBE', '#DB4E4E'];
          return colorList[params.dataIndex]
        }
      }
    }
  }]
}

//安检通道综合效率----柱状图
export const discolorationcops = {
  tooltip: {},
  // legend: {
  //   data: ['一月销量', '二月销量'],
  //   right: '25%',
  // },
  grid: {
    left: '1%',
    right: '0%',
    bottom: '3%',
    top: "10%",
    containLabel: true
  },
  xAxis: {
    axisTick: {
      alignWithLabel: true
    },
    data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18"]
  },
  yAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  series: [{
    name: '',
    type: 'bar',
    stack: '业务',
    barWidth: '24px',
    itemStyle: {
      normal: {
        //这里是重点
        color: "#5D6AB6"
      }
    },
    data: [630, 20, 36, 10, 10, 20, 630, 20, 36, 10, 10, 20, 630, 20, 36, 10, 10, 20]
  },
  ]
}

//安检通道综合效率----柱状图
export const discolorationcopy = {
  tooltip: {},
  // legend: {
  //   data: ['一月销量', '二月销量'],
  //   right: '25%',
  // },
  grid: {
    left: '1%',
    right: '0%',
    bottom: '3%',
    top: "10%",
    containLabel: true
  },
  xAxis: {
    axisTick: {
      alignWithLabel: true
    },
    data: ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18"]
  },
  yAxis: {
    splitLine: {
      lineStyle: {
        type: 'dashed'
      }
    }
  },
  series: [{
    name: '',
    type: 'bar',
    stack: '业务',
    barWidth: '24px',
    itemStyle: {
      normal: {
        //这里是重点
        color: "#66AAD6"
      }
    },
    data: [630, 20, 36, 10, 10, 20, 630, 20, 36, 10, 10, 20, 630, 20, 36, 10, 10, 20]
  },
  ]
}