vue项目怎么优雅的封装echarts？

百变鹏仔 2个月前 (11-27) #echarts

文章标签优雅

vue项目怎么优雅的封装echarts？下面本篇文章给大家介绍一下vue项目中封装echarts的比较优雅的方式，希望对大家有所帮助！

场景

需求

代码总览

涉及的文件如下（具体参考代码）：

|-- 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图表

实现

components--chart--index.vue

这里定义了一个名为ChartView 的组件，开放了4个可配置的属性：宽度width，高度height，是否自动调整大小autoResize（默认是），图表的配置chartOption。

这里默认用Canvas 渲染图表了，也可以用SVG的，自选吧

立即学习“前端免费学习笔记（深入）”；

具体代码如下

<template>  <div>    <div></div>  </div></template><script>// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。import * as echarts from &#39;echarts/core&#39;// 引入柱状图图表，图表后缀都为 Chartimport {  BarChart} from &#39;echarts/charts&#39;// 引入提示框，标题，直角坐标系组件，组件后缀都为 Componentimport {  TitleComponent,  TooltipComponent,  GridComponent} from &#39;echarts/components&#39;// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步import {  CanvasRenderer} from &#39;echarts/renderers&#39;// 注册必须的组件echarts.use(  [TitleComponent, TooltipComponent, GridComponent, BarChart, CanvasRenderer])export default {  name: &#39;ChartView&#39;,  props: {    width: {      type: String,      default: &#39;100%&#39;    },    height: {      type: String,      default: &#39;350px&#39;    },    autoResize: {      type: Boolean,      default: true    },    chartOption: {      type: Object,      required: true    },    type: {      type: String,      default: &#39;canvas&#39;    }  },  data() {    return {      chart: null    }  },  watch: {    chartOption: {      deep: true,      handler(newVal) {        this.setOptions(newVal)      }    }  },  mounted() {    this.initChart()    if (this.autoResize) {      window.addEventListener(&#39;resize&#39;, this.resizeHandler)    }  },  beforeDestroy() {    if (!this.chart) {      return    }    if (this.autoResize) {      window.removeEventListener(&#39;resize&#39;, this.resizeHandler)    }    this.chart.dispose()    this.chart = null  },  methods: {    resizeHandler() {      this.chart.resize()    },    initChart() {      this.chart = echarts.init(this.$refs.chart, &#39;&#39;, {        renderer: this.type      })      this.chart.setOption(this.chartOption)      this.chart.on(&#39;click&#39;, this.handleClick)    },    handleClick(params) {      this.$emit(&#39;click&#39;, 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>

components--chart--index.js

这里主要利用require.context，把options里面定义的图表遍历导入，这样就不需要在代码里一个个import了，特别是图表多的时候。

const modulesFiles = require.context('./options', true, /index.js$/)let modules = {}modulesFiles.keys().forEach(item =&gt; {  modules = Object.assign({}, modules, modulesFiles(item).default)})export default modules

components--chart--options

这里展示下如何封装自己想要的图表

在Echarts官方示例（https://echarts.apache.org/examples/zh/index.html）上随便选了个示例

在options下新建一个bar目录，bar目录下新建一个index.js文件。（个人习惯而已，喜欢每个图表都独立文件夹存放。不喜欢这种方式的，可以不放目录，直接js文件，但是components--chart--index.js要对应修改下）

直接复制示例的option代码

index.js具体代码如下

const testBar = (data) =&gt; {  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}

testBar方法是可以传参的，具体使用的时候，图表所需要配置的属性，如：data数据、图表颜色......等都可以作为参数传。

main.js

这里全局引入下封装的Echarts组件，方便界面调用。（至于单个引用的方式，就不必多说了）

具体代码如下：

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

chartTest

这里展示下如何调用封装的bar图表，主要代码如下

index.vue

<chart-view></chart-view>

index.js

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

效果如下

可以尝试拖动浏览器的大小，可以看到，图表也是随着浏览器的拖动自动缩放的。

代码

按代码总览的目录去代码里找着看就行了。

https://github.com/liyoro/vue-skill

总结

Echarts用到的各种图表，基本上都可以在Echarts官方示例和Echarts可视化作品分享上找到，特别是Echarts可视化作品分享，做项目的时候，可以去参考。

以上，封装了chart组件，按照上述方式，把图表的option配置和相关处理都放options文件夹下面，调用图表时传对应的option，也就几行代码的事情，算是比较方便了。

chart组件很方便复用的，直接就可以使用了。

补充

评论里说想动态修改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></chart-view>

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

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

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

文章推荐

vue项目怎么优雅的封装echarts？

场景

需求

代码总览

实现

components--chart--index.vue

components--chart--index.js

components--chart--options

main.js

chartTest

index.vue

index.js

代码

总结

补充

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

使用方法

详解在React 组件中使用Echarts的正确姿势

PHP 使用Echarts生成数据统计报表详解

canvas使用贝塞尔曲线平滑拟合折线段的方法详解

echarts实现去掉X轴、Y轴和网格线效果实例分享

vue.js将echarts封装为组件一键使用