县 住房和城乡建设局网站,重庆奉节网站建设公司哪家好,网站建设包含seo吗,skype在网站上怎么做链接文章目录 1、前言2、思路3、实现 1、前言 最近做的大数据平台#xff0c;里面很多部分用到了ECharts#xff0c;其中有个功能#xff0c;要求将图表分组#xff0c;根据用户选择的组#xff0c;来确定ECharts要显示那些线条和柱子#xff0c;也就是动态的显示option.seri… 文章目录 1、前言2、思路3、实现 1、前言 最近做的大数据平台里面很多部分用到了ECharts其中有个功能要求将图表分组根据用户选择的组来确定ECharts要显示那些线条和柱子也就是动态的显示option.series。
2、思路
找了一下EChart的文档发现可以通过控制option.legend.selected来动态设置无论饼图、折线图、还是柱状图都可以通过这个来控制显示哪些只需要把数据变化set到ECharts实例上就可以了。
3、实现
EChart的legend.selected属性是一个对象可以把series的每一个系列的name作为键名值为Boolean来控制是否显示。然后setOption实例化后的EChart对象就可以实现动态更改显示。
曲线图数据体验地址
option {tooltip: {trigger: axis},legend: {selected: {AAA: false}},xAxis: {type: category,boundaryGap: false,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{name: AAA,type: line,data: [120, 132, 101, 134, 90, 230, 210]},{name: BBB,type: line,data: [220, 182, 191, 234, 290, 330, 310]},{name: CCC,type: line,data: [150, 232, 201, 154, 190, 330, 410]},{name: DDD,type: line,data: [320, 332, 301, 334, 390, 330, 320]}]
};柱状图数据体验地址
option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},legend: {selected: {AAA: false}},tooltip: {trigger: item},yAxis: {type: value},series: [{name: AAA,type: bar,data: [10,20,30,40,50,60,70],},{name: BBB,type: bar,data: [20,30,40,50,60,70,80],},{name: CCC,type: bar,data: [30,40,50,60,70,80,90],},{name: DDD,type: bar,data: [40,50,60,70,80,90,100],},{name: EEE,type: bar,data: [50,60,70,80,90,100,110],}]
};饼图数据体验地址
option {tooltip: {trigger: item},legend: {selected: {AAA: false}},series: [{name: Pie,type: pie,radius: 50%,data: [{ value: 1048, name: AAA },{ value: 735, name: BBB },{ value: 580, name: CCC },{ value: 484, name: DDD },{ value: 300, name: EEE }]}]
};打开体验地址将数据粘贴上去就可以查看效果。 本次分享就到这儿啦我是鹏多多如果您看了觉得有帮助欢迎评论关注点赞转发我们下次见~
往期文章
Vue2全家桶Element搭建的PC端在线音乐网站vue3element-plus配置cdn助你上手Vue3全家桶之Vue3教程助你上手Vue3全家桶之VueX4教程助你上手Vue3全家桶之Vue-Router4教程超详细Vue的九种通信方式超详细Vuex手把手教程使用nvm管理node.js版本以及更换npm淘宝镜像源vue中利用.env文件存储全局环境变量以及配置vue启动和打包命令超详细Vue-Router手把手教程
个人主页
CSDNGitHub简书博客园掘金
