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

<!-- **************************************NO.2 人口*************************************** -->
<template>
  <div class="chart-container">
    <div id="population" style="width: 100%; height:21vh;">
    </div>
  </div>
</template>

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

  export default {
    name: 'population',
    data() {
      return {
        count: 0,
        data_wryfbtj:[]
      }
    },
    mounted() {
      this.wryfbtj();
    },

    methods: {
      // 出处 http://192.144.199.210:8080/editor/index.html?chart_id=__n0_3jDX4e4bko6

      wryfbtj() {
        let that = this
        getWryfbtj().then(resp => {
          that.data_wryfbtj = resp.data
          that.myEcharts()
        })
      },
      myEcharts() {
        let that = this
        var chartDom = document.getElementById('population');
        var myChart = echarts.init(chartDom);
        var color = ['#02CDFF', '#62FBE7', '#7930FF', '#eb9123', '#ecb935']
        var option;
        var bgImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAF+CAYAAADNzDlVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAilJREFUeNrs1rENwjAURdEfC0pmQAwBDfuwE8wDDSULIGagTGEcFNHQpfPXseT0V0ryzrA/XzcRsWt3HX2fsd1XSRITc8O2JIn5RZVIdsr87mU54xT0TBL1/Sms2uPd7qPXivvp+PfKpfuGBAkStPxMf7muLXe43FiO5ViO5VjOsAoSxHIsx3Isx3Isx3KGVZAglmM5lmM5lmM5liMFQYJYjuVYjuVYjuVYTpAgQSzHcizHcizHcoZVkCCWYzmWYzmWYzmWM6yCBLEcy7Ecy7Ecy7GcIEGCWI7lWI7lWI7lDKsgQYJYjuVYjuVYjuUMqyBBLMdyLMdyLMdyLGdYBQliOZZjOZZjOZZjOUGCBLEcy7Ecy7EcyxlWQYJYjuVYjuVYjuVYzrAKEsRyLMdyLMdyLMdypCBIEMuxHMuxHMuxnGEVJEgQy7Ecy7Ecy7GcYRUkiOVYjuVYjuVYjuUMqyBBLMdyLMdyLMdyLCdIkCCWYzmWYzmWYznDKkgQy7Ecy7Ecy7EcyxlWQYJYjuVYjuVYjuVYjhQECWI5lmM5lmM5ljOsggQJYjmWYzmWYzmWM6yCBLEcy7Ecy7Ecy7GcYRUkiOVYjuVYjuVYjuUECRLEcizHcizHcixnWAUJYjmWYzmWYzmWYznDKkgQy7Ecy7Ecy7Ecy5GCIEEsx3Isx3Isx3IsJ0iQIJZjOZZjOZZjOcMqSBDLsRzLsRzL9Wy5odZqhwQJWn4+AgwApGqd0LftHcgAAAAASUVORK5CYII=';
        var fillImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAF+CAYAAADNzDlVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABFhJREFUeNrs3U+O1DgUgHHblUFzhb7GCCHNtnfMFUasOA9HYEWfAQlpZq6AEOIIdPcFZgMVe5L6Q6pLzQjFLZK2fpZSKbVioQ8n9b68+Dnxz39fXYYYrkIIF+Fxt5the5kagQkHhtepEZhvUCk01tLh3Gul3aZQwovxSwMwn8cfhW74+Lul66jJawgQIEB1QJfDdj1s5ZFvI8NzLsfluByX43KAlmzjKRdyTkYIEJeb6XK5JC7H5bhchculmLmcOASoAqjPGyMEiMtVuFyMhctxOS5X4XKlRC4nDgECBIjLLeVyXSnpqhQux+W43FyXi/Jy4hCgKqC+74wQIC5XkZdLKcvLcTkuV+FyOScuJw4Bmt/MlwPE5WprH4LaBy7H5WpcbvjgcuIQIECAuByXe0iXy4eJtOONXilx2NJh238PIYbpmPP9qvpc7O5YU+r351/KB9hyAl7C3WPO9+vqs3O5hkZocrn9H+PJwdP3Y87h/n9sNX24HKBFgLaesQLiclUul9Q+yMvJy1Xl5bLaB3EIUE3biVzvGSsgLjfb5Yb7ci7H5bhchcvFWLicOAQIECAux+W43P1QXcmpuWuotbyc2gdxCFBF29c+FHk5QFzOfDl5OS63jMsFtQ/iECBAgLgcl+Ny34PqcoMrot+cFkzEWIbtuN9/H0/R/yuyWFGf2zR8vBiLIHa5hTsFE3FGkcWifT4Pey63fqDt9hemsOYWSylGaM2t++P6zWUjS7KNuZGX1pdbO5S83Mqb9eXEIUC1gfV4r2GEAP08IHk5LsfluNzkcsEzVnEIULXLFS4HiMvNdrnh+uFyXI7LVbhcTN7hJQ4BqnU5eTlAXG6+y/XbjstxOS5X4XJ93nA5cQhQrcupYwXE5Wa7XLRWMJfjclUuV6wVLA4BAgSIyy3ncl0p6aoULsfluNxcl4vRM1ZxCBAgQFxuybWC25ov1+Wc2nK543tOj/tpeYxpOz9mzX3GERpd7uI4PWZcGuO8Hf82vSr07n5FfW7TZrPlcuIQoAqgL19+NUKAuFyFyw1xyDPWVbtci9dQY/Pl+o7LiUOA5rdD7cPGCAHicubLcTkut4jLmS8nDgF6CJdT+wCIy3kfK5fjcsu43HA/xOXEIUCVLnffhAYjBIjL/ZjLZevLcTkuV+Vyyfpy4hCgKqCvX58YIUBcbr7Lxd8/vb1u6Gf7hstxuZ/tcp6xikOAAAHicubLPYz2BHk5LsfluJzA+tja7hlrr/YBEJeb63Lx2cd38nJcjstVuFyyvpw4BAgQIC7H5bgcl3u0Lpd77/AShwBVNGuSAOJylS739MNf7blcSv1+uFI+LFmbT5avzbv/gOmY8/2q+lzc+ZWbqvZPK76OS9duvrNfV5/2XG4YMS4nDgECBIjLcbmHdLmGzjh5OS7H5cShxoGsLweIy1W63G/v/+FyXI7LVbic+XLiECBAgLgcl+NyXI7LrcXlYilFHAIEaH77T4ABAKzsRPWz+TQ7AAAAAElFTkSuQmCCgg';
        var chartData =that.data_wryfbtj

        var bgData = [];
        var itemData = [];

        // 取出每一条数据value,作为显示数据
        chartData.forEach(function (items, index) {
          itemData.push(items.value);
        })

        // 取出所有数据最大值,作为背景象形柱图数据
        chartData.forEach(function (items, index) {
          bgData.push({
            name: items.name,
            value: Math.max.apply(null, itemData)
          });
        })

        // 所有数据最大值
        var maxValue = Math.max.apply(null, itemData);

        // 字体 distance放大参数
        var scale = 1;

        //富文本配置
        var rich = {
          white: {
            color: "#fff",
            align: 'left',
            fontSize: 12 * scale,
            padding: [0, 0]
          },
        };

        option = {
          tooltip: {
            formatter: '{b} : {c}' + '处',
          },
          grid: {
            left: '3%',
            right: '6%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: (function (data) {
              var arr = [];
              data.forEach(function (items) {
                arr.push(items.name);
              });
              return arr;
            })(chartData),


            boundaryGap: ['20%', '20%'],
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              interval: 0,
              formatter: function (params) {
                var newParamsName = ''
                const paramsNameNumber = params.length
                const provideNumber = 3 // 单行显示文字个数
                const rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                if (paramsNameNumber > provideNumber) {
                  for (let p = 0; p < rowNumber; p++) {
                    var tempStr = ''
                    var start = p * provideNumber
                    var end = start + provideNumber
                    if (p === rowNumber - 1) {
                      tempStr = params.substring(start, paramsNameNumber)
                    } else {
                      tempStr = params.substring(start, end) + '\n'
                    }
                    newParamsName += tempStr
                  }
                } else {
                  newParamsName = params
                }
                return newParamsName
              },
              textStyle: {
                fontSize: 10 * scale,
                color: '#3fdaff'
              }
            }
          }],
          yAxis: [{
            type: 'value',
            splitLine: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false,
              inside: true,
              length: 10 * scale,
              lineStyle: {
                color: '#0b5263'
              }
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: '#0b5263',
                fontSize: 10 * scale
              }
            },
          }],
          series: [
            //背景
            {
              name: 'bg',
              type: 'pictorialBar',
              barWidth: '45%',
              // barGap: '0%',
              silent: true,
              label: {
                normal: {
                  show: true,
                  position: "top",
                  distance: 20 * scale,
                  formatter: function (params) {
                    var stuNum = 0;
                    chartData.forEach(function (value, index, array) {
                      if (params.name == value.name) {
                        stuNum = value.value;
                      }
                    })
                    return stuNum + '{white| 处}';
                  },
                  textStyle: {
                    color: "#ffc72b",
                    fontSize: 10 * scale
                  },
                  rich: rich
                }
              },
              symbol: 'image://' + bgImg,
              symbolClip: false,
              symbolBoundingData: maxValue,
              symbolSize: [15, '100%'],
              data: bgData
            },
            {
              name: '数据',
              type: 'pictorialBar',
              barWidth: '45%',
              barGap: '-100%',
              data: chartData,
              z: 3,
              symbol: 'image://' + fillImg,
              symbolClip: true,
              symbolBoundingData: maxValue,
              symbolSize: [15, '100%']
            },
          ]
        };
        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>