project-html/src/views/dashboard/AdviseNameChart.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'
    },
    xAxisDataLeft8:{
      type: Array,
      default: []
    },
    seriesDataLeft8:{
      type: Array,
      default: []
    },
    otTitle: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
    seriesDataLeft8 (newV, oldV) {
      this.initChart()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose();
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons');
      if(!this.seriesDataLeft8.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.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: "3%",
          top: "5%",
          textStyle: {
            fontSize: 22,
            fontFamily: "Microsoft YaHei",
            lineHeight: 30,
            color: "#116bcc",
            fontWeight:"bold"
          },
        },

        // color:['#3398DB'],
        // title: {
        //   text:textname,	// '注册转化漏斗(总体转化率10%)',
        //   left:'center'
        // },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            fontSize:'18',

          }
        },
        // legend: {
        //   data: ['用户数'], //['用户数']
        //   top:30,
        // },
        grid: {
          top: 107,
          left: '2%',
          right: '2%',
          bottom: '8%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01],
          axisLabel: {
            formatter:'{value}个',
            textStyle: {
              fontSize:'14',
              itemSize:'',
               color: "#a4a4a4"
            }
          },
          axisLine: {//x轴线的颜色以及宽度
            show: true,
            lineStyle: {
                color: "#eff2f8",
                width: 0,
                type: "solid"
            }
          },
          axisTick: { show: false },
        },
        yAxis: {
          type: 'category',
          data: this.xAxisDataLeft8,	//['后续操作(3%)','完成注册(98%)','点击注册']
          axisLabel: {
            fontSize:14,
            textStyle: {
              color: "#a4a4a4",
            },
          },
          axisLine: {//y轴线的颜色以及宽度
              show: true,
              lineStyle: {
                  color: "#eff2f8",
                  width: 0,
                  type: "solid"
              },
          },
          axisTick: { show: false },
        },
        series: [
          {
            name: '参与项目数', 	//'用户数',
            type: 'bar',
            stack: 'vistors',
            barWidth: '60%',
            data: this.seriesDataLeft8, //[ 104970, 131744, 630230]
            label:{
              normal:{
                textStyle:{
                  fontSize:18
                }
              }
            },
            itemStyle:{
              normal: {
                //这里是重点
                color: '#5470c6'
              }

            }
          }
        ]
      });
      const _this = this;
      this.chart.on("click",function (params) {
        // console.log(params);
        _this.$emit('userNamePage',params.name)


      });
    }
  }
}
</script>