(编辑:jimmy 日期: 2024/12/23 浏览:2)
当你把它书写为一个公共组件时,我我希望它应该是这样:将单独机械的配置表独立成一份文件,暴露一个必要的vue单文件,同时携带一份README说明文档,当然,文档里面需要有关于你写的组件的使用示例和入参含义说明,这在大型项目中非常重要。
echart_pie完整代码如下:
<template> <div class="chart"></div> </template> <script> import { merge } from 'lodash'; import echart from 'echarts'; import { BASIC_OPTION } from './default_option'; import { COLOR_ARRAY } from '../color'; import ResizeListener from 'element-resize-detector'; export default { name: 'ChartPie', props: { seriesData: { type: Array, required: true, default: () => [] }, extraOption: { type: Object, default: () => ({}) } }, data() { return { chart: null }; }, watch: { seriesData: { deep: true, handler() { this.updateChartView(); } } }, mounted() { this.chart = echart.init(this.$el); this.updateChartView(); window.addEventListener('resize', this.handleWindowResize); this.addChartResizeListener(); }, beforeDestroy() { window.removeEventListener('resize', this.handleWindowResize); }, methods: { /** * 将业务数据加入到基础样式配置中 * @returns {Object} 完整的echart配置 */ assembleDataToOption() { const formatter = name => { const total = this.seriesData.reduce((acc, cur) => acc + cur.value, 0); const data = this.seriesData.find(item => item.name === name) || {}; const percent = data.value "less" scoped> .chart { width: 100%; height: 100%; } </style>
index完整代码如下:
<template> <van-empty v-if="isSeriesEmpty" /> <chart-pie v-else v-bind="$props" /> </template> <script> import { isEmpty } from 'lodash'; import ChartPie from './echart_pie.vue'; export default { name: 'EchartPie', components: { ChartPie }, props: ChartPie.props, computed: { isSeriesEmpty() { return ( isEmpty(this.seriesData) || this.seriesData.every(item => !item.value) ); } } }; </script>
正常情况下暴露一个基础配置BASIC_OPTION就可以了
element-resize-detector是干啥的?
这是一个用于监听DOM元素尺寸变化的插件。我们已经对窗口缩放做了监听,但是有时候其父级容器的大小也会动态改变的。
我们对父级容器的宽度进行监听,当父级容器的尺寸发生变化时,echart能调用自身的resize方法,保持视图正常。
当然,这个不适用于tab选项卡的情况,在tab选项卡中,父级容器从display:none到有实际的clientWidth,可能会比注册一个resizeDetector先完成,所以等开始监听父级容器resize的时候,可能为时已晚。
在tab选项卡中很容易出现这种场景:
看起来非常的逗,只有一点点大。解决这个问题,最有效的方法还是在切换选项卡时手动去通过ref获取echart实例,并手动调用resize方法,这是最安全的,也是最有效的。
<template> <div class="echart-pie-wrap"> <echart-pie :series-data="dataList" :extra-option="extraOption" /> </div> </template> <script> import EchartPie from '@/components/echarts/echart_pie'; export default{ components: { EchartPie }, data() { return { dataList: [ { name: "西瓜", value: 20 }, { name: "橘子", value: 13 }, { name: "杨桃", value: 33 } ], extraOption: { color: [ '#fe883a', '#2d90d1','#f75981', '#90e2a9'] } } } } </script> <style lang="less" scoped> .echart-wrapper { width: 300px; height: 300px; margin: 10px auto; } </style>
当数据正常时,效果如下
当无数据时,效果如下
这里面提供的封装只是一种大概的思路,实际项目中,可能会与这里出现偏差。软件开发没有银弹可言,非常适合我这个项目的,可能在细节上不太适合看这篇文章的你。但是思路是类似的,可以对照着做一些调整。
以上就是在vue项目中封装echarts的步骤的详细内容,更多关于vue项目中封装echarts的资料请关注其它相关文章!