Echarts常用配置与组件封装

---

一、常用配置

以下是个人汇总的常用配置

公共部分

图例展示 legend

legend: {
  data: ['时间', '电力消耗'],
  formatter: function (name) {
    return '' + name
  },
  align: 'auto',
  left: '10%'
},

XY轴数据展示

xAxis,yAxis

X轴标签倾斜

xAxis: [
  {
    type: 'category',
    boundaryGap: true,
    axisLabel: {
      interval: 0,
      rotate: 40,
      color: function (value, index) {
        return 'white'
      }
    },
    data: data
  },
],

双轴格式化内容展示

// 左右两个Y轴
yAxis: [
 {
    type: "value",
    name: "时间",
    min: 0,
    position: "left",
    offset: 30,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#5470C6'
      }
    },
    axisLabel: {
      formatter: "{value} 分"
    }
  },
  {
    type: "value",
    name: "电力消耗",
    min: 0,
    position: "right",
    offset: 30,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#91CC75'
      }
    },
    axisLabel: {
      formatter: "{value} kW.h"
    }
  }
],

区域缩放，展示全部数据

dataZoom: [{
  show: true,
    realtime: true,
    start: 0,
    end: max
  },
  {
    type: 'inside',
    realtime: true,
    start: 0,
    end: max
  }
],

提示框，悬浮显示自定义信息 tooltip

tooltip: {
 trigger: "axis",
  axisPointer: {
    type: "cross"
  },
  formatter: function(params) {
    let result = params[0].name + '<br/>'
    params.forEach(function (item) {
      result += item.marker + " " + item.seriesName + " : " + item.value +"<br/>"
    })
    return result
  }
},

柱形图（Bar）

bar配置项

图形上的文本标签、柱形的颜色

{
  name: "电力消耗",
  type: "bar",
  yAxisIndex: 1,
  itemStyle: {
    color: '#91CC75',
  },
  label: {
    show: true,
    position: 'top',
    textStyle: {
      color: '#000',
      fontSize: 12
    },
    formatter: '{c}kW·h'
  },
  data: val1
}

折线图（Line）

line

待更新

扇形图（Pie）

bar

待更新

二、封装Echarts组件

1.定义组件

我们来在 src/components 下创建一个 EchartsBox 文件夹并新建一个 index.vue 页面

HTML页面

<template>
  <div>
    <div ref="myEchart" :style="{ height: height, width: width }"></div>
  </div>
</template>

JS代码

<script>
import * as echarts from 'echarts'

export default {
  name: 'EchartsBox',
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    height: { 
      type: String, 
      default: '50vh' 
    },
    width: { 
      type: String, 
      default: '100%' 
    },
    options: { 
      type: Object, 
      default: () => {} 
    },
    theme: {
      type: String,
      default: 'dark'
    }
  },
  computed: {
    myOptions: function () {
      return this.options
    },
    myHeight: function () {
      return this.height
    },
    myWidth: function() {
      return this.width
    }
  },
  watch: {
    options: {
      handler(oldVal, newVal) {
        this.drawCharts()
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
  },
}
</script>

定义一个初始化 ECharts 的方法，同时我们也可以设置一些点击回调

initChart() {
  this.myChart = echarts.init(this.$refs.myEchart, this.theme)
  this.myChart.on('click', (params) => {
    this.$emit('chartInfo', params)
  })
  this.drawCharts()
},
drawCharts() {
  this.myChart.clear()
  this.myChart.setOption(this.myOptions)
},

再来一个页面摧毁的方法

beforeDestroy() {
 if (!this.myChart) {
    return
  }
  this.myChart.dispose()
  this.myChart = null
},

这样子基本上就可以用了，但是自适应还未解决

2.自适应

自适应的话来安装一个 element-resize-detecto 插件

npm install element-resize-detector --save

在 EchartsBox 中新建一个 chart-resize.js 文件

import ResizeListener from 'element-resize-detector'

export default {
  methods: {
    chartEleResizeListener() {
      const chartInstance = ResizeListener({
        strategy: 'scroll',
        callOnAdd: true
      })
      chartInstance.listenTo(this.$el, () => {
        if (!this.myChart) return
        this.myChart.resize()
      })
    },
    windowResizeListener() {
      if (!this.myChart) return
      this.myChart.resize()
    }
  },
  mounted() {
    window.addEventListener('resize', this.windowResizeListener)
    this.chartEleResizeListener()
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.windowResizeListener)
  }
}

最后在组件中使用 mixins 方式引入

import chartResize from './chart-resize'
...
mixins: [chartResize],

组件完整代码如下

<template>
  <div>
    <div ref="myEchart" :style="{ height: height, width: width }"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import chartResize from './chart-resize'
export default {
  name: 'EchartsBox',
  mixins: [chartResize],
  data() {
    return {
      myChart: null,
    };
  },
  props: {
    height: { 
      type: String, 
      default: '50vh' 
    },
    width: { 
      type: String, 
      default: '100%'
    },
    options: { 
      type: Object, 
      default: () => {} 
    },
    theme: {
      type: String,
      default: 'dark'
    }
  },
  computed: {
    myOptions: function () {
      return this.options
    },
    myHeight: function () {
      return this.height
    },
    myWidth: function() {
      return this.width
    }
  },
  watch: {
    options: {
      handler(oldVal, newVal) {
        this.drawCharts()
      },
      deep: true,
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.myEchart, this.theme)
      this.myChart.on('click', (params) => {
        this.$emit('chartInfo', params)
      })
      this.drawCharts()
    },
    drawCharts() {
      this.myChart.clear()
      this.myChart.setOption(this.myOptions)
    },
    beforeDestroy() {
      if (!this.myChart) {
        return
      }
      this.myChart.dispose()
      this.myChart = null
    },
  },
}
</script>

<style scoped>
</style>

3.食用

可以在 main.js 中引入，注册为全局组件

// Echarts图表盒子组件
import EchartsBox from '@/components/EchartsBox'
...
Vue.component('EchartsBox', EchartsBox)

在 vue 页面使用

<div class="loading-div">
 <echarts-box 
    ref="chart1" 
    :height="'70vh'" 
    :options="option" 
    :theme="chartLight ? 'linght':'dark'">
  </echarts-box>
</div>

---