Echart-vue best practices

preface

Echart is the front-end development often used to draw the chart js library, Echart using JSON configuration is really easy to use.

However, in actual projects, a large number of charts are involved in the home page or statistical page of the system, and a large number of JSON codes are also filled in the code, which looks very inelegant. Here I share my use of Echart in the VUE project.

Echart version used: 5.0

In Echart 5.0, all parameters and data changes can be done through setOption, ECharts will merge the new parameters and data, and then refresh the chart. If animation is enabled, ECharts finds the difference between two sets of data and uses the appropriate animation to represent the change in data.

Principles of design:

• Package a general echart-Vue basic components, including loading animation, data preloading and so on;
• According to the characteristics of the project, package the option configuration of various types of commonly used EcHART charts

Specific code:

/ / every component
<template>
  <div class="bar-chart" :id="id" :style="style"></div>
</template>

<script>
import { getUId } from '@/util/uuid' // Randomly generate uUID

export default {
  props: {
    chartTitle: {
      type: String.default: ' '
    },
    isLoading: {
      type: Boolean.default: true
    },
    option: {
      type: Object.default: {}}}.data() {
    return {
      chart: undefined.id: undefined}},computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  created() {
    this.id = getUId()
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById(this.id))
    this.chart.setOption(this.option)
  },
  methods: {
      // Update the echart configuration item. If the parameter is a callback function, display the loading animation
    async updateOption(argus) {
      if (typeof argus === 'function') {
        if (this.isLoading) {
          this.chart.showLoading()
        }
        const option = await argus()
        this.chart.setOption(option)
      } else {
        this.chart.setOption(argus)
      }
    }
  }
}
</script>

<style scoped>
</style>
Copy the code

// Bar chart default configuration items
export const BARCHART_OPTION = {
  title: {
    text: The '-'.subtext: The '-'.left: 'center'
  },
  tooltip: {
    trigger: 'axis'.axisPointer: {
      type: 'shadow'}},xAxis: {
    type: 'category'.data: []},yAxis: {
    type: 'value'
  },
  series: [{
    type: 'bar'}}]Copy the code

// used in vue pages
<template>
      <Echart ref="chart" :chart-title=' ' class="chart" :option="Option" :style="{width:'100%',height:'380px'}"/>
</template>
<script>
import Echart from '@/components/echart/index'
import { BARCHART_OPTION } from '@/components/echart/comp/echart-default-option'

export default {
  name: 'StatisWindow'.components: { Echart },
  data() {
    return {
      option: Object.assign({}, BARCHART_OPTION),
    }
  },
  mounted() {
    this.$refs.chart.updateOption({
        // Specific configuration item})}Copy the code