E-commerce/src/components/Customize/HybridCharts.vue

<!-- 饼图统计 -->
<template>
  <div class="box">
    <boxTop :title="title"/>
    <div class="cakeBox">
      <div class="flex">
        <div class="chartsDom" id="PieCharts"></div>
        <div class="panel">
          <div class="panel-item" v-for="item in chartData">
            <div class="color" :style="{'background-color':item.color }"></div>
            <div class="type">{{ item.name }}</div>
            <div class="number">{{ item.value }}单</div>
<!--            <div class="amount">￥{{ item.amount }}</div>-->
          </div>
        </div>
      </div>
    </div>
    <div id="rankingCharts"></div>
  </div>
</template>

<script>
import boxTop from '@/components/boxTop/index.vue'

export default {
  data() {
    return {
      colorList:['#975fe4','#45a5ff','#81c926','#ff8e49','#37cbcb'],
      chartData: [
        {
          value: 30,
          name: "平台一",
          color: '#975fe4',
          amount: 3395,
        },
        {
          value: 40,
          name: "平台二",
          color: '#45a5ff',
          amount: 2323
        },
        {
          value: 50,
          name: "平台三",
          color: '#81c926',
          amount: 3322
        },
        {
          value: 20,
          name: "平台四",
          amount: 6644,
          color: '#ff8e49'
        },
        {
          value: 16,
          name: "平台五",
          amount: 3211,
          color: '#37cbcb'
        },
      ]
    }
  },
  components: {
    boxTop,
  },
  props: {
    id: {
      type: String,
      default: ``,
    },
    data: {
      type: Array,
      default: [],
    },
    dataSource:{
      type: Array,
      default: [],
    },
    tabIndex: {
      type: Number,
      default: 0,
    },
    title: {
      type: String,
      default: ``,
    },
    titleEn: {
      type: String,
      default: `Tongren Tobacco Planting Digital Management Platform`,
    },
  },
  async mounted() {
    this.getEchart()
    this.getEchartAgain()
  },
  watch: {
    data: {
      handler() {

        this.chartData = this.data.map((item, index) => ({
          value: item.value,
          name: item.label,
          color: this.colorList[index],
          amount:item.ratio
        }))
        this.getEchart()
        this.getEchartAgain()
      },
      deep: true, // 深度监听
      immediate: true, // 立即执行
    },
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById('PieCharts'))
      const sum = this.chartData.reduce((per, cur) => per + cur.value, 0);
      const gap = (1 * sum) / 100;
      const pieData1 = [];
      const gapData = {
        name: "",
        value: gap,
        itemStyle: {
          color: "transparent",
        },
      };

      const color = this.chartData.map(item => item.color);
      for (let i = 0; i < this.chartData.length; i++) {
        // 第一圈数据
        pieData1.push({
          ...this.chartData[i],
        });
        pieData1.push(gapData);
      }
      let option = {
        color,
        title: {
          show: true,
          text: sum.toLocaleString(),
          subtext: "订单总量",
          x: "45%",
          y: "35%",
          itemGap: 6,
          textStyle: {
            color: "hsla(179, 100%, 65%, 1)",
            fontSize: 24,
            fontWeight: "400"
          },
          subtextStyle: {
            color: "#fff",
            fontSize: 12,
            fontWeight: "400"
          },
          textAlign: "center",
        },
        series: [
          {
            name: "",
            type: "pie",
            roundCap: true,
            radius: ["82%", "92%"],
            center: ["50%", "50%"],
            data: pieData1,
            labelLine: {
              length: 8,
              length2: 16,
              lineStyle: {
                width: 1,
              },
            },
            label: {
              show: false,
            },
          },
          {
            type: "pie",
            radius: ["78%", "81%"],
            center: ["50%", "50%"],
            animation: false,
            hoverAnimation: false,
            data: [
              {
                value: 100,
              },
            ],
            label: {
              show: false,
            },
            itemStyle: {
              normal: {
                color: "#3BC5EF",
              },
            },
          },
          {
            name: "",
            type: "pie",
            startAngle: 90,
            radius: "77%",
            animation: false,
            hoverAnimation: false,
            center: ["50%", "50%"],
            itemStyle: {
              normal: {
                labelLine: {
                  show: false,
                },
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                  {
                    offset: 1,
                    color: "rgba(50,171,241, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(50,171,241, .4)",
                  },
                  {
                    offset: 0,
                    color: "rgba(55,70,130, 0)",
                  },
                ]),
                shadowBlur: 60,
              },
            },
            data: [
              {
                value: 100,
              },
            ],
          },
        ],
      };
      myChart.setOption(option)
    },
    getEchartAgain() {
      let myChart = echarts.init(document.getElementById('rankingCharts'))
      const dataSource = this.dataSource;
      let dataSourcemax = 0
      dataSource.forEach((item) => {
        if (dataSourcemax < item.value) {
          dataSourcemax = item.value
        }
      })
      const salvProMax = dataSource.map(item => dataSourcemax)
      const title = '责任单位指标总数'
      let option = {
        title: [
          {
            show: false,
            text: title,
            fontSize: 20,
            color: '#fff',
            fontWeight: 600,
            x: '70%',
            y: '3%',
          },
        ],
        grid: {
          left: '6%',
          right: '6%',
          top: '10%',
          bottom: '8%',
        },
        xAxis: {
          show: false,
          type: 'value',
          max: dataSourcemax + 100
        },
        yAxis: [
          {
            type: 'category',
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#fff',
              align: 'left',
              verticalAlign: 'bottom',
              position: 'right',
              padding: [0, 0, 5, 15],
              fontSize: 12,
            },
            data: dataSource.map(item => item.label)
          }
        ],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              padding: [0, 0, 0, 0],
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: 'rgba(77, 255, 251, 0.3)'
                    },
                      {
                        offset: 1,
                        color: 'rgba(77, 255, 251, 1)'
                      }
                    ], false),

              }
            },
            label: {
              show: false,
              offset: [10, -20],
              formatter: '{c}人',
              position: 'insideRight', // 在上方显示
              // position: 'insideLeft',
              // 数值样式，显示的文字大小和颜色
              fontSize: '12',
              color: '#f00',
              fontWeight: 400,
              lineHeight: '18'
            },

            data: dataSource
          },
          {
            z: 1,
            name: '背景',
            type: 'bar',
            barWidth: 8,
            barGap: '-100%',
            data: salvProMax,
            itemStyle: {
              color: 'rgba(0, 255, 255, 0.3)',
              // borderRadius: [30, 30, 30, 30]
            },
            tooltip: {show: false},
            label: {
              show: true, // 开启显示
              offset: [10, -20],
              formatter: function (fItem) {
                let obj = dataSource.find(item => item.label === fItem.name)
                return `{unitWid|交易量}{value|${obj.value}}{unit|交易额}{ratio|${obj.ratio}}`
              },
              position: 'insideRight', // 在上方显示
              // 数值样式，显示的文字大小和颜色
              fontSize: '14',
              fontWeight: 400,
              lineHeight: '18',
              rich: {
                value: {
                  color: '#00ffff',
                  fontSize: 16,
                  padding: [0, 0, -10, 5]
                },
                ratio: {
                  color: '#00ffff',
                  fontSize: 16,
                  padding: [0, 0, -10, 5],
                  align: 'right',
                },
                unitWid: {
                  fontSize: 12,
                  color: 'rgba(255, 255, 255, 0.7)',
                  padding: [0, 0, -10, 40],
                  // width: 80,
                },
                unit: {
                  fontSize: 12,
                  color: 'rgba(255, 255, 255, 0.7)',
                  padding: [0, 0, -10, 40]
                }
              }
            },
          }
        ]
      };

      myChart.setOption(option)
    }
  },
}
</script>

<style lang="less" scoped>
.box {
  width: 460px;
  height: 428px;
  background: linear-gradient(rgba(0, 32, 77, 0.8) 0%, rgba(0, 32, 77, 0.5) 100%);
  box-shadow: inset 0px 0px 20px 0px rgba(27, 146, 255, 0.3);
}

#rankingCharts {
  width: 460px;
  height: 210px;
}

.cakeBox {
  width: 460px;
  height: 160px;

  .chartsDom {
    margin: 8px 30px;
    width: 150px;
    height: 150px;
  }
}

.flex {
  display: flex;
  align-items: center;
}

.l-height {
  line-height: 100%;
}

.space_around {
  justify-content: space-around;
  align-items: center;
}

.space_between {
  justify-content: space-between;
  align-items: center;
}

.number {
  text-align: center;
  font-size: 16px;
  padding: 4px 0;
  margin: 3px 0;
}

.text {
  font-size: 14px;
  color: #888888;
  display: flex;
  justify-content: center;
  align-items: center;
}

.column_reverse {
  flex-direction: column-reverse;
}

.panel {
  height: 114px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  flex-direction: column;

  .panel-item {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 20px;
    width: 195px;
    font-size: 12px;

    .color {
      border-radius: 2px;
      width: 10px;
      height: 10px;
    }
    div{
      width: 80px;
      text-align: center;
    }
  }
}

.title {
  display: flex;
  align-items: center;
  margin: 10px 30px;

  .label {
    font-weight: 600;
    font-size: 16px;
    color: #FFFFFF;

  }

  .value {
    font-weight: bold;
    font-size: 24px;
    background: linear-gradient(0deg, rgba(27, 146, 255, 1) 0%, rgba(255, 255, 255, 1) 50%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

}

.title > * {
  margin: 0 6px;
}

.AICenter {
  display: flex;
  align-items: center
}

</style>