介绍为什么需要封装echarts
<李> 我希望这个echarts组件能设计成什么样
<李> 公共组件结构建议
vue单文件代码
& lt; template>
,& lt; div 类=癱hart"祝辞& lt;/div>
& lt;/template>
& lt; script>
{},merge import 得到& # 39;lodash& # 39;;
import echart 得到& # 39;echarts& # 39;;
{},BASIC_OPTION import 得到& # 39;。/default_option& # 39;;
{},COLOR_ARRAY import 得到& # 39;. ./颜色# 39;;
import ResizeListener 得到& # 39;element-resize-detector& # 39;;
export default {
,名字:& # 39;ChartPie& # 39;
,道具:{
,,seriesData: {
,,,类型:数组,
,,,要求:没错,
,,默认值:,(),=祝辞,[]
,,},
,,extraOption: {
,,,类型:对象,
,,默认值:,(),=祝辞,({})
,,}
},
,数据(){
return {才能
,,图:零
,,};
},
,看:{
,,seriesData: {
,才能深:没错,
,,处理程序(),{
,,,this.updateChartView ();
,,}
,,}
},
,安装(){
this.chart 才能=,echart.init(这一点。el美元);
this.updateChartView才能();
window.addEventListener才能(& # 39;调整# 39;,,this.handleWindowResize);
this.addChartResizeListener才能();
},
,beforeDestroy (), {
window.removeEventListener才能(& # 39;调整# 39;,,this.handleWindowResize);
},
,方法:{
,/* *
,,*,将业务数据加入到基础样式配置中
,,*,@returns {对象},完整的echart配置
,,*/assembleDataToOption才能(),{
,,const formatter =, name =祝辞,{
,,,const total =, this.seriesData.reduce ((acc,, cur),=祝辞,acc +, cur.value,, 0);
,,,const data =, this.seriesData.find (item =祝辞,item.name ===,名字),| |,{};
,,,const percent =data.value
,,,,?,“$ {Math.round ((/data.value 总),*,100)}%’
,,,,,,& # 39;0% & # 39;;
,,,return “{| ${名称}}{b | $ {%}} ';
,,};
,,return 合并(
,,,{},
,,,BASIC_OPTION,
,,,{,颜色:COLOR_ARRAY },
,,,{
,,,,传说:,{,formatter },
,,,,系列:,[{,数据:this.seriesData }]
,,,},
,,this.extraOption
,,);
,,},
,/* *
,,*,对图元素尺寸进行监听,当发生变化时同步更新echart视图
,,*/addChartResizeListener才能(),{
,,const instance =, ResizeListener ({
,,,的策略:,& # 39;滚动# 39;
,,,callOnAdd:真实
,,});
,,instance.listenTo (el美元,,(),=祝辞,{
,,,if (! this.chart),返回;
,,,this.chart.resize ();
,,});
,,},
,/* *
,,*,更新echart视图
,,*/updateChartView才能(),{
,,if (! this.chart),返回;
,,const fullOption =, this.assembleDataToOption ();
,,this.chart.setOption (fullOption,,真的);
,,},
,/* *
,,*,当窗口缩放时,echart动态调整自身大小
,,*/handleWindowResize才能(),{
,,if (! this.chart),返回;
,,this.chart.resize ();
,,}
,}
}；
& lt;/script>
& lt; style lang=發ess", scoped>
.chart {
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
今天就跟大家聊聊有关怎么在vue项目中对echarts进行封装,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
为什么需要封装echarts
每个开发者在制作图表时都需要从头到尾书写一遍完整的选择配置,十分冗余
<李>在同一个项目中,各类图表设计十分相似,甚至是相同,没必要一直做重复工作
<李>可能有一些开发者忘记考虑echarts更新数据的特性,以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新,窗口缩放引起echarts图形变形问题
我希望这个echarts组件能设计成什么样
业务数据和样式配置数据分离,我只需要传入业务数据就行了
<李>它的大小要完全由使用者决定
<李>不会因为缩放出现变形问题,而是能很好地自适应
<李>有时候某个图表的样式可能有点不一样,希望能保留自己配置样式的灵活性
<李>无论传入什么数据都能正确地更新视图
<李>如果我传入的数据为空,能展示一个空状态
公共组件结构建议
当你把它书写为一个公共组件时,我我希望它应该是这样:将单独机械的配置表独立成一份文件,暴露一个必要的vue单文件,同时携带一份自述说明文档,当然,文档里面需要有关于你写的组件的使用示例和入参含义说明,这在大型项目中非常重要。
vue单文件代码
echart_pie完整代码如下:
