project-html/src/views/dashboard/BLYiTuoChart.vue

<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons'); // echarts theme
import resize from './mixins/resize'

const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '330px'
    },
    xAxisDataLeft7:{
      type: Array,
      default: []
    },
    seriesData1:{
      type: Array,
      default: []
    },
    otTitle: {
      type: String,
      default: '2015'
    },
  },
  data() {
    return {
      chart: null,
      dates: [
        {
          name: '经费数',
          type: 'bar',
         // stack:"总数",
          barGap: "-100%",
          data: [2000,1234,2222,1111,4444,2345],
          itemStyle:{
            normal: {
              //这里是重点
              color: 'rgb(222,177,62)'
            }

          }
        },
        {
          name: '实际经费',
          type: 'bar',
        //  stack:"总数",
          barGap: "-100%",
          data: [1000,2234,2422,2111,3444,2445],

        },
        {
          name: '项目数',
          type: 'line',
          yAxisIndex: 2,
          data: [300,200,100,76,99,65]
        },
      ]
    }
  },
  watch: {
    seriesData1 (newV, oldV) {
      this.initChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null
  },
  methods: {
    initChart() {
      let maxa=1000;
      let maxb=1000;
      let yinterval=1000;
      let numYinterval=1000;
      let arr=[];
      let arr1=[];
      let arr2=[];
      //this.seriesData1=this.dates
    if (this.seriesData1.length>0&&this.seriesData1!=null){
      //输出顺序：经费数 实际经费 项目数
       arr=this.seriesData1[0].data; 
       arr1=this.seriesData1[1].data
       arr2=this.seriesData1[2].data;
      if (arr.length>0&&arr2.length>0&&arr1.length>0){
        let maxa1 = Math.max.apply(null,arr);
        let maxa2 = Math.max.apply(null,arr1);
         maxb = Math.max.apply(null,arr2);

         maxa=maxa1>maxa2?maxa1:maxa2;

         yinterval=this.intervala(parseInt(maxa/4))
        //
         numYinterval=this.intervala(parseInt(maxb/4))

        let x=parseInt(maxa/yinterval)
        let y=parseInt(maxb/numYinterval)
        x=x>y?x:y;
        y=y>x?y:x;
        maxa=(x+2)*yinterval;
        maxb=(y+2)*numYinterval;
      }
    }

      //let yinterval=maxa/10;
      //let numYinterval=maxb/10;
      this.chart = echarts.init(this.$el, 'macarons');
      if(!this.seriesData1.length||!(arr.length>0&&arr2.length>0&&arr1.length>0)){
        var html =
          '<div style="text-align:center;"><div style="line-height:260px;color:#868686; font-size: 26px;">暂无数据</div>' +
          '<h3 style="color: #74bcff; font-size: 18px;">'+this.otTitle+'依托单位Top10</h3></div>';
        this.$el.innerHTML = html;
        this.$el.removeAttribute('_echarts_instance_')
      }
      this.chart.setOption({
        title: {
          text: this.otTitle+"依托单位Top10",
          x:'center',
          y: 'bottom',
          left: "1%",
          top: "1%",
          textStyle: {
            fontSize: 22,
            fontFamily: "Microsoft YaHei",
            lineHeight: 30,
            color: "#116bcc",
            fontWeight:"bold"
          },
        },

        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        textStyle:{
          fontSize:18,
          lineOverflow : 'none'
        },
        grid: {
          left: 12,
          right: 10,
          bottom: 30,
          top: 107,
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     dataView: {show: true, readOnly: false},
        //     magicType: {show: true, type: ['line', 'bar']},
        //     restore: {show: true},
        //     saveAsImage: {show: true}
        //   }
        // },
        legend: {
          data: ['项目数', '经费数','实际经费'],
          bottom: "1%",
          itemGap: 40,
          textStyle: {   
            fontSize: 14, //图例字体大小
            color: '#333'
          },
        },

        xAxis: [
          {
            type: 'category',
            // data: ['2016', '2017', '2018', '2019', '2020', '2021'],
             data: this.xAxisDataLeft7,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel : {//坐标轴刻度标签的相关设置。
              interval:0,
              rotate:"21",
              formatter: function (params) {
                var maxLength = 8;
                //判断长度，超出使用...代替
                if (params && params.length > maxLength) {
                    return params.substring(0, maxLength - 1) + '...';
                } else {
                    return params;
                }
             }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgb(164, 164, 164)"
              }
            },
            axisTick: { show: false },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '经费：万元',
            min: 0,
            max: maxa,
            interval: yinterval,
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                  color: "#333",
              },
               fontSize:14,
            },
            nameTextStyle: {
              color: 'rgb(102,102,102)'
            },
            axisLine: {
              show : false,
              lineStyle: {
                color: "rgb(164, 164, 164)"
              }
            },
            axisTick: { show: false },
          },
          {
            type: 'value',
            name: '',
            min: 0,
            max: maxa,
            interval: yinterval,
            axisLabel: {
              show: false,
              formatter: '{value} 万元',
              lineStyle: {
                color: "rgb(220,220,220)"
              }
            },
            axisLine: {
              show : false,
              lineStyle: {
                color: "rgb(164, 164, 164)"
              }
            },
            axisTick: { show: false },
          },
          {
            type: 'value',
            name: '个数',
            min: 0,
            max: maxb,
            interval: numYinterval,
            axisLabel: {
              formatter: '{value} ',
              textStyle: {
                  color: "#333",
              },
              fontSize:14,
            },
            axisLine: {
              show : false,
              lineStyle: {
                color: "rgb(164, 164, 164)"
              }
            },
            nameTextStyle: {
              color: 'rgb(102,102,102)'
            },
            axisTick: {
              show: false
            }
          },
        ],

        series:
         this.seriesData1
        //    [
        //      {
        //        name: '经费数',
        //        type: 'bar',
        //        data: [2000,1234,2222,1111,4444,2345]
        //      },
        //      {
        //        name: '实际经费',
        //        type: 'bar',
        //        yAxisIndex: 1,
        //        data: [1000,2234,2422,2111,3444,2445]
        //      },
        //     {
        //       name: '项目数',
        //       type: 'line',
        //       yAxisIndex: 2,
        //       data: [300,200,100,76,99,65]
        //     },
        //
        //  ]
      });
      const _this = this;
      this.chart.on("click",function (params) {

        _this.$emit('yituoUnitPage',params.name)


      });
    },
    intervala(item){
      let count=1;
      let newitem=item;

      while (true){
        newitem=newitem/10;
        if (newitem<1){
          break
        }else {
          count=count*10;
        }
      }

      let intervala=parseInt(item/count)
      intervala=intervala*count
      return intervala;
    }
  }
}
</script>