vue将echarts封装为原生组件

vuechartsgithub地址：vuecharts项目设计官方团队百度EFE团队有一个vue封装的echarts库vue-echarts。但是这个库和自己在vue中的封装没有太大的区别。仍然无法摆脱为图表编写庞大的配置文件。参考BizCharts对G2库的封装方式，封装了echarts。相对来说，API使用起来更方便。使用ts-transformer-keys，echarts导出的XXOption自动生成vue组件props。安装yarnaddvuecharts3Components项目定义的组件包含在下图中，每一个都是一个vue组件。具体组件支持的配置信息参考：https://echarts.apache.org/zh...（可以通过名称首字母小写搜索对应的配置项）DEMOimport'echarts'importEchartsfrom'vuecharts3'const{Chart,Title,Tooltip,Line,Bar,Legend,Grid,XAxis,YAxis}=EchartsexportdefaultdefineComponent({components:{Chart,Title,Tooltip,Bar,Line,Legend,Grid,XAxis,YAxis,},setup(){return{}}})//template自定义组件实现官方切换图片exampleimport{contextSymbol}from'vuecharts3'constTreemapSunburstTransition=defineComponent({name:'TreemapSunburstTransition',inject:[contextSymbol],setup(){const{chart}=inject(contextSymbol)constinterval=ref()conststate=reactive({数据:null,类型:'',})consturl="https://fastly.jsdelivr.net/gh/apache/echarts-website@asf-site/examples/data/asset/data/echarts-package-size.json"fetch(url).then(res=>res.json()).then(data=>{state.data=data.childrenconsole.log('data.value',data.children)interval.value=setInterval(function(){state.type=state.type=='treemap'?'sunburst':'treemap'console.log('state.type',state.type)},3000);})onUnmounted(()=>clearInterval(interval.value))return()=>state.type=='treemap'?h(Treemap,{id:'echarts-package-size',animationDurationUpdate:1000,roam:false,nodeClick:undefined,data:state.data,universalTransition:true,label:{show:true},breadcrumb:{show:false}}):h(Sunburst,{id:'echarts-package-size',radius:['20%','90%'],animationDurationUpdate:1000,nodeClick:undefined,data:state.data,universalTransition:true,itemStyle:{borderWidth:1,borderColor:'rgba(255,255,255,.5)'},标签：{show:false}})}})//模板