网站建设有前途吗,自己开网店需要什么流程,html5 响应式音乐网站,响应式网站发展一、前言
前端开发需要经常使用ECharts图表渲染数据信息#xff0c;在一个项目中我们经常需要使用多个图表#xff0c;选择封装ECharts组件复用的方式可以减少代码量#xff0c;增加开发效率。
ECharts图表大家应该用的都比较多#xff0c;基础的用法就不细说了#xff…一、前言
前端开发需要经常使用ECharts图表渲染数据信息在一个项目中我们经常需要使用多个图表选择封装ECharts组件复用的方式可以减少代码量增加开发效率。
ECharts图表大家应该用的都比较多基础的用法就不细说了具体用法参考ECharts官网。
二、封装ECharts组件
为什么要封装组件
避免重复的工作量提升复用性使代码逻辑更加清晰方便项目的后期维护封装组件可以让使用者不去关心组件的内部实现以及原理能够使一个团队更好的有层次的去运行
封装的ECharts组件实现了以下的功能
使用组件传递ECharts中的 option 属性手动/自动设置chart尺寸chart自适应宽高动态展示获取到的后端数据
本文使用的是vue3 typescript的写法。
代码实现
ECharts组件
templatediv :idid :classclassName :style{ height, width } /
/template
script setup langts
//按需导入需要用到的 vue函数 和 echarts
import { onMounted, onBeforeUnmount, defineProps, watch } from vue;
import * as echarts from echarts;
//获取 dom 和 父组件数据 并定义myChart用于初始化图表
let myChart: echarts.ECharts;
const props defineProps({id: {type: String,default: chart,required: true},className: {type: String,default: },width: {type: String,default: 100%,},height: {type: String,default: 300px,},loading: {type: Boolean,default: true,},fullOptions: {type: Object,default: () ({}),required: true},
})
//重绘图表函数
const resizeHandler () {myChart.resize();
}
//设置防抖保证无论拖动窗口大小只执行一次获取浏览器宽高的方法
const debounce (fun: { (): void; (): void; }, delay: number | undefined) {let timer: number | undefined;return function () {if (timer) {clearTimeout(timer);}timer setTimeout(() {fun();}, delay);}
};
const cancalDebounce debounce(resizeHandler, 50);
//页面成功渲染开始绘制图表
onMounted(() {//配置为 svg 形式预防页面缩放而出现模糊问题图表过于复杂时建议使用 CanvasmyChart echarts.init(document.getElementById(props.id) as HTMLDivElement, { renderer: svg })myChart.showLoading({text: ,color: #409eff,textColor: #000,maskColor: rgba(255, 255, 255, .95),zlevel: 0,lineWidth: 2,});if (!props.loading) {myChart.hideLoading();myChart.setOption(props.fullOptions.options, true);}//自适应不同屏幕时改变图表尺寸window.addEventListener(resize, cancalDebounce);
})
//页面销毁前销毁事件和实例
onBeforeUnmount(() {window.removeEventListener(resize, cancalDebounce)myChart.dispose()
})
//监听图表数据时候变化重新渲染图表
watch(() [props.fullOptions.options, props.loading], () {if (!props.loading) {myChart.hideLoading();myChart.setOption(props.fullOptions.options, true);}
}, { deep: true })
/scriptECharts组件的用法:
templateEchartsidechartsheight300px:full-optionsechartsOptions:loadingloading/Echarts
/templatescript setup langts
// 引进Echarts 组件
import Echarts from /components/Echarts/Echarts.vue;
// 引进Echarts 的options配置文件可根据项目模块来创建该配置文件
import chartOption from /components/Echarts/options;const echartsOptions reactive({options: { },init: false
});
// 此处可请求接口来获取数据
// 我的options配置使用的是dataset的形式传进options中的两个参数data图表的数据和dimension图表的维度
onMounted(() {const testData [26,27,24,23];const testDimensions [家用电器,户外运动,汽车用品,手机数码];echartsOptions.options chartOption.testOption(testData, testDimensions);
});
/script
options.ts文件
// 所有用到的 echarts option 都在这里进行配置
const chartOption {// 温湿度折线图testOption(data: any, dimensions: any) {const option {grid: {left: 2%,right: 2%,bottom: 10%,containLabel: true},legend: {top: bottom,textStyle: {color: #999}},dataset: {dimensions: dimensions,source: data},series: [{name: Nightingale Chart,type: pie,radius: [50, 130],center: [50%, 50%],roseType: area,itemStyle: {borderRadius: 1,color: function (params: any) {//自定义颜色const colorList [#409EFF, #67C23A, #E6A23C, #F56C6C];return colorList[params.dataIndex];}}}]};return option;}
}
效果
