202012G07/echarts-screen/src/components/CityRank.vue

<template>
    <div class="wrap-container sn-container" id="cityrank">
      <div class="sn-content">
        <div class="sn-title">柱状图</div>
        <div class="sn-body">
      <div class="wrap-container">
        <div class="chart" id="chart_left1"></div>
    </div>
    </div>
      </div>
    </div>
</template>

<script>
    import screenfull from "screenfull";

    export default {
        name: "CityRank",
        data() {
            return {
                fullscreen: false
            }
        },
        mounted() {
            this.getEchartLeft1();
        },
        methods: {
            getEchartLeft1() {
                // 实例化对象
                let myChart = echarts.init(document.getElementById('chart_left1'));
                let charts = { // 按顺序排列从大到小
                    cityList: ['湖北', '香港', '广东', '湖南', '四川', '浙江', '上海'],
                    cityData: [68149, 8300, 2035, 1020, 843, 1300, 1473],
                    function(p) {
                        return p.name + ":" + this.cityData(p.value);
        }
      }

      let top10CityList = charts.cityList;
      let top10CityData = charts.cityData;
      let color = ['rgba(14,109,236', 'rgba(255,91,6', 'rgba(100,255,249', 'rgba(248,195,248', 'rgba(110,234,19', 'rgba(255,168,17', 'rgba(218,111,227'];

      let lineY = [];
      for (let i = 0; i < charts.cityList.length; i++) {
        let x = i
        if (x > color.length - 1) {
          x = color.length - 1
        }
        let data = {
          name: charts.cityList[i],
          color: color[x] + ')',
          value: top10CityData[i],
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: color[x] + ', 0.3)'
              }, {
                offset: 1,
                color: color[x] + ', 1)'
              }], false),
              barBorderRadius: 10
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          }
        }
        lineY.push(data)
      }

      // 指定配置和数据
      let option = {
          toolbox: {
              feature: {
                  mytool: {
                      show: true,
                      title: "全屏",
                      icon: 'path://M181 357.5V181.2h176.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c0-14.3-11.6-25.9-25.9-25.9H118c-11 0-20 9-20 20v239.4c0 14.3 11.6 25.9 25.9 25.9H155c14.4-0.1 26-11.7 26-26.1zM668.6 181.2H845v176.4c0 14.3 11.6 25.9 25.9 25.9H902c14.3 0 25.9-11.6 25.9-25.9V118.2c0-11-9-20-20-20H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 26 25.9 26zM357.4 845.2H181V668.8c0-14.3-11.6-25.9-25.9-25.9H124c-14.3 0-25.9 11.6-25.9 25.9v239.4c0 11 9 20 20 20h239.4c14.3 0 25.9-11.6 25.9-25.9v-31.1c-0.1-14.4-11.7-26-26-26zM845 668.8v176.4H668.6c-14.3 0-25.9 11.6-25.9 25.9v31.1c0 14.3 11.6 25.9 25.9 25.9H908c11 0 20-9 20-20V668.8c0-14.3-11.6-25.9-25.9-25.9H871c-14.4 0-26 11.6-26 25.9z',
                      onclick: function () {
                          const element = document.getElementById('chart_left1');
                          if (!screenfull.isEnabled) {//判断是否支持全屏
                              this.$message({
                                  message: '您的浏览器暂时不支持全屏切换',
                                  type: 'warning'
                              })
                              return false
                          }
                          screenfull.toggle(element)

                      },
                  }
              },
          },
          color: color,
          tooltip: {
              trigger: 'item',
          },
          grid: {
              borderWidth: 0,
              top: '5%',
              left: '2%',
              right: '2%',
              bottom: '0%',
              containLabel: true
          },
          xAxis: [{
              type: 'value',
              axisTick: {
                  show: false
              },
              axisLine: {
                  show: false
              },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }],
        yAxis: [{
          type: 'category',
          inverse: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#b3ccf8',
              fontSize: 13
            },
          },
          data: top10CityList
        }, {
          type: 'category',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            inside: false,
            textStyle: {
              color: '#b3ccf8',
              fontSize: 13
            },
            formatter: (val) => {
              return `${val}`
            }
          },
          splitArea: {
            show: false
          },
          splitLine: {
            show: false
          },
          data: top10CityData.reverse()
        }],
        series: [{
          name: '',
          type: 'bar',
          zlevel: 2,
          barWidth: '10px',
          data: lineY,
          animationDuration: 1500,
          label: {
            normal: {
              color: '#b3ccf8',
              show: false,
              position: [0, '-15px'],
              textStyle: {
                fontSize: 13
              },
              formatter: (a, b) => {
                return a.name;

              }
            }
          }
        }]
      };

      // 把配置给实例对象
      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {

  }
};
</script>

<style lang="scss" scoped>
.sn-container {
  width: 99%;
  height: 99%;
  .chart {
    height: 99%;
    width: 99%;
    //margin-bottom: 4%;
    margin-right: 1%;
  }
}
</style>