project-html/src/views/dashboard/BarLineChart.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'
    },
    blXData:{
      type: Array,
      default: []
    },
    blLgData:{
      type: Array,
      default: []
    },
    blSerData:{
      type: Array,
      default: []
    },
    blTitle:{
      type:String,
      default: ''
    }
  },
  data() {
    return {
      maxA:null,
      chart: null,
      dates:[
        {
          name: '项目数',
          barWidth:30,
          type: 'bar',
          data: [300,200,100,76,99,65]
        },
        {
          name: '经费数',
          type: 'line',
          yAxisIndex: 1,
          data: [2000,1234,2222,1111,4444,2345]
        }
      ]
    }
  },
  watch: {
    blSerData (newV, oldV) {
      this.initChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null
  },
  methods: {
    initChart() {
      let maxa=300;
      let maxb=50000;
      let intervala=50;
      let intervalb=10000;
      //this.blSerData=this.dates

      let as =this.blSerData
      if (this.blSerData!=undefined&&this.blSerData!=null&&this.blSerData.length>0){
       let arr=this.blSerData[0].data
       let arr2=this.blSerData[1].data
        if (arr.length>0&&arr2.length>0){
          maxa = Math.max.apply(null,arr);
          maxb = Math.max.apply(null,arr2);
          intervala=this.intervala(parseInt(maxa/5))
          intervalb=this.intervala(parseInt(maxb/5))
          let x=parseInt(maxa/intervala)
          let y=parseInt(maxb/intervalb)
          maxa=(x+2)*intervala;
          maxb=(y+2)*intervalb;
        }

     }

      this.chart = echarts.init(this.$el, 'macarons');
      if(!this.blSerData.length){
        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.blTitle+' 项目数、经费数</h3></div>';
        this.$el.innerHTML = html;
        this.$el.removeAttribute('_echarts_instance_')
      }

      this.chart.setOption({
        title: {
          left: "1%",
          top: "1%",
          text: this.blTitle+" 项目数、经费数",
          x:'center',
          y:'bottom',
          textStyle: {
            fontSize: 22,
            fontFamily: "Microsoft YaHei",
            lineHeight: 30,
            color: "#116bcc",
            fontWeight:"bold"
          },
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          confine:true
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 50,
          top: 107,
          containLabel: true
        },
        // toolbox: {
        //   feature: {
        //     dataView: {show: true, readOnly: false},
        //     magicType: {show: true, type: ['line', 'bar']},
        //     restore: {show: true},
        //     saveAsImage: {show: true}
        //   }
        // },
        legend: {
          bottom: "1%",
          // data: ['项目数', '经费数']
          data: this.blLgData,
          itemGap: 40,
          textStyle: {   
            fontSize: 14, //图例字体大小
            color: '#333'
          },

        },

        xAxis: [
          {
            type: 'category',
            data: this.blXData,
           
            axisLabel: {//x轴文字的配置
              show: true,
              textStyle: {
                  color: "#a4a4a4",
              },
              fontSize:'14px'
            },
            axisLine: {//x轴线的颜色以及宽度
                show: true,
                lineStyle: {
                    color: "#eff2f8",
                    width: 0,
                    type: "solid"
                }
            },
            axisTick: { show: false },
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '个数',
            min: 0,
            max: maxa,
            interval: intervala,
            nameTextStyle: {
              color: 'rgb(102,102,102)'
            },
            // axisPointer: {
            //   type: 'shadow'
            // },
            axisLabel: {
              formatter: '{value} ',
              fontSize:14,
              textStyle: {
                  color: "#a4a4a4",
              },
            }, 
                  
            axisLine: {//y轴线的颜色以及宽度
                show: true,
                lineStyle: {
                    color: "#eff2f8",
                    width: 0,
                    type: "solid"
                },
            },
            axisTick: { show: false },
          },
          {
            type: 'value',
            name: '经费',
            min: 0,
            max: maxb,
            interval: intervalb,
            axisLabel: {
              formatter: '{value}万元 ',
              fontSize:14,
              textStyle: {
                  color: "#a4a4a4",
              },
            },
            nameTextStyle: {
              color: 'rgb(102,102,102)'
            },
            axisLine: {//y轴线的颜色以及宽度
              show: true,
              lineStyle: {
                  color: "#eff2f8",
                  width: 0,
                  type: "solid"
              }
            },
          }
        ],
        series: this.blSerData,
        textStyle:{
          fontSize:18,
          lineOverflow : 'none'
        }
      //     [
      //     {
      //       name: '项目数',
      //       type: 'bar',
      //       data: [300,200,100,76,99,65]
      //     },
      //     {
      //       name: '经费数',
      //       type: 'line',
      //       yAxisIndex: 1,
      //       data: [2000,1234,2222,1111,4444,2345]
      //     }
      //   ]
      });
      const _this = this;
      this.chart.on("click",function (params) {

        _this.$emit('yearToPage',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>

<style>
  .a{
    margin-top: 10px;
  }
</style>