封装柱状图组件

该套组件可以复制下来直接使用需要注意的是引入的文件所在位置

1、封装的柱状图组件

        文件所在位置subassembly文件夹下Histogram.vue文件

<template>
  <div :id="id" :style="chartStyle"></div>
</template>

<script>
import Chart from '@/components/mixins/Chart';

export default {
  mixins: [Chart],
  props: {},
  data () {
    return {
    };
  },
  methods: {
    init () {	
      this.chartsDom = this.$echarts.init(document.getElementById(this.id));
      // 每次数据更新都清空一次实例，以便页面重新渲染，否则更新数据没有变化，页面看起来像没动
      document.getElementById(this.id).removeAttribute('_echarts_instance_');
      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#FFF'
            }
          }
        },
        title: {
            top: "3%", // 控制 板块控制器的位置
            left: "4%",
            show: true,
            text:  '标题',

            //居左
            textStyle: {
             textAlign: 'center',
              fontSize: '1rem',
              fontStyle: "normal",
              fontWeight: "20",
              color: "#fff"
            },
             ...this.titleData,
          },
        legend: { 
            data: this.legendData,
            // align:"center",
            top:15,
            textStyle:{
                color:"	#FFFAFA"
            }
         },
        grid: {
            //调整图表位置
            show: false, //是否显示直角坐标系网格
            top: "20%", // 一下数值可为百分比也可为具体像素值
            right: "9%",//
            bottom: "10%",
            left: "8%",
            ...this.gridData,//引用
          },
        xAxis: [
          {
            type: 'category',
            data: this.xAxisData,
            axisPointer: {
              type: 'shadow'
            },
            axisLabel: {//x轴字体样式
              show: true,
              fontSize:'1rem',
              textStyle: {
                color: "#ffffff",
              },
            },
            ...this.xStyle,
          },
         
        ],
        yAxis: this.yData.length === 0 ? [] : this.yData.map((item) => (
          {
            type: 'value',
            axisLabel: {
                 color: '#fff',
                 fontSize: 20,
                               textStyle: {
                                   fontSize:''
                               },
                    },
            min: 'dataMin',
            nameTextStyle: {
              color: '#ffffff',
              align: 'left',
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.1)',
                type: 'dashed',
              },
            },
            axisLine: {
              show: false,
            },
            axisTick: false,
            axisLabel: {
              color: '#fff',
              textStyle: {
                // Y轴字体颜色
                color: "#fff",
              },
            },
            ...item,
          }
        )),
        series: this.seriesData.map((item, index) => (
          {
              barGap:1,//设置两个柱子间距离
            //type: 'scatter',
            ...item,
          }
        )),
      };
      this.chartsDom.setOption(this.option);
      // 绑定点击事件
      this.chartsDom.on('click', (param) => {
        this.$emit('chartClick', param);
      });
    },
  },
};
</script>

 2、引入的Chart.js

        文件对应号Histogram.vue页面中 import Chart from '@/components/mixins/Chart';

        该文件在src下components文件夹下mixins文件夹下Chart.js可以自己修改文件路径对应好位置即可

/*
  echarts组件封装
  id:元素id ，唯一
  chartStyle:容器样式
  colors:颜色
  legendData:图例
  seriesData:所需数据
  xData:X轴显示的数据
  yData:Y轴显示的数据
*/
export default {
  props: {
    // 此处id切记不可传重复
    id: {
      type: String,
      default: '',
    },
    // 样式
    chartStyle: {
      type: Object,
      default: () => {},
    },
    // 标题
    titleData: {
      type: Object,
      default: () => {},
    },
    // 副标题
    subtitleData: {
      type: Object,
      default: () => {},
    },
    // 网格
    gridData: {
      type: Object,
      default: () => {},
    },
    // 颜色
    colors: {
      type: Array,
      default: () => [],
    },
    // 提示框
    tooltipData: {
      type: Object,
      default: () => {},
    },
    // 图例
    legendData: {
      type: Array,
      default: () => [],
    },
    //X轴图例
    xAxisData:{
      type: Array,
      default: () => [],
    },
    // series
    seriesData: {
      type: Array,
      default: () => [],
    },
    // x 轴
    xData: {
      type: Array,
      default: () => [],
    },
    // x 轴样式
    xStyle: {
      type: Object,
      default: () => {},
    },
    // y 轴
    yData: {
      type: Array,
      default: () => [],
    },
    // 缩放
    dataZoomData: {
      type: Array,
      default: () => [],
    },
    // 是否有点击事件
    clickable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      chartsDom: null,
      option: null,
      resizeTimer: null,
      tooltipConfig: {
        backgroundColor: 'rgba(0, 0, 0, 0.7)',
        borderColor: '#333',
        // borderRadius: 10,
        borderWidth: 0,
        shadow: false,
        textStyle: {
          color: '#FFFFFF',
          fontSize: 12,
        },
      },
    };
  },
  watch: {
    // 监听 series变化
    seriesData: {
      handler (newVal) {
        if (newVal) {
          this.$nextTick(() => {
            if (this.chartsDom) {
              // 先销毁，释放内存
              this.chartsDom.dispose();
            }
            this.init();
          });
        }
      },
      deep: true, // 对象内部属性的监听，关键。
    },
  },
  mounted() {
    // 部分暂时隐藏的 chart图，在显示的时候监听不到 seriesData的变化，需由 mounted来调用
    this.$nextTick(() => {
      if (this.chartsDom) {
        // 先销毁，释放内存
        this.chartsDom.dispose();
      }
      this.init();
    });
    window.addEventListener('resize', this.resize);
  },
  beforeDestroy() {
    // 解除监听
    window.removeEventListener('resize', this.resize);
    // 销毁 echart实例
    if (this.chartsDom) {
      this.chartsDom.dispose();
    }
  },
  methods: {
    // 尺寸变化自适应
    resize() {
      if (this.resizeTimer) { clearTimeout(this.resizeTimer); }
      this.resizeTimer = setTimeout(() => { this.chartsDom.resize(); }, 200);
    },
  },
};

2、父页面 

        该页面直接引用组件添加数据该数据使用死数据没有后端交互（想看交互代码请看我下期文章）。

<template>

  <div class="echart" style="background-color:#a9c1ee;height:100vh">
  <Histogram  style="height: 100%;" id="myLineAndBar"  v-bind="mixBarLine" />

</div>
</template>

<script>
import Histogram from '@/components/subassembly/Histogram';

export default {
  components: { Histogram },
  data () {
    return {
      mixBarLine: {
        chartStyle: {
          height: "260px",
        },
        titleData: {//控制标题样式
        //     text:'标题一',
        //     left: '2%',
        //     right:'',
        //     top:'2%',
        // //   fontSize:Math.round(this.screenWidth/70) + 'px',
        //     textStyle: {
        //         color: '#FFF'  //标题颜色
        //     },
        },
        colors: ['#9761e5', '#79d3fd','#31CF9A'],//颜色
        legendData: ['计划产量', '达成产量','完工率'],
        xAxisData:[ "蒋柄凡", "陈栋庆", "龙文", "周红星", "叶小华"],
        xStyle: {

          axisLabel:{
            interval: 'auto',
            rotate: 0, // 旋转角度
            margin: 10, // 标签文字到轴的距离
            fontSize:'1rem',
          }
          
        },
        yData: [
          {
            type: 'value',
            min: 0,
            // max: 100,
            // interval: 20,
            textStyle: {
                // padding:'10%',
              // Y轴字体颜色
              fontSize:10,
              color: "",
            },
            axisLabel: {//y轴字体样式修改
              formatter: '{value}',
              fontSize:'1rem',
              color:"#fff",
            }
          },
          {
            type: 'value',
            name: '',
            min: 0,
            // max: 100,
            // interval: 20,
            textStyle: {
              // Y轴字体颜色
              color: "#fff",
            },
            axisLabel: {
                fontSize:'1rem',
                color:"#fff",
              formatter: '{value} %'
            }
          }
        ],
        gridData:{
            top: '10%', 
            right:'10%',
            left:'10%'
        },
        seriesData: [
          {
            name:'计划产量',
            type: 'bar',
            barWidth: "20%", // 设置柱子的宽度
            itemStyle: {
                normal: {
                    //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                    barBorderRadius:[10, 10, 10, 10]
                }
            },
            backgroundStyle:'rgba(255, 0, 0, 0.3)',
            color: {
            								type: 'linear',
            								// x2=1,y=0,柱子的颜色在水平方向渐变background-image: linear-gradient(to top, #4fb576 0%, #44c489 30%, #28a9ae 46%, #28a2b7 59%, #4c7788 71%, #6c4f63 86%, #432c39 100%);
            								x: 0, // 右
                                            y: 1, // 下
                                            x2: 0, // 左
                                            y2: 0, // 上
            								colorStops: [
            									// 0%处的颜色
            									{
            										offset: 0,
            										color: '#9761e5',
            									},
            									// 50%处的颜色
            									// {
            									// 	offset: 0.5,
            									// 	color: '#28a2b7',
            									// },
            									// 100%处的颜色
            									{
                                                    offset: 1,
            										color: '#9761e5',
            									},
            								],},
            data: [1300,500,7240,2500,2500]
          },
          {
            name:'达成产量',
            type: 'bar',
            barWidth: "20%", // 设置柱子的宽度
            itemStyle: {
                normal: {
                    //这里设置柱形图圆角 [左上角，右上角，右下角，左下角]
                    barBorderRadius:[10, 10, 10, 10]
                }
            },
            backgroundStyle:'rgba(255, 0, 0, 0.3)',
            color: {
            								type: 'linear',
            								// x2=1,y=0,
            								x: 0, // 右
                                            y: 1, // 下
                                            x2: 0, // 左
                                            y2: 0, // 上
            								colorStops: [
            									// 0%处的颜色
            									{
            										offset: 0,
            										color: '#79d3fd',
            									},
            									// 50%处的颜色
            									// {
            									// 	offset: 0.5,
            									// 	color: '#c8699e',
            									// },
            									// 100%处的颜色
            									{
                                                    offset: 0.95,
            										color: '#79d3fd',
            									},
            								],},
            // tooltip: {
            //   valueFormatter: function (value) {
            //     return value + ' ml';
            //   }
            // },
            data: [1258,405,5410,750,450]
          },
          {
            name: '完工率',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %';
              }
            },
            data: [96.77,81,74.72,30,18]
          },
        ],
      },
    };
  },
};
</script>

<style scoped lang="less">

</style>

页面效果图