qianshanNucleicContrast/ruoyi-ui/src/views/dashboard/chart/BarChart.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: '300px'
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  data() {
    return {
      chart: null
    }
  },
  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');
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },
      setOptions({ y, x ,data } = {}) {
        // console.log(y,x,data,56)
       this.chart.setOption({
         tooltip: {
           trigger: 'axis',
           axisPointer: { // 坐标轴指示器，坐标轴触发有效
             type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
           }
         },
         // 缩放问题
          dataZoom: [
              {
                bottom:0,
                  type: "slider",
                  show: true,
                  start: 0,
                  end: 70,
                  handleSize: 30,
                  zoomOnMouseWheel: true,
                },
                {
                  type: "inside",
                  start: 0,
                  end: 10,
                }
        ],
         grid: {
           top: 30,
           left: '2%',
           right: '2%',
           bottom: 20,
           containLabel: true
         },
         xAxis: [{
           type: 'category',
           data: x,
           splitLine:{
             show:true
           },
            axisLine: {
                 lineStyle: {
                   color: '#9BA2B0', //x轴的颜色
                    width:'1'
                 },
             },
            axisLabel: {
               interval: 0, // 设置数据间隔
               formatter:function(value){
                   var str = "";
                       var num = 8; //每行显示字数
                       var valLength = value.length; //该项x轴字数
                       var rowNum = Math.ceil(valLength / num); // 行数
                       if(rowNum > 1)
                       {
                           for(var i = 0; i < rowNum; i++)
                           {
                               var temp = "";
                               var start = i * num;
                               var end = start + num;

                               temp = value.substring(start, end) + "\n";
                               str += temp;
                           }

                           return str;
                       }
                       else
                       {
                           return value;
                       }
               },
           },
         }],
         yAxis: [{
           type: 'value',
           axisTick: {
             show: false
           },
            axisLine: {
                               lineStyle: {
                                    type: 'solid',
                                     color: '#9BA2B0',
                                   width:'1'
                               }
                              }
         }],
         series: [
          {
						type: "bar",
						data: y,
						barWidth: '15',
						itemStyle: {
              //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
              barBorderRadius:[10, 10, 10, 10],
							color: {
                x: 0,  //右
                y: 1,  //下
                x2: 0,  //左
                y2: 0,  //上
                colorStops: [{
                		offset: 0, // 颜色的开始位置
                		color: 'rgba(2, 197, 29, 1)' // 0% 处的颜色
                	},
                	{
                		offset: 1, // 颜色的结束位置
                		color: 'rgba(29, 233, 182, 1)' // 100% 处的颜色
                	}
                ]
							},
						},}
          ]
       })
      }
  }
}
</script>