Project_yhfu/src/views/bigdata/chart-keyArea.vue

<!-- **************************************NO.7 散养户分布*************************************** -->
<template>
  <div class="chart-container">
    <div id="freelyraise" style="width: 100%; height:23vh;">
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import {getZdqy} from '@/api/bigdata'

  export default {
    name: 'freelyraise',
    data() {
      return {
        count: 0,
        data_zdqy: []
      }
    },
    mounted() {
      this.zdqy()
    },

    methods: {
      zdqy() {
        let that = this
        getZdqy().then(resp => {
          that.data_zdqy = resp.data
          that.myEcharts()
        })
      },
      // 出处 http://192.144.199.210/forum.php?mod=viewthread&tid=6785&highlight=%E6%9F%B1%E7%8A%B6%E5%9B%BE

      myEcharts() {
        let that = this
        var chartDom = document.getElementById('freelyraise');
        var myChart = echarts.init(chartDom);
        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#ef5f9d', '#ecb935'];
        var option;
        let data = that.data_zdqy

        function contains(arr, dst) {
          var i = arr.length;
          while ((i -= 1)) {
            if (arr[i] == dst) {
              return i;
            }
          }
          return false;
        }

        var attackSourcesColor = [
          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
            offset: 0,
            color: "#EB3B5A"
          },
            {
              offset: 1,
              color: "#FE9C5A"
            }
          ]),
          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
            offset: 0,
            color: "#FA8231"
          },
            {
              offset: 1,
              color: "#FFD14C"
            }
          ]),
          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
            offset: 0,
            color: "#F7B731"
          },
            {
              offset: 1,
              color: "#FFEE96"
            }
          ]),
          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
            offset: 0,
            color: "#21fe8f"
          },
            {
              offset: 1,
              color: "#38911f"
            }
          ]),
          new echarts.graphic.LinearGradient(0, 1, 1, 1, [{
            offset: 0,
            color: "#395CFE"
          },
            {
              offset: 1,
              color: "#2EC7CF"
            }
          ])

        ];
        var attackSourcesColor1 = [
          "#EB3B5A",
          "#FA8231",
          "#F7B731",
          "#38911f",
          "#3860FC",
          "#F57474",
          "#56D0E3",
          "#1089E7",
          "#F57474",
          "#1089E7",
          "#F57474",
          "#F57474"
        ];
        var attaData = [];
        var attaName = [];
        var topName = []
        data.forEach((it, index) => {
          attaData[index] = parseFloat(it.num).toFixed(0);
          //attaData[index] = parseInt(it.num);
          attaName[index] = it.name;
          topName[index] = `${it.name}`
        });
        var salvProMax = [];
        var max = attaData[0];
        for (let i = 0; i < attaData.length; i++) {
          max = max < attaData[i + 1] ? attaData[i + 1] : max;
        }
        for (let i = 0; i < attaData.length; i++) {
          salvProMax.push(max); //背景按最大值
        }

        function attackSourcesDataFmt(sData) {
          var sss = [];
          sData.forEach(function (item, i) {
            let itemStyle = {
              color: i > 5 ? attackSourcesColor[5] : attackSourcesColor[i]
            };
            sss.push({
              value: item,
              itemStyle: itemStyle
            });
          });
          return sss;
        }

        option = {
          tooltip: {
            show: false,
            backgroundColor: "rgba(3,169,244, 0.5)", //背景颜色（此时为默认色）
            textStyle: {
              fontSize: 12
            }
          },
          color: ["#F7B731"],
          legend: {
            show: false,
            pageIconSize: [12, 12],
            itemWidth: 20,
            itemHeight: 10,
            textStyle: {
              //图例文字的样式
              fontSize: 12,
              color: "#fff"
            },
            selectedMode: false,
            data: ["个人所得(亿元)"]
          },
          grid: {
            left: '12%',
            width: '70%',
            bottom: '5%',
            top: "8%",
          },
          xAxis: {
            type: "value",

            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            }
          },
          yAxis: [{ //左侧排行数字
            type: "category",
            inverse: true,
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisPointer: {
              label: {
                show: true,
                //margin: 30
              }
            },
            padding: [5, 0, 0, 0],
            postion: "right",
            data: attaName,
            axisLabel: {
              margin: 30,
              fontSize: 12,
              align: "left",
              padding: [2, 0, 0, 0],
              color: "#000",
              rich: {
                nt1: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[0],
                  width: 15,
                  height: 15,
                  fontSize: 12,
                  align: "center",
                  borderRadius: 100,
                  lineHeight: "5",
                  padding: [0, 1, 2, 1]
                  // padding:[0,0,2,0],
                },
                nt2: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[1],
                  width: 15,
                  height: 15,
                  fontSize: 12,
                  align: "center",
                  borderRadius: 100,
                  padding: [0, 1, 2, 1]
                },
                nt3: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[2],
                  width: 15,
                  height: 15,
                  fontSize: 12,
                  align: "center",
                  borderRadius: 100,
                  padding: [0, 1, 2, 1]
                },
                nt: {
                  color: "#fff",
                  backgroundColor: attackSourcesColor1[3],
                  width: 15,
                  height: 15,
                  fontSize: 12,
                  align: "center",
                  lineHeight: 3,
                  borderRadius: 100,
                  padding: [0, 1, 2, 1],
                  lineHeight: 5
                }
              },

            }
          },
            { //右侧名字
              type: "category",
              inverse: true,
              axisTick: "none",
              axisLine: "none",
              show: true,
              axisLabel: {
                textStyle: {
                  color: "#fff",
                  fontSize: "12"
                }
              },
              //data: attackSourcesDataFmt(attaName)
              data: attackSourcesDataFmt(attaData) //数字
            },
            { //名称
              type: 'category',
              offset: -10,
              position: "left",
              axisLabel: {
                color: `#fff`,
                fontSize: 10
              },
              axisLine: {
                show: false
              },
              inverse: true,
              axisTick: {
                show: false
              },
              axisLabel: {
                interval: 0,
                color: ["#fff"],
                align: "left",
                verticalAlign: "bottom",
                lineHeight: 32,
                fontSize: 12
              },
              data: topName
            },
          ],
          series: [{ //条形图数值
            zlevel: 1,
            name: "个人所得(亿元)",
            type: "bar",
            barWidth: "8px",
            animationDuration: 1500,
            data: attackSourcesDataFmt(attaData),
            align: "center",
            itemStyle: {
              normal: {
                barBorderRadius: 10
              }
            },
            label: {
              show: false,
              fontSize: 12,
              color: "#fff",
              textBorderWidth: 2,
              padding: [2, 0, 0, 0]
            }
          },
            { //最大值背景条形图
              name: "个人所得(亿元)",
              type: "bar",
              barWidth: 8,
              barGap: "-100%",
              margin: "20",
              data: salvProMax,
              textStyle: {
                //图例文字的样式
                fontSize: 12,
                color: "#fff"
              },
              itemStyle: {
                normal: {
                  color: "#05325F",
                  //width:"100%",
                  fontSize: 12,
                  barBorderRadius: 30
                },
              }
            }
          ]
        };
        option && myChart.setOption(option);
      },

    },


  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .chart-container {
    width: 100%;
    height: auto;
    position: relative;
    padding-bottom: 10px;
    display: flex;
  }
</style>