运维开发网

分享了vue项目封装echarts的优雅方式

运维开发网 https://www.qedev.com 2022-06-14 17:01 出处:网络
在实际项目开发中,我们会经常与图表打交道,比如?订单数量表、商品销量表、会员数量表等等,它可能是以折线图、柱状图、饼状图等等的方式来展现,下面这篇文章主要给大家介绍了关于vue项目中封装echarts

在实际项目开发中,我们会经常与图表打交道,比如?订单数量表、商品销量表、会员数量表等等,它可能是以折线图、柱状图、饼状图等等的方式来展现,下面这篇文章主要给大家介绍了关于vue项目中封装echarts


场景1、Echarts使用时,都需要写一堆的option,如果每个图表都要写一个,一个文件里面的代码量是很大的2、不方便复用


需求1、方便复用2、展示类的图表,数据与业务、样式分离,只传数据就行3、项目里需要用到的图表会有多个,实现少代码自动化导入,不需要一个个import4、本人图表用在大屏数据可视化的情况比较多,采用的是等比缩放的方式,所以图表也能根据界面缩放自动缩放,不需要手动调用5、图表可配置


代码总览

涉及的文件如下(具体参考代码):

|-- 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的组件,并打开了四个可配置的属性:宽度、高度、是否自动调整大小(默认为)和图表配置chartOption。

这里默认使用Canvas渲染图表,也可以使用SVG。自己选吧。

具体代码如下

lt;templategt; lt;div class="chart"gt; lt;div ref="chart" :style="{ height: height, width: width }" /gt; lt;/divgt;lt;/templategt;lt;scriptgt;// 引入 echarts 核心模块,核心模块提供了 echarts 使用必须要的接口。import * as echarts from 'echarts/core'// 引入柱状图图表,图表后缀都为 Chartimport { BarChart} from 'echarts/charts'// 引入提示框,标题,直角坐标系组件,组件后缀都为 Componentimport { 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 amp;amp; this.chart.clear() } }}lt;/scriptgt;


components--chart--index.js

这里主要使用require.context来遍历和导入options中定义的图表,这样就不需要在代码中一个一个的导入了,尤其是当图表很多的时候。

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的官方示例中随机选择一个示例。


在options下创建一个新的bar目录,在bar目录下创建一个新的index.js文件。只是个人习惯。我喜欢把每个图表存放在一个单独的文件夹里。如果不喜欢这种方式,可以只用js文件代替目录,但是components-chart-index . js index . js要做相应的修改)

复制直接示例的选项代码。

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方法可以作为参数传递。使用时,图表需要配置的属性,如数据资料、图表颜色等。,可以作为参数传递。


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

下面是调用封装条形图的方法。主要代码如下


index.vuelt;chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" height="100%" /gt;


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

效果如下


你可以试着拖动浏览器的大小。如您所见,随着浏览器的拖动,图表也会自动缩放。


代码

只要根据代码概述的目录查找代码即可。



总结

Echarts使用的各种图表,基本都能在Echarts官方举例和Echarts视觉作品分享上找到(已停售)。

上面,图表组件被封装。按照上面的方法,把图表的选项配置和相关处理放在options文件夹下,调用图表时调用相应的选项,就更方便了,只需要几行代码。

图表组件易于重用,可以直接使用。


补充

评论说想动态修改option中的属性,做了个小例子,动态修改饼状图的数据和颜色属性。这是一个可以直接用于生产的例子。直接参考代码就好了,不赘述。如果要修改任何属性,直接传过来就行了。可以传递特定的参数,如果想要修改更多的属性,可以将参数封装到json中。只要知道如何在封装选项中灵活运用就好了。

以下是新的参考代码。

|-- 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使用

翻译



使用方法

add:play-highlight = quot;truequot属性就可以了。

amp;lt;chart-view class="chart-content" :chart-option="chartOpt2" :auto-resize="true" :play-highlight="true" height="100%" /amp;gt;复制代码

主代码在下面文件的playHighlightAction方法中实现,引用echarts饼图调用高亮示例dispatchAction(见文末)。这只是一个简单的高亮轮询,看文档样式取决于每个实现。

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


附:echarts 饼图调用高亮示例 dispatchAction lt;!-- 为ECharts准备一个具备大小(宽高)的Dom --gt; lt;div id="main" style="width: 600px;height:400px;"gt;lt;/divgt; lt;script type="text/javascript"gt; var myChart = echarts.init(document.getElementById('main')); var app = {}; option = { title:{ text:'饼图程序调用高亮示例', left:'center' }, tooltip:{ trigger:'item', formatter:'{a}{b}:{c}{d}%' }, legend:{ orient:'vertical', //图例列表的布局朝向。'horizontal''vertical' left:'left', data:['直接访问','邮件营销','联盟广告','视频广告','搜素引擎'] }, series:[ { name:'访问来源', type:'pie', radius:'55%', center:['50%','60%'], data:[ {value:335,name:'直接访问'}, {value:310,name:'邮件营销'}, {value:234,name:'联盟广告'}, {value:135,name:'视频广告'}, {value:1548,name:'搜索引擎'}, ], emphasis:{ itemStyle:{ shadowBlur:10, shadowOffsetX:0, shadowColor:'rgba(0,0,0,0.5)' } } } ] }; app.currentIndex = -1; setInterval(() =gt; { var dataLen = option.series[0].data.length; //取消之前高亮的图形 myChart.dispatchAction({ type:'downplay', seriesIndex:0, dataIndex:app.currentIndex }); app.currentIndex = (app.currentIndex + 1) % dataLen; //高亮当前图形 myChart.dispatchAction({ type:'highlight', seriesIndex:0, dataIndex:app.currentIndex }); //显示tooltip myChart.dispatchAction({ type:'showTip', seriesIndex:0, dataIndex:app.currentIndex }) }, 1000); option amp;amp; myChart.setOption(option); lt;/scriptgt;



补充3:封装echarts地图,姐妹篇

vue2项目中打包电子地图的优雅方式

总结

这就是这篇关于在vue项目中封装echarts的优雅方法的文章。关于vue封装echarts的更多信息

0

精彩评论

暂无评论...
验证码 换一张
取 消