在Vue中使用Echarts饼状图 内外圈数据联动 具体实现方式分享

最新推荐文章于 2024-04-26 15:39:36 发布
最新推荐文章于 2024-04-26 15:39:36 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： echarts 文章标签： vue.js javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419441/article/details/108472074
版权

 

echarts图表的具体使用方法就不介绍了 可以去看以前的博客

1 创建html

 <div ref="userData" :style="{width: '100%', height: '450px'}"></div>

 2.对饼状图表进行配置

 // 累计用户数图表配置
    getUserData() {
      //首先获取到元素
      this.userDataChart = this.$echarts.init(this.$refs.userData);

      this.userDataOption = {
        tooltip: {
          trigger: "item",
          formatter: " {b}: {c} ({d}%)",
        },
        legend: {
          //调整图例位置
          bottom: 0,
          //调整图例的颜色块大小
          itemWidth: 12,
          itemHeight: 12,
          data: ["初始用户数", "新增用户数", "支付用户数", "未支付用户数"],
        },
        color: [
          "#ff8533",
          "rgb(247, 210, 28)",
          "#85d4d3",
          "rgb(64, 158, 255)",
        ],
        series: [
          {
            type: "pie",

            // 调整图形大小
            radius: [0, "35%"],
            label: {
              position: "inner",
            },
            labelLine: {
              show: false,
            },
            data: [
               //selected来控制当前的这个饼状图是否是选中的状态
              { value: 0, name: "未支付用户数", selected: false },
              { value: 0, name: "支付用户数", selected: false },
            ],
          },
          {
            name: "累积用户",
            type: "pie",
            // 调整图形大小
            radius: ["45%", "65%"],
            label: {
              // b c 这些指的是下边的配置内容
              formatter: " {a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
              borderColor: "#aaa",
              borderWidth: 1,
              borderRadius: 4,
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 24,
                  align: "center",
                },

                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 0.5,
                  height: 0,
                },
                b: {
                  fontSize: 14,
                  lineHeight: 33,
                },
                per: {
                  color: "#eee",
                  backgroundColor: "rgb(23, 94, 222)",
                  padding: [2, 4],
                  borderRadius: 2,
                },
              },
            },
            data: [
                 //selected来控制当前的这个饼状图是否是选中的状态
              { value: 0, name: "新增用户数", selected: true },
              { value: 1, name: "初始用户数" },
            ],
          },
        ],
      };
      this.userDataChart.setOption(this.userDataOption, true);
      var that = this;
       //当点击饼状图的某个部分的点击函数
      this.userDataChart.on("click", function (param) {
        if (param.data.name == "初始用户数") {
          that.externalChecked = param.data.name;
          that.interiorChecked = "";
          //如果点击初始化用户
          // 那么就让新增和内圈都为false
          // userType=0 并且 让 paid为空
          // 因为此时 我只想知道初始化用户的列表数据
          // 调用 列表接口 和 图标数据接口 让内圈为初始化用户下的内圈
          that.userDataOption.series[1].data[0].selected = false;
          that.userDataOption.series[1].data[1].selected = true;
          that.userDataOption.series[0].data[1].selected = false;
          that.userDataOption.series[0].data[0].selected = false;
          that.userType = 0;
          that.paid = "";
           //对以上进行判断之后 调用函数 刷新图表数据和table表格显示数据
          that.getUserList(false);
          that.getUserStatistics();
        } else if (param.data.name == "新增用户数") {
          that.externalChecked = param.data.name;
          that.interiorChecked = "";
          //如果点击新增用户数
          // 那么就让新增和内圈选择状态都为false
          // userType=1 并且 让 paid为空
          // 因为此时 我只想知道新增用户数的列表数据
          // 调用 列表接口 和 图表数据接口 让内圈为新增用户数下的内圈
          that.userDataOption.series[1].data[0].selected = true;
          that.userDataOption.series[1].data[1].selected = false;
          that.userDataOption.series[0].data[1].selected = false;
          that.userDataOption.series[0].data[0].selected = false;
          that.userType = 1;
          that.paid = "";
 //对以上进行判断之后 调用函数 刷新图表数据和table表格显示数据
          that.getUserList(false);
          that.getUserStatistics();
        }
        //如果内圈选中为支付 并且外圈新增为选中状态
        //就让内圈支付选中 另一为false
        //请求的参数为1
        if (
          param.data.name == "支付用户数" &&
          that.userDataOption.series[1].data[0].selected == true
        ) {
          that.interiorChecked = param.data.name;
          that.userDataOption.series[0].data[1].selected = true;
          that.userDataOption.series[0].data[0].selected = false;
          that.paid = 1;
             //对以上进行判断之后 调用函数 刷新表格显示数据
          that.getUserList(false);
          //如果内圈选中为未支付 并且外圈新增为选中状态
          //就让内圈未支付选中 另一为false
          //请求的参数为0
        } else if (
          param.data.name == "未支付用户数" &&
          that.userDataOption.series[1].data[0].selected == true
        ) {
          that.interiorChecked = param.data.name;
          that.userDataOption.series[0].data[1].selected = false;
          that.userDataOption.series[0].data[0].selected = true;
          that.paid = 0;
//对以上进行判断之后 调用函数 刷新表格显示数据
          that.getUserList(false);
        }
        //如果内圈选中为支付 并且外圈初始为选中状态
        //就让内圈支付选中 另一为false
        //请求的参数为1
        if (
          param.data.name == "支付用户数" &&
          that.userDataOption.series[1].data[1].selected == true
        ) {
          that.interiorChecked = param.data.name;
          that.userDataOption.series[0].data[1].selected = true;
          that.userDataOption.series[0].data[0].selected = false;
          that.paid = 1;
//对以上进行判断之后 调用函数 刷新表格显示数据
          that.getUserList(false);
          //如果内圈选中为未支付 并且外圈初始为选中状态
          //就让内圈支付选中 另一为false
          //请求的参数为1
        } else if (
          param.data.name == "未支付用户数" &&
          that.userDataOption.series[1].data[1].selected == true
        ) {
          that.interiorChecked = param.data.name;
          that.userDataOption.series[0].data[1].selected = false;
          that.userDataOption.series[0].data[0].selected = true;
          that.paid = 0;
//对以上进行判断之后 调用函数 刷新表格显示数据
          that.getUserList(false);
        }
      });
    },

3.在当前钩子中 进行 自适应宽高 

 mounted() {
    this.getUserData();
    
    // 自适应
    window.onresize = () => {
      this.userDataChart.resize();
     
    };
  },

4.监听图表数据的变化 做到数据变化图表显示改变 

// 监听图表数据的变化
  watch: {
    userDataOption: {
      handler(newVal, oldVal) {
        if (this.userDataChart) {
          // 如何有变化 就获取最新的数据 并且渲染
          this.userDataChart.setOption(newVal);
        } else {
          // 如何无变化 还是老数据
          this.userDataChart.setOption(oldVal);
        }
      },
      deep: true,
    },
  },

5.获取到图表中的数据 然后赋值给图表配置项中的data

 //用户统计图表数据
    getUserStatistics() {
      this.allStartDate = moment(this.dateValue[0]).format(
        "YYYY-MM-DD 00:00:00"
      );
      this.allEndDate = moment(this.dateValue[1]).format("YYYY-MM-DD 23:59:59");

      let data = {
        from: this.allStartDate,
        to: this.allEndDate,
        //这里的传递的参数 如果外圈为初始化 就传递初始化的参数
        //内圈就为初始化下的参数
        userType: this.userType,
      };
      Vue.axios({
        method: "POST",
        serviceId: "mall",
        url: "/datacentics",
        data,
      })
        .then((res) => {
          if (res.success) {
                //把获取的数据赋值过去 这样子 图表就已经得到了显示的数值
            this.userDataOption.series[0].data[0].value = res.result.noPayUsers;
            this.userDataOption.series[0].data[1].value = res.result.payUsers;
            this.userDataOption.series[1].data[1].value = res.result.totalUsers;
            this.userDataOption.series[1].data[0].value = res.result.newUsers;
          } else {
            Message.error("获取用户统计数据失败,请稍后重试!");
          }
        })
        .catch((err) => {
          Message.error("获取用户统计数据失败,请稍后重试!");
        });
    },

6.获取右侧表格中的数据  默认显示的数据 为新增用户的数据

 //获取用户列表
    async getUserList(reload, page) {
      //  判断 是否为首次加载
      if (reload) {
        if (!page) {
          // 获取当前local中的data数据
          let data = await this.$fetchParams("getUserList");
          if (data) {
            this.pagination.currentPage = data.currentPage;
            this.pagination.showPageSize = data.pageSize;
            this.pagination.PageNumList = data.page;
            this.pagination.totalList = data.total;
          }
        }
      }
      if (!reload && !page) {
        this.pagination.PageNumList = 1;
        this.pagination.showPageSize = 10;
        this.pagination.currentPage = 1;
      }
      this.allStartDate = moment(this.dateValue[0]).format(
        "YYYY-MM-DD 00:00:00"
      );
      this.allEndDate = moment(this.dateValue[1]).format("YYYY-MM-DD 23:59:59");
      let data = {
        from: this.allStartDate,
        to: this.allEndDate,
        //根据userType来控制显示的是哪个饼图的数据
        userType: this.userType,
        paid: this.paid,
        size: this.pagination.showPageSize,
        page: this.pagination.PageNumList,
      };
      Vue.axios({
        method: "POST",
        serviceId: "mall",
        url: "/datacsList",
        data,
      })
        .then((res) => {
          if (res.success) {
            this.pagination.currentPage = res.result.current;
            this.pagination.totalList = res.result.total;
            this.userTableData = res.result.records;
          } else {
            Message.error("获取用户统计列表数据失败,请稍后重试!");
          }
        })
        .catch((err) => {
          Message.error("获取用户统计列表数据失败,请稍后重试!");
        });
    },

 

连风都不记得我
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
echarts 嵌套饼图 内外圈图例联动
qq_33518042的博客
09-21 6447
最近在使用echarts 发现其功能真心不错。 但是在使用嵌套饼图时，发现内外圈无法联动，尤其将图例设置为内圈时，点击图例取消内圈饼图，外圈没有办法联动。 为了实现内外圈同时变化，这里发现一个echarts的小技巧，就是其控制都是通过控制series中data的name，那么将内外圈需要同事控制的部分设置为一样的名字，就可以实现内外圈联动。 但是在name相同时，会使默认分配颜色时相同，使颜
echarts 外环内圈效果图、堆叠柱状图
smile2333的博客
05-14 771
import * as echarts from 'echarts'; var chartDom = document.getElementById('main'); var myChart = echarts.init(chartDom); var option; const startAlpha = 1; const endAlpha = 0; const color = [ {r:55, g: 196, b: 255, }, {r:126, g: 90, b: 187,},
vue echarts 饼图(环形图)
最新发布
Z18834071903的博客
04-26 686
vue echarts 饼图(环形图)
Echarts 饼图 内饼图和外环图联动效果
成长的笨熊
04-02 3468
// 饼图容器样式定义 <style> #echartsPieRing{ height: 500px; width: 800px; } </style> <template> <div id='echartsPieRing'></div> </template> <script> ...
【echarts】04、echarts+vue2 - 折线图
汪同学丶的博客
07-26 574
基于echarts5.x和vue2的折线图
vue + echarts 矩形图 饼状图 的相关配置
lianxin19900610的博客
08-01 3904
&lt;template&gt; &lt;div class="hello"&gt; &lt;ul&gt; &lt;li v-for="(key ,index) in [1,2]" @click="changeData(index)"&gt;第{{key}}条数据&lt;/li&gt; &lt;/ul&gt; &lt;div
vue echarts 圆环饼图
qq_40295815的博客
01-06 1204
通过控制起始角度实现 <template> <div style="height:100%;width:100%;"> <div id="myCharted" :style="{width: '100%', height: '100%'}"></div> </div> </template> <s...
在Vue中使用echarts的实例代码（3种图）
08-30
"在Vue中使用Echarts的实例代码（3种图）" 本篇文章主要介绍了在Vue中使用Echarts的实例代码，总共展示...本篇文章主要介绍了在Vue中使用Echarts的实例代码，展示了三种不同的图表，并且讨论了数据存储和请求的方式。
在Vue中使用Echarts实例图的方法实例
10-14
主要给大家介绍了关于如何在Vue中使用Echarts实例图的相关资料，文中介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在Vue中使用echarts的方法
08-28
在实际项目中，我们经常需要将ECharts集成到Vue项目中，以实现数据的可视化展示。因此，本文将详细介绍在Vue中使用ECharts的方法。 全局引入ECharts 首先，我们可以使用NPM安装ECharts，执行以下命令： ``` npm ...
在vue中使用echarts(折线图的demo,markline用法)
10-15
在Vue项目中集成ECharts，可以利用其丰富的图表功能来展示数据。本示例主要讲解如何在Vue中创建一个折线图，并应用markline（标记线）功能，以实现基准线的效果。 首先，确保你已经安装了Vue CLI，然后通过npm或...
带阴影的3d效果饼图
04-30
VC2010下用QT编写的带阴影的3d效果饼图画法小程序，双击可移出饼角，可改变饼角的颜色。附件是源码及说明，可执行程序请自行编译。
vue中使用echarts实现地图区域颜色，省市切换，根据数据实现区的打点效果
11-17
内容概要：vue中使用echarts实现省市地图绘制，根据数据不同显示不同区域颜色；实现省市切换效果。根据数据实现区的打点效果。 适合人群：具备一定编程基础，工作1-3年的研发人员 能学到什么： 1、使用echarts实现...
echarts关于内嵌饼状图的内外两图的颜色和结果相对应的问题
weixin_34268843的博客
08-26 2263
2019独角兽企业重金招聘Python工程师标准>>> ...
vue2+ts+vue-echarts 画环形图
风一样的少年
03-23 862
注意一下 各位看清一下，是vue-echarts呀。这里是个坑，因为还是有v-echarts、vue-echarts-ts 等等，他们竟然不是一个东西。 使用过程 安装包 yarn add echarts vue-echarts # 当运行的时候，会提示你缺少@vue/composition-api yarn add @vue/composition-api yarn add default-passive-events 导入包 import VueECharts from 'vue-echart
echart图表环形图（饼图）
热门推荐
ProgramarQin的博客
02-03 1万+
最近由于项目需要接触了echart图表插件，由于echart表格配置项比较多，因此整理了自己遇到的一些图表并且粘贴出代码，echarts官网API http://echarts.baidu.com/option.html#title 首先，用图示解释几个配置option属性 tooltip:legend:labelLine: 需要实现的效果图如下，直接贴上代码，各配置项已在代码中通过注释说明
vue+echarts封装环图；
weixin_45579925的博客
07-28 295
前端可视化数据环图封装 html <template> <div class="container"> <div ref="loop" style="" :style="{ width: `${width}`, height: `${height}` }" ></div> <div v-if="legendSelect" :style="{ top: styleD
echarts环形图数据展示
m0_46383567的博客
04-26 1422
<template> <div class="PassengerOringin"> <div class="title">乘客来源</div> <div id="piechart" style="width:230px;height:230px;"></div> </div> </template> <script> import echarts from..
在vue中使用echarts实现饼状图动态数据
05-26
实现饼状图动态数据的过程分为两步： 1. 初始化echarts实例，并设置饼状图的基本配置。 2. 在Vue组件中通过异步请求数据，将数据传入到echarts实例中，动态更新饼状图的数据。 下面是一个简单的示例代码： ```html <template> <div id="pieChart" style="width: 100%; height: 400px;"></div> </template> <script> import echarts from 'echarts'; export default { data() { return { pieChart: null, pieData: [ { name: 'A', value: 0 }, { name: 'B', value: 0 }, { name: 'C', value: 0 }, ], }; }, mounted() { this.initPieChart(); }, methods: { initPieChart() { // 初始化echarts实例 this.pieChart = echarts.init(document.getElementById('pieChart')); // 设置饼状图基本配置 this.pieChart.setOption({ title: { text: '饼状图示例' }, tooltip: { trigger: 'item' }, legend: { data: ['A', 'B', 'C'] }, series: [ { name: '数据', type: 'pie', radius: '55%', center: ['50%', '60%'], data: this.pieData, itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)', }, }, }, ], }); }, async fetchData() { // 异步请求数据 const response = await fetch('http://example.com/data'); const data = await response.json(); // 更新饼状图数据 this.pieData = [ { name: 'A', value: data.a }, { name: 'B', value: data.b }, { name: 'C', value: data.c }, ]; this.pieChart.setOption({ series: [ { data: this.pieData, }, ], }); }, }, }; </script> ``` 在mounted方法中初始化echarts实例，并在initPieChart方法中设置饼状图的基本配置。然后在fetchData方法中异步请求数据，将数据传入到echarts实例中，动态更新饼状图的数据。最后，在模板中渲染一个div元素作为echarts的容器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值