scenario

  • 1. When using Echarts, you need to write a bunch of options. If you have to write one for every chart, the amount of code in a file is very large
  • 2. It is not convenient to reuse

demand

  • 1, easy to reuse
  • 2, show the class chart, data and business, style separation, only data on the line
  • 3, the project will need to use more than one chart, to achieve less code automatic import, do not need to import each
  • 4. My chart is often used in large-screen data visualization, and the method of proportional scaling is adopted, so the chart can be scaled automatically according to the interface without manual invocation
  • 5, the chart can be configured

Code overview

The files involved are as follows (specific reference code) :

| - SRC | - components | - chart | -- index. Vue / / component diagram form file, For interface call | -- index. Js / / automated import chart option in the options | - options / / for all sorts of chart option | - bar / / just one example | -- index. Js | - views | - | chartTest / / instance is - index. Vue | -- index. SCSS | -- index. Js. | - the main js / / global introduced echarts chartsCopy the code

implementation

components–chart–index.vue

Here we define a component called ChartView that opens four configurable properties: width, height, autoResize (default), and chartOption for the chart configuration.

By default, you can render the chart in Canvas, but you can also render it in SVG

The specific code is as follows

<template> <div class="chart"> <div ref="chart" :style="{ height: height, width: < span style = "box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; white-space: inherit! Important;" Import * as echarts from 'echarts/core' import {BarChart} from 'echarts/charts' import {BarChart} from 'echarts/charts' Cartesian coordinate system components, Import {TitleComponent, TooltipComponent, GridComponent} from 'echarts/ Components' Import {CanvasRenderer} from 'echarts/renderers' // Register required components echarts.use() [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer] ) export default { name: 'ChartView', props: { width: { type: String, default: '100%' }, height: { type: String, default: '350px' }, autoResize: { type: Boolean, default: true }, chartOption: { type: Object, required: true }, type: { type: String, default: 'canvas' } }, data() { return { chart: null } }, watch: { chartOption: { deep: true, handler(newVal) { this.setOptions(newVal) } } }, mounted() { this.initChart() if (this.autoResize) { window.addEventListener('resize', this.resizeHandler) } }, beforeDestroy() { if (! this.chart) { return } if (this.autoResize) { window.removeEventListener('resize', this.resizeHandler) } this.chart.dispose() this.chart = null }, methods: { resizeHandler() { this.chart.resize() }, initChart() { this.chart = echarts.init(this.$refs.chart, '', { renderer: this.type }) this.chart.setOption(this.chartOption) this.chart.on('click', this.handleClick) }, handleClick(params) { this.$emit('click', params) }, setOptions(option) { this.clearChart() this.resizeHandler() if (this.chart) { this.chart.setOption(option) } }, refresh() { this.setOptions(this.chartOption) }, clearChart() { this.chart && this.chart.clear() } } } </script>Copy the code

components–chart–index.js

In this case, require.context is used to import the diagrams defined in Options, so there is no need to import each diagram in the code, especially when there are many diagrams.

const modulesFiles = require.context('./options', true, /index.js$/)
let modules = {}
modulesFiles.keys().forEach(item => {
  modules = Object.assign({}, modules, modulesFiles(item).default)
})
export default modules
Copy the code

components–chart–options

Here is how to encapsulate the diagram you want

I chose an example at random from the official Echarts example

Create a bar directory under options, and create an index.js file under bar. (It’s just a personal habit. I like to keep each chart in its own folder. Js (components–chart–index.js)

Copy the example option code directly

The code of index.js is as follows

const testBar = (data) => {
  const defaultConfig = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'bar'
    }]
  }

  const opt = Object.assign({}, defaultConfig)
  return opt
}

export default {
  testBar
}
Copy the code

The testBar method can be passed parameters. When the testBar method is used, the properties of the chart need to be configured, such as data data and chart color…… Can be passed as parameters.

main.js

Here the global introduction of the encapsulated Echarts component, convenient interface invocation. (As for the individual references, not much needs to be said.)

The specific code is as follows:

import eChartFn from '@/components/chart/index.js'
import ChartPanel from '@/components/chart/index.vue'
Vue.component(ChartPanel.name, ChartPanel)
Vue.prototype.$eChartFn = eChartFn
Copy the code

chartTest

Here is how to call the encapsulated bar diagram. The main code is as follows

index.vue

<chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" height="100%" />
Copy the code

index.js

export default {
  name: 'chartTestView',
  data() {
    return {
      chartOpt: {}
    }
  },
  mounted() {},
  created() {
    this.chartOpt = this.$eChartFn.testBar()
  },
  methods: {
  },
  watch: {}
}
Copy the code

Results the following

You can try dragging the size of the browser, and you can see that the chart also automatically scales as the browser drags.

code

Go to the code overview directory and look for the code.

conclusion

Echarts uses a variety of charts, basically can be found in the Echarts official examples and Echarts visual works sharing, especially Echarts visual works sharing, when doing projects, you can go to reference.

The chart component is encapsulated above. According to the above method, the option configuration and related processing of the chart are put under the Options folder. When calling the chart, the corresponding option is passed, which is only a few lines of code, so it is more convenient.

The Chart component is easy to reuse and can be used directly.