echarts柱状图和折线图多功能组件

echarts柱状图和折线图多功能组件

<template>
  <!-- 柱状图或柱状图和折线图一起 -->
  <div :id="id" style="width: 100%; height: 100%" />
</template>

<script>
import * as echarts from 'echarts'
export default {
  props: {
    options: {
      type: Object,
      default: function() {
        return {
          data: [], // 数据源
          chartsConfig: {}, // 传入的图标配置
          colorList: [], // 如果有传入的颜色数组以传入的为主
          disableLine: false, // 是否禁用百分比的Y轴，有折线图时默认是有百分比Y轴的
          rotate: 0, // x轴文字旋转角度
          smooth: false, // 折线图是否是光滑曲线
          opacity: 0, // 折线图阴影透明度 0-无阴影
          stack: false, // 柱状图是否叠加
          gradient: false, // 柱子颜色是否渐变
          barBorderRadius: 0, // 柱子的角半径
          barWidth: 0, // 柱子的大小
          isClick: false, // 是否触发点击事件
          clickType: 0, // 点击事件类型 0-点击对应单个柱子 1-点击整列
          wrapIndex: 0, // X轴文字换行显示
          interval: 'auto' // 默认X轴文字自适应展示 0-全部展示 1-间隔展示
        }
      }
    },
    id: {
      type: String,
      default: 'lineCharts_' + Math.random().toFixed(2) * 100
    }
  },
  data() {
    return {
      myCharts: null,
      defaultConfig: {}, // 默认的配置
      finallyConfig: {}, // 最终渲染到页面上的配置
      colorList: this.$setting.chartColors,
      checkedName: '',
      wrapIndex: 100,
      clickType: 0
    }
  },
  watch: {
    options: {
      handler(val) {
        this.options = Object.assign(this.options, val)
        console.log(this.options)
        this.init()
      },
      deep: true
    }
  },
  mounted() {
    const vm = this
    const ele = document.getElementById(vm.id)
    if (!vm.myCharts) {
      vm.myCharts = vm.$echarts.init(ele)
    }
    vm.init()
    window.addEventListener('resize', () => {
      vm.myCharts.resize()
    })
  },
  methods: {
    init() {
      const vm = this
      let isLine = false // 判断是否要百分比的Y轴
      vm.colorList = vm.options.colorList ? vm.options.colorList : vm.colorList
      vm.wrapIndex =
        vm.options.wrapIndex > 0 ? vm.options.wrapIndex : vm.wrapIndex
      vm.clickType = vm.options.clickType ? vm.options.clickType : vm.clickType
      const xArray = [