Wie kapselt das
vue-Projekt Echarts elegant ein? Der folgende Artikel stellt Ihnen eine elegantere Möglichkeit vor, Echarts im Vue-Projekt zu kapseln. Ich hoffe, er wird Ihnen hilfreich sein!
|-- 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图表ChartView, die 4 konfigurierbare Eigenschaften öffnet: width width, height height, ob Automatische Größenänderung autoResize (Standard ist), Diagrammkonfiguration chartOption. Standardmäßig wird Canvas zum Rendern von Diagrammen verwendet. Sie können auch SVG verwenden. ChartView 的组件，开放了4个可配置的属性：宽度width，高度height， 是否自动调整大小autoResize（默认是）， 图表的配置chartOption。
这里默认用Canvas 渲染图表了，也可以用SVG的，自选吧
具体代码如下
<template>
<div class="chart">
<div ref="chart" :style="{ height: height, width: width }" />
</div>
</template>
<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'
// 引入柱状图图表，图表后缀都为 Chart
import {
BarChart
} from 'echarts/charts'
// 引入提示框，标题，直角坐标系组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent
} from 'echarts/components'
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
CanvasRenderer
} from 'echarts/renderers'
// 注册必须的组件
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>这里主要利用require.context，把options里面定义的图表遍历导入，这样就不需要在代码里一个个import了，特别是图表多的时候。
const modulesFiles = require.context('./options', true, /index.js$/)
let modules = {}
modulesFiles.keys().forEach(item => {
modules = Object.assign({}, modules, modulesFiles(item).default)
})
export default modules这里展示下如何封装自己想要的图表
在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) => {
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数据、图表颜色......等都可以作为参数传。
这里全局引入下封装的Echarts组件，方便界面调用。（至于单个引用的方式，就不必多说了）
具体代码如下：
import eChartFn from '@/components/chart/index.js' import ChartPanel from '@/components/chart/index.vue' Vue.component(ChartPanel.name, ChartPanel) Vue.prototype.$eChartFn = eChartFn
这里展示下如何调用封装的bar图表，主要代码如下
<chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" height="100%" />
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，也就几行代码的事情，算是比较方便了。
chartDer spezifische Code lautet wie folgt:
|-- src
|-- components
|-- chart
|-- options // 存放各种图表的option
|-- pie // pie例子
|-- index.js
|-- views
|-- chartTest // 实例所在
|-- index.vue
|-- index.scss
|-- index.jsrequire.context, um die in options definierten Diagramme zu durchlaufen und zu importieren. sodass insbesondere bei vielen Diagrammen kein import hinzugefügt werden muss. 🎜this.chartOpt2 = this.$eChartFn.getPieChart([100, 23, 43, 65], ['#36CBCB', '#FAD337', '#F2637B', '#975FE4'])
🎜🎜Erstellen Sie ein neues Verzeichnis bar unter options und ein neues Verzeichnis bar unter code>index .js-Datei. (Es ist nur eine persönliche Angewohnheit. Ich mag es, wenn jedes Diagramm in einem separaten Ordner gespeichert wird. Wenn Ihnen diese Methode nicht gefällt, können Sie das Verzeichnis verlassen und direkt die js-Datei verwenden, aber components--chart-- index.js muss übereinstimmen (Geändert)🎜🎜Kopieren Sie direkt den option-Code des Beispiels🎜🎜index.jsDer spezifische Code lautet wie folgt🎜<chart-view class="chart-content" :chart-option="chartOpt2" :auto-resize="true" :play-highlight="true" style="max-width:90%" />
testBar-Methode kann Parameter übergeben. Bei spezifischer Verwendung können die Attribute, die für das Diagramm konfiguriert werden müssen, wie z. B. Daten, Diagrammfarbe usw., als Parameter übergeben werden. 🎜|-- src
|-- components
|-- chart
|-- index.js // 实现自动化导入options里的图表option🎜🎜Ja Versuchen Sie, die Größe des Browsers zu verschieben. Sie können sehen, dass das Diagramm beim Ziehen des Browsers automatisch skaliert wird. 🎜Codeübersicht und gehen Sie zu 🎜Code🎜, um danach zu suchen. 🎜chart-Komponente. Legen Sie gemäß der obigen Methode die option-Konfiguration und die zugehörige Verarbeitung des Diagramms im Ordner options ab und Anruf Wenn das Diagramm übergeben wird, besteht die entsprechende Option nur aus wenigen Codezeilen, was relativ praktisch ist. 🎜🎜Die chart-Komponente ist sehr einfach wiederzuverwenden und kann direkt verwendet werden. 🎜评论里说想动态修改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'])
效果如下：
效果图
加上:play-highlight="true"属性就行
<chart-view class="chart-content" :chart-option="chartOpt2" :auto-resize="true" :play-highlight="true" style="max-width:90%" />
主要实现的代码在如下文件的playHighlightAction方法里面，参考的echarts 饼图调用高亮示例 dispatchAction实现的。只是简单的高亮轮询，具体各种实现就自己看文档调样式了。
|-- src
|-- components
|-- chart
|-- index.js // 实现自动化导入options里的图表optionDas obige ist der detaillierte Inhalt vonWie kapselt das Vue-Projekt Echarts elegant? Methodeneinführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
