ECharts的简单封装

EChart.vue 组件

<template>
  <!-- 安装  npm install echarts --save -->
  <!-- //TODO 封装echarts组件 -->
  <!-- 之后通过ref来找到这个dom, 类似id -->
  <div ref="echart" style="height: 100%">echartss</div>
</template>
  
<script>
// todo 引入echarts  ---注意: 引入方式和以前不一样了
import * as echarts from 'echarts'
export default {
  name: 'Echart',
  // 数据是由父组件传来的, 所以需要接受数据
  props: {
    chartData: {
      type: Object,
      //   通过函数返回对象, 这样就避免的其他组件对我们的影响: 为什么, 如何直接设为对象, 那么当使用的时候就会产生多个此对象的引用,任何一处发生更改都会影响到其他地方
      default() {
        return {
          // x轴  --因为y轴数据只需要一个值,这个值来自series,所以y轴不需要额外的处理
          xData: [],
          //   数据--也决定了图标样式即type
          series: []
        }
      }
    },
    // 是否有坐标轴
    isAxisChart: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // echart对象容器,因为官网指明了,必须先初始化一个echart对象,再将数据填入容器
      echart: null,
      //   echart大致分两种: 有坐标轴图表和无坐标轴图标
      axisOption: {
        // 图例 --即图表上面内容
        legend: {
          textStyle: {
            color: '#333'
          }
        },
        // 位置偏移
        grid: {
          left: '20%'
        },
        // 悬浮提示
        tooltip: {
          // 触发时机---当鼠标在坐标轴范围内时
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          data: [],
          //   轴线设置
          axisLine: {
            //   轴线样式
            lineStyle: {
              // 轴线颜色
              color: '#17b3a3'
            }
          },
          //   标签(文本)颜色
          axisLabel: {
            color: '#333'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#17b3a3'
            }
          }
        },
        // 主题色
        color: [
          '#2ec7c9',
          '#b6a2de',
          '#5ab1ef',
          '#ffb980',
          '#d87a80',
          '#8d98b3',
          '#e5cf0d',
          '#97b552',
          '#95706d',
          '#dc69aa',
          '#07a2a4',
          '#9a7fd1',
          '#588dd5',
          '#f5994e',
          '#c05050',
          '#59678c',
          '#c9ab00',
          '#7eb00a',
          '#6f5553',
          '#c14089'
        ],
        series: []
      },
      normalOption: {
        legend: {
          show: false
        },
        tooltip: {
          // 触发时机---鼠标在数据项上时
          trigger: 'item'
        },
        color: ['#0f78f4', '#dd536b', '#9462e5', '#a6a6a6', '#e1bb22', '#39c362', '#3ed1cf'],
        series: []
      }
    }
  },
  computed: {
    //   通过判断父组件传来的isAxisChart来决定使用哪组数据格式(有坐标轴,无坐标轴)
    options() {
      return this.isAxisChart ? this.axisOption : this.normalOption
    }
    // 读取vuex中的isCollapse (侧边栏是否折叠)
    // isCollapse() {
    // return this.$store.state.tab.isCollapse
    // },
  },
  //   监听  --这里监听的chartData是复杂数据类型,需要开启deep
  watch: {
    //   当chartData(父组件传来的)发生变化时渲染图表
    chartData: {
      handler: function() {
        this.initChart()
      },
      deep: true
    }
    // 监听折叠菜单
    // isCollapse() {
    //   setTimeout(() => {
    //     this.resizeChart()
    //   }, 300)
    // },
  },
  // dom渲染完毕时的钩子函数
  mounted() {
    // 监听到resize事件时执行resizeChart
    window.addEventListener('resize', this.resizeChart)
    // 当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。
  },
  // 组件销毁时的钩子函数
  destroyed() {
    // 当组件被销毁时应销毁事件---避免内存泄露
    window.addEventListener('resize', this.resizeChart)
  },
  methods: {
    // 初始化图表
    initChart() {
      // 渲染数据
      this.initChartData()
      // 如果echart对象已经存在则直接渲染图表
      if (this.echart) {
        this.echart.setOption(this.options)
      } else {
        //   如果echart对象不存在则先初始化再渲染图表
        this.echart = echarts.init(this.$refs.echart)
        this.echart.setOption(this.options)
      }
    },
    // 处理图表数据 --依据有无坐标轴分别处理
    initChartData() {
      //   将父组件传来的数据存进data
      if (this.isAxisChart) {
        // 使用有坐标轴的数据属性
        this.axisOption.xAxis.data = this.chartData.xData
        this.axisOption.series = this.chartData.series
      } else {
        // 使用无坐标轴的数据属性
        this.normalOption.series = this.chartData.series
      }
    },
    // 重新计算图表大小
    resizeChart() {
      // 图表存在则重新计算图表大小
      this.echart ? this.echart.resize() : ''
    }
  }
}
</script>
  
<style lang="scss" scoped></style>
  

使用:

<template>
	<div v-show="markerValue" class="showEcharts">
        <e-charts :chart-data="echartData.op2" />
      </div>
</template>
<script>
// 引入组件
import ECharts from "@/components/EChart/EChart.vue";
export default {
    components: {
    ECharts,
  },
    data() {
    	return {
        	// todo 存放图标数据 --在data中定义好属性后,vscode就可以给出智能提示,同时也便于vue动态追踪属性(避免视图不更新)
      		echartData: {
        		// 气压部分的数据
        		op2: {
          		xData: [],
          		series: [],
        		},
                // 如果还有第二组图表的话,继续添加数据对象即可
      		},
    	}
    },
    methods: {
        // 设置图表数据---在合适的地方调用此方法进行数据初始化
    	getMemberInfo() {
            // x轴数据
      		this.echartData.op2.xData = [
        		"00:00",
        		"3:00",
        		"6:00",
        		"9:00",
        		"12:00",
        		"15:00",
        		"18:00",
        		"21:00",
      		];
            // 主要数据以及图表类型
      		this.echartData.op2.series = [
        		{
          			data: [142, 130, 133, 129, 125, 140, 133, 129],
          			name: "收缩压",
          			type: "line",
        		},
        		{
          			data: [82, 70, 66, 75, 83, 77, 85, 68],
          			name: "舒张压",
          			type: "line",
        		},
      		];
    	},
    }
}
</script>

更高效地使用ECharts!!

ECharts的简单封装