每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置，十分冗余
在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作
可能有一些开发者忘记考虑echarts更新数据的特性，以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新，窗口缩放引起echarts图形变形问题
我希望这个echarts组件能设计成什么样业务数据和样式配置数据分离，我只需要传入业务数据就行了
它的大小要完全由使用者决定
不会因为缩放出现变形问题，而是能很好地自适应
有时候某个图表的样式可能有点不一样，希望能保留自己配置样式的灵活性
无论传入什么数据都能正确地更新视图
如果我传入的数据为空，能展示一个空状态
公共组件结构建议当你把它书写为一个公共组件时，我我希望它应该是这样：将单独机械的配置表独立成一份文件，暴露一个必要的vue单文件，同时携带一份README说明文档，当然，文档里面需要有关于你写的组件的使用示例和入参含义说明，这在大型项目中非常重要。
完整代码如下：
<template><div class="chart"></div>
</template>
<script>
import { merge, isEmpty } from "lodash";
import echart from "echarts";
import { BASIC_OPTION, EMPTY_OPTION } from "./default_option";
export default {
props: {
// 业务数据
dataList: {
type: Array,
default: () => []
},
// 特殊的样式定制
extraOption: {
type: Object,
default: () => ({})
}
},
data() {
return {
chart: null
};
},
methods: {
/**
* 将业务数据加入到基础样式配置中
* @returns {Object} 完整的echart配置
*/
assembleDataToOption() {
return merge(
{},
BASIC_OPTION,
{
series: [{ data: this.dataList }]
},
this.extraOption
);
},
/**
* 更新echart视图
*/
updateChartView() {
if (!this.chart) return;
const fullOption = isEmpty(this.dataList)
? EMPTY_OPTION
: this.assembleDataToOption();
this.chart.setOption(fullOption, true);
},
/**
* 当窗口缩放时，echart动态调整自身大小
*/
handleWindowResize() {
if (!this.chart) return;
this.chart.resize();
}
},
watch: {
dataList: {
deep: true,
handler: () => this.updateChartView
}
},
mounted() {
this.chart = echart.init(this.$el);
this.updateChartView();
window.addEventListener("resize", this.handleWindowResize);
},
beforeDestroy() {
window.removeEventListener("resize", this.handleWindowResize);
}
};
</script>
<style lang="less" scoped>
.chart {
width: 100%;
height: 100%;
}
</style>
关于源码的说明