开发公司vue echarts饼图环形 （随着legend动态显示数据总数）

目录

效果视频

1.安装echarts

npm install echarts --save

2.引入echarts

在 当前vue开发公司文件中引入 echarts 

开发公司开发公司如下图所示：

3.开发公司创建要放入echarts开发公司实例的一个盒子

切记：必须给echarts开发公司实例盒子宽高

如下图所示：

 

 4.创建echarts实例

开发公司这里就此案例对echarts开发公司环形图进行了简单的设置和讲解

  1. <template>
  2.     <div id="main">
  3.  
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8. import * as echarts from 'echarts'
  9. export default {
  10.     data() {
  11.         return {
  12.             echartsSumnum: 0,//数据总数
  13.             option: {
  14.                 // 设置标题
  15.                 title: {
  16.                     text: '',//主标题 (开发公司主标题里面来动态显示开发公司当前数据总数)
  17.                     subtext: '总数',//副标题
  18.                     x: 'center',//标题x轴居中（也可以是: left || center || right || 百分比：xx% || xx(默认单位px)  ）
  19.                     y: 'center',//标题y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px)  ）
  20.                     itemGap: -5,//开发公司主标题和副标题之间的距离(默认为 0)
  21.                     textStyle: {//开发公司设置主标题样式
  22.                         fontSize: 40,
  23.                         color: '#666',
  24.                         backroung: 'blue'
  25.                     },
  26.                     subtextStyle: {//设置副标题样式
  27.                         fontSize: 20,
  28.                         color: "#666"
  29.                     }
  30.                 },
  31.  
  32.                 // 鼠标滑过显示悬浮框
  33.                 tooltip: {
  34.                     // show:true,//鼠标滑过是否显示悬浮框 （默认为true开启 false为关闭）
  35.  
  36.                     //设置悬浮框内展示的内容
  37.                     // a:series.name  b:series.data.name  c:series.data.value  d:当前数据所占数据的百分比
  38.                     formatter: '{a}</br>{b}: {c} </br>所占比例: {d}%',
  39.                 },
  41.                 // 设置图例
  42.                 legend: {
  43.                     orient: 'vertical',//图例的排列方式 （默认 horizontal：水平方向排列 vertical：垂直方向排列）
  44.                     right: 'right',//图标在前文字在后，图例靠右居中显示 （也可以是: left || center || right || 百分比：xx% || xx(默认单位px)  ）
  45.                     y: 'center',//图例y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px)  ）
  46.                     itemStyle: {},//设置图例前面的图标样式
  47.                     textStyle: {//设置图例文字样式
  48.                         fontSize: 14
  49.                     }
  50.                 },
  51.                 // 设置主体
  52.                 series: [
  53.                     {
  54.                         name: 'hello world', //echarts图名字
  55.                         type: 'pie',//echarts 类型
  56.                         minAngle: 5,//echarts数据value为0时默认为value为5
  57.                         radius: ['30%', '40%'],//设置环形图 （ radius: ['设置内圆大小', '设置外圆大小']  不折设置默认为实心圆饼图）
  58.                         center: ['50%', '50%'],//设置饼图位置 （center:['x轴位置','y轴位置']不设置默认在中间）
  59.                         data: [ //echarts数据
  60.                             { value: 80, name: 'ONE' },
  61.                             { value: 50, name: 'TWO' },
  62.                             { value: 120, name: 'THREE' },
  63.                             { value: 210, name: 'FOUR' },
  64.                             { value: 0, name: 'FIVE' }
  65.                         ],
  66.                     },
  68.                 ]
  69.             }
  70.         }
  71.     },
  72.     mounted() {
  73.         // 初始化数据的总数
  74.         this.option.series[0].data.forEach(v => {
  75.             this.echartsSumnum += v.value
  76.         })
  77.         this.option.title.text = this.echartsSumnum
  79.         var chartDom = document.getElementById('main');
  80.         var myChart = echarts.init(chartDom);
  81.         myChart.setOption(this.option);
  83.     }
  84. }
  85. </script>
  87. <style scoped lang="less">
  88. #main {
  89.     width: 800px;
  90.     height: 500px;
  91. }
  92. </style>

5.随着legend动态显示数据总数

下面所示代码为全部代码

  1. <template>
  2.     <div id="main">
  3.  
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8. import * as echarts from 'echarts'
  9. export default {
  10.     data() {
  11.         return {
  12.             echartsSumnum: 0,//数据总数
  13.             option: {
  14.                 // 设置标题
  15.                 title: {
  16.                     text: '',//主标题 (主标题里面来动态显示当前数据总数)
  17.                     subtext: '总数',//副标题
  18.                     x: 'center',//标题x轴居中（也可以是: left || center || right || 百分比：xx% || xx(默认单位px)  ）
  19.                     y: 'center',//标题y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px)  ）
  20.                     itemGap: -5,//主标题和副标题之间的距离(默认为 0)
  21.                     textStyle: {//设置主标题样式
  22.                         fontSize: 40,
  23.                         color: '#666',
  24.                         backroung: 'blue'
  25.                     },
  26.                     subtextStyle: {//设置副标题样式
  27.                         fontSize: 20,
  28.                         color: "#666"
  29.                     }
  30.                 },
  31.  
  32.                 // 鼠标滑过显示悬浮框
  33.                 tooltip: {
  34.                     // show:true,//鼠标滑过是否显示悬浮框 （默认为true开启 false为关闭）
  35.  
  36.                     //设置悬浮框内展示的内容
  37.                     // a:series.name  b:series.data.name  c:series.data.value  d:当前数据所占数据的百分比
  38.                     formatter: '{a}</br>{b}: {c} </br>所占比例: {d}%',
  39.                 },
  41.                 // 设置图例
  42.                 legend: {
  43.                     orient: 'vertical',//图例的排列方式 （默认 horizontal：水平方向排列 vertical：垂直方向排列）
  44.                     right: 'right',//图标在前文字在后，图例靠右居中显示 （也可以是: left || center || right || 百分比：xx% || xx(默认单位px)  ）
  45.                     y: 'center',//图例y轴居中（也可以是: top || center || bottom || 百分比：xx% || xx(默认单位px)  ）
  46.                     itemStyle: {},//设置图例前面的图标样式
  47.                     textStyle: {//设置图例文字样式
  48.                         fontSize: 14
  49.                     }
  50.                 },
  51.                 // 设置主体
  52.                 series: [
  53.                     {
  54.                         name: 'hello world', //echarts图名字
  55.                         type: 'pie',//echarts 类型
  56.                         minAngle: 5,//echarts数据value为0时默认为value为5
  57.                         radius: ['30%', '40%'],//设置环形图 （ radius: ['设置内圆大小', '设置外圆大小']  不折设置默认为实心圆饼图）
  58.                         center: ['50%', '50%'],//设置饼图位置 （center:['x轴位置','y轴位置']不设置默认在中间）
  59.                         data: [ //echarts数据
  60.                             { value: 80, name: 'ONE' },
  61.                             { value: 50, name: 'TWO' },
  62.                             { value: 120, name: 'THREE' },
  63.                             { value: 210, name: 'FOUR' },
  64.                             { value: 0, name: 'FIVE' }
  65.                         ],
  66.                     },
  68.                 ]
  69.             }
  70.         }
  71.     },
  72.     mounted() {
  73.         // 初始化数据的总数
  74.         this.option.series[0].data.forEach(v => {
  75.             this.echartsSumnum += v.value
  76.         })
  77.         this.option.title.text = this.echartsSumnum
  79.         var chartDom = document.getElementById('main');
  80.         var myChart = echarts.init(chartDom);
  82.         let echartsArr = []; //点击图例后所剩的数据名
  83.         let echartsNum = 0;//点击图例后所剩的数据的总和
  84.         // 利用echarts自带的legendselectchanged方法获取点击后的数据(但是这里只能获取到名字)
  85.         myChart.on('legendselectchanged', (params) => {
  86.             echartsArr = [];//将点击后的数组设为空（每点击一次就重新判断添加）
  87.             // 循环点击图例后获取到的名字
  88.             for (let key in params.selected) {
  89.                 // 判断值是否为true 将值为true的名字push到echartsArr数组当中保留起来
  90.                 if (params.selected[key]) {
  91.                     echartsArr.push(key)
  92.                 }
  93.             }
  94.             echartsNum = 0; //将总数的值设为0（每点击一次就重新计算）
  95.             // 循环判断数据的全部数据里的name值是否与我们点击图例后所剩数据的数组相等
  96.             // 相等的话就将其value值进行相加得出点击图例后所剩数据的总数
  97.             this.option.series[0].data.forEach(item => {
  98.                 echartsArr.forEach(v => {
  99.                     if (item.name === v) {
  100.                         echartsNum += item.value
  101.                     }
  102.                 })
  103.             })
  104.             this.option.title.text = echartsNum //最后将其赋值给主标题即可
  105.             this.$nextTick(() => {
  106.                 myChart.setOption(this.option);
  107.             })
  108.         })
  110.         myChart.setOption(this.option);
  112.     }
  113. }
  114. </script>
  116. <style scoped lang="less">
  117. #main {
  118.     width: 800px;
  119.     height: 500px;
  120. }
  121. </style>

有不足的地方还望各位大佬指点一二

 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发