How does the Vue project elegantly encapsulate echarts? Method introduction

vueHow does the project elegantly encapsulate echarts? The following article will introduce to you a more elegant way to encapsulate echarts in the Vue project. I hope it will be helpful to you!

Scenario

• 1. When using Echarts, you need to write a bunch of option , if you have to write one for each chart, the amount of code in one file will be very large
• 2. It is inconvenient to reuse

Requirements

• 1. Convenient reuse
• 2. For display charts, data is separated from business and style. Just transfer data.
• 3. There will be multiple charts that need to be used in the project. To achieve automatic import with less code, you don’t need to import them one by one. 4. My charts are often used in large-screen data visualization, and the method is proportional scaling, so the charts are also It can automatically scale according to the interface scaling, no need to call it manually. [Related recommendations: vuejs video tutorial]
• 5. Charts can be configured
Code Overview
• The files involved are as follows (specific reference

Code

):

|-- src
    |-- components
        |-- chart
            |-- index.vue    // 图表单文件组件，供界面调用
            |-- index.js    // 实现自动化导入options里的图表option
            |-- options    // 存放各种图表的option
                |-- bar    // 随便一例子
                    |-- index.js
    |-- views
        |-- chartTest    // 实例所在
            |-- index.vue
            |-- index.scss
            |-- index.js
|-- main.js    // 全局引入echarts图表

Implementationcomponents--chart--index.vue

Here defines a file named

ChartView

The component has 4 configurable properties: width

width

, heightheight, whether to automatically adjust the sizeautoResize (default is), chart configurationchartOption. By default, Canvas is used to render the chart. You can also use

SVG

, choose your own The specific code is as follows<pre class="brush:html;toolbar:false;">&lt;template&gt; &lt;div class=&quot;chart&quot;&gt; &lt;div ref=&quot;chart&quot; :style=&quot;{ height: height, width: width }&quot; /&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; // 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。 import * as echarts from &amp;#39;echarts/core&amp;#39; // 引入柱状图图表，图表后缀都为 Chart import { BarChart } from &amp;#39;echarts/charts&amp;#39; // 引入提示框，标题，直角坐标系组件，组件后缀都为 Component import { TitleComponent, TooltipComponent, GridComponent } from &amp;#39;echarts/components&amp;#39; // 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步 import { CanvasRenderer } from &amp;#39;echarts/renderers&amp;#39; // 注册必须的组件 echarts.use( [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer] ) export default { name: &amp;#39;ChartView&amp;#39;, props: { width: { type: String, default: &amp;#39;100%&amp;#39; }, height: { type: String, default: &amp;#39;350px&amp;#39; }, autoResize: { type: Boolean, default: true }, chartOption: { type: Object, required: true }, type: { type: String, default: &amp;#39;canvas&amp;#39; } }, data() { return { chart: null } }, watch: { chartOption: { deep: true, handler(newVal) { this.setOptions(newVal) } } }, mounted() { this.initChart() if (this.autoResize) { window.addEventListener(&amp;#39;resize&amp;#39;, this.resizeHandler) } }, beforeDestroy() { if (!this.chart) { return } if (this.autoResize) { window.removeEventListener(&amp;#39;resize&amp;#39;, this.resizeHandler) } this.chart.dispose() this.chart = null }, methods: { resizeHandler() { this.chart.resize() }, initChart() { this.chart = echarts.init(this.$refs.chart, &amp;#39;&amp;#39;, { renderer: this.type }) this.chart.setOption(this.chartOption) this.chart.on(&amp;#39;click&amp;#39;, this.handleClick) }, handleClick(params) { this.$emit(&amp;#39;click&amp;#39;, params) }, setOptions(option) { this.clearChart() this.resizeHandler() if (this.chart) { this.chart.setOption(option) } }, refresh() { this.setOptions(this.chartOption) }, clearChart() { this.chart &amp;&amp; this.chart.clear() } } } &lt;/script&gt;</pre> components--chart--index.js

Here we mainly use

require.context

to traverse and import the charts defined in

options

, so there is no need to add them in the code import one by one, especially when there are many charts. <pre class="brush:js;toolbar:false;">const modulesFiles = require.context(&amp;#39;./options&amp;#39;, true, /index.js$/) let modules = {} modulesFiles.keys().forEach(item =&gt; { modules = Object.assign({}, modules, modulesFiles(item).default) }) export default modules</pre>components--chart--optionsHere is how to encapsulate the chart you want

In

Echarts official example

(https:/ /echarts.apache.org/examples/zh/index.html)

Create a new

under options

bar

directory, create a new index.js file in the bar directory. (It’s just a personal habit. I like each chart to be stored in a separate folder. If you don’t like this method, you can leave the directory and directly use the js file, but components--chart--index.js must be modified accordingly. Below) Directly copy the option code of the example

index.jsThe specific code 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
}

testBarThe method can pass parameters. When used specifically, the attributes that need to be configured for the chart, such as data data, chart color, etc., can be passed as parameters.

main.jsHere, the encapsulated Echarts component is introduced globally to facilitate interface calls. (As for the method of single reference, there is no need to say more)

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

chartTest

Here is how to call the encapsulated

bar

Chart, the main code is as follows

index.vue<pre class="brush:js;toolbar:false;">&lt;chart-view class=&quot;chart-content&quot; :chart-option=&quot;chartOpt&quot; :auto-resize=&quot;true&quot; height=&quot;100%&quot; /&gt;</pre>index.js

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

The effect is as follows

Yes Try dragging the size of the browser. You can see that the chart automatically scales as the browser is dragged.

Code

Just click the directory of

Code Overview

and go to

Code

to look for it. https://github.com/liyoro/vue-skill

• Summary

Echarts uses various Charts can basically be found on

Echarts official examples

and

Echarts visual work sharing

, especially Echarts visual work sharing. When doing projects, you can go refer to. The above encapsulates the chart component. According to the above method, put the

option

configuration and related processing of the chart under the options folder. Passing the corresponding option when calling the chart only requires a few lines of code, which is relatively convenient. chart The component is very easy to reuse and can be used directly.

补充

评论里说想动态修改option里面的属性，稍微做了个例子，动态修改pie图表的data和color属性，这个是直接生产就可以使用的例子了，直接参考代码就行了，不详细说了。想修改什么属性，直接传参就行。传具体参数可以，想修改的属性多了就把参数封装成一个json传也可以。懂得在封装的option里面灵活使用就行。

以下是新增的参考代码

|-- src
    |-- components
        |-- chart
            |-- options    // 存放各种图表的option
                |-- pie    // pie例子
                    |-- index.js
    |-- views
        |-- chartTest    // 实例所在
            |-- index.vue
            |-- index.scss
            |-- index.js

代码使用都是直接一行调用的

this.chartOpt2 = this.$eChartFn.getPieChart([100, 23, 43, 65], ['#36CBCB', '#FAD337', '#F2637B', '#975FE4'])

效果如下：

补充2：图表高亮轮询，dispatchAction使用

效果图

使用方法

加上:play-highlight="true"属性就行

<chart-view class="chart-content" :chart-option="chartOpt2" :auto-resize="true" :play-highlight="true" height="100%" />

主要实现的代码在如下文件的playHighlightAction方法里面，参考的echarts 饼图调用高亮示例 dispatchAction实现的。只是简单的高亮轮询，具体各种实现就自己看文档调样式了。

|-- src
    |-- components
        |-- chart
            |-- index.js    // 实现自动化导入options里的图表option

（学习视频分享：vuejs教程、web前端）

The above is the detailed content of How does the Vue project elegantly encapsulate echarts? Method introduction. For more information, please follow other related articles on the PHP Chinese website!