v-charts 多个环形图

环形图嵌套

     <ve-pie:data="chartData4":colors="colors4":settings="chartSettings4"height="250px":legend="legends4":tooltip="rtooltip"  // 是否显示提示框  也可直接写  :tooltip-visible='false'></ve-pie>

  data() {//提示框this.rtooltip = { show: false },//配置this.chartSettings4 = {radius: 80,offsetY: 120,hoverAnimation: false,label: { show: false },   //图形上的文本标签labelLine: { show: false },level: [    //多圆饼图时设置["真实响应量", "失效响应量"],["计划响应量", "未计划响应量"],["邀约响应量", "未邀约响应量"]]},this.colors = ["#67aeff","#f3f9ff","#ffaa00","#fff8eb","#3e94e9","#f2f7fe"]return {chartData4: {columns: ["名称", "数量"],rows: []},homementData4 :[]}}methods:{后台返回的数据this.homementData4 = response.data.data;//数据赋值var _dataList = [{名称: "邀约用户",数量: this.homementData4.sInvite.inviteNum},{名称: "未邀约用户",数量:this.homementData4.sInvite.inviteValid +this.homementData4.sInvite.onInviteNum},{名称: "应邀用户",数量: this.homementData4.sInvite.onInviteNum},{名称: "未应邀用户",数量:this.homementData4.sInvite.inviteNum +this.homementData4.sInvite.inviteValid},{名称: "有效用户",数量: this.homementData4.sInvite.inviteValid},{名称: "失效用户",数量:this.homementData4.sInvite.inviteNum +this.homementData4.sInvite.onInviteNum}];this.chartData4.rows = [{名称: "有效用户",数量: this.homementData4.sInvite.inviteValid},{名称: "邀约用户",数量: this.homementData4.sInvite.inviteNum},{名称: "应邀用户",数量: this.homementData4.sInvite.onInviteNum},{名称: "未应邀用户",数量:this.homementData4.sInvite.inviteNum +this.homementData4.sInvite.inviteValid},{名称: "未邀约用户",数量:this.homementData4.sInvite.inviteValid +this.homementData4.sInvite.onInviteNum},{名称: "失效用户",数量:this.homementData4.sInvite.inviteNum +this.homementData4.sInvite.onInviteNum}];this.legends.formatter = function(name) {let _index = 0;        //图例_dataList.forEach((item, i) => {if (item["名称"] == name) {_index = i;}});let arr;arr = [name, _dataList[_index]["数量"]];return arr.join("");};}

v-charts 多个环形图相关推荐

Vue + Echarts(v5.版本)的简单组件封装（折线图、柱状图、散点图、饼/环形图、仪表盘、雷达图）
项目中展示图表的地方很多,不想每次都写一长串的 options配置,就整合了一下常用的配置项,简单封装了一下,也能保证整个系统的图表风格统一,需要调整样式的时候也不用改很多地方 2022-11-07: ...
java 饼图框架_Java 在 Excel 中创建饼图/环形图
import com.spire.xls.*;importcom.spire.xls.charts.ChartSerie;importcom.spire.xls.charts.ChartSeries; ...
如何用pyecharts绘制柱状图，条形图，折线图，饼图,环形图，散点图
简介 pyecharts是一个由百度开源的数据可视化,凭借着良好的互交性,精巧的图表设计,得到了众多开发者的认可,而python是一门富有表达力的语言,很适合用于数据处理.当数据分析遇上数据可视化时, ...
echart的关系图高亮_Echarts 环形图默认高亮展示某个数据
项目中有个图标类的需求,环形图高亮第一条数据.要求第一条数据图块默认展示: 分析:想要获得上图效果需要一下条件 1,进入页面可以触发第1条数据的选中action 2,鼠标指向别的图块时,展示选中数据的 ...
java excel 饼图_Java 在 Excel 中创建饼图/环形图
饼图是Excel中常见的一种圆饼形图表工具,它能够直接以图形的方式展现各个组成部分在整体中所占的比例,从而帮助我们更加快速直观的去分析和理解抽象的数据.而环形图则是饼图的一种变形,在视觉上,环形图去掉 ...
JS，统计图表大全－－三、饼形图（饼图及环形图）
三.饼形图(饼图及环形图) HTML参考 <!DOCTYPE HTML> <html><head><meta charset="utf-8" ...
pyecharts画饼形图,圆形图,环形图(含百分比显示)【python干货】
很多做数据分析可视化的朋友总会遇到一些烦恼,用pyecharts绘制饼形图(圆形图)的时候,总会报错. 废话不多说,下面跟着小编上车吧,教你用pyecharts绘制饼形图(圆形图),环形图从小白到精通 ...
React AntV/G2Plot环形图Pie添加点击事件，即点击图环触发获取相关数据。
步骤: 1.添加相关依赖,引入AntV/G2Plot图表组件 2.添加配置项 3.添加点击事件方法(关键部分:在onReady={onReadyPie},onReady是图表渲染完成执行回调方法,在该 ...
java调用excel在页面生成饼状图_Java 在 Excel 中创建饼图/环形图
饼图是 Excel中常见的一种圆饼形图表工具 ,它能够直接以图形的方式展现各个组成部分在整体中所占的比例,从而帮助我们更加快速直观的去分析和理解抽象的数据.而环形图则是饼图的一种 ...
vue 使用echarts实现3D饼图和环形图
记录一下echarts实现3d饼图和环形图功能## 标题实现效果首先第一步安装echarts和echarts-gl npm install echarts echarts-gl安装最新版本可能会有 ...

v-charts 多个环形图

环形图嵌套

v-charts 多个环形图相关推荐

最新文章

热门文章