使用Vue和Echarts实现圆环百分比展示

最新推荐文章于 2024-04-29 21:35:15 发布
最新推荐文章于 2024-04-29 21:35:15 发布
阅读量889 收藏
点赞数
文章标签： vue.js echarts javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/piaoyiren/article/details/132641307
版权

我在上一篇文章（用echarts实现的一个圆环图标）中提到过用html和echarts实现改功能，这篇文章用Vue来实现，效果图如下：

vue的代码如下：

<template>
<el-container>
    <el-row :span="2">
        <el-col><div id="myChart" style="width: 500px; height: 360px;"></div></el-col>
    </el-row>
    <!-- <el-row>
        <el-col>
            <div class="p1">
                 <template slot="t1" ></template> 
                <div class="b1"></div>
            </div>
        </el-col>
        <el-col>
            <div class="s1">
                <div class="st1"> </div>
                <div class="sb1"></div>
            </div>
        </el-col>
        <el-col>
            <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </el-col>
        <el-col>
            <div class="s1">
            <div class="st1"> </div>
            <div class="sb1"></div>
          </div>
        </el-col>
    </el-row> -->
    <div v-for="(item,index) in names" :key="index">
      
    <el-row>
        <el-col>
            <div class="p1">
                <div class="t1"></div>
                <div class="b1"></div>
            </div>
        </el-col>
        <el-col>
            <div class="s1">
                <div class="st1"> </div>
                <div class="sb1"></div>
            </div>
        </el-col>
        <el-col>
            <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </el-col>
        <el-col>
            <div class="s1">
            <div class="st1"> </div>
            <div class="sb1"></div>
          </div>
        </el-col>
    </el-row>
    </div>
    <!-- <el-row>
        <el-col>
            <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </el-col>
        <el-col>
            <div class="s1">
            <div class="st1"></div>
            <div class="sb1"></div>
          </div>
        </el-col>
        <el-col>
            <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </el-col>
        <el-col>
            <div class="s1">
            <div class="st1"> </div>
            <div class="sb1"></div>
          </div>
        </el-col>
    </el-row> -->
    
</el-container>
      <!-- <table  style="height:600px;width:1500px;">
        <tr >
        <td rowspan="3" ><div id="myChart" style="width: 500px; height: 500px;"></div></td>
        </tr>
        <tr >
        <td>
        <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </td>
        <td>
        <div class="s1">
            <div class="st1">进行中 </div>
            <div class="sb1">33.33%</div>
          </div>
        </td>
        <td>
        <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </td>
        <td>
        <div class="s1">
            <div class="st1">已完成 </div>
            <div class="sb1">16.67%</div>
          </div>
        </td>			
        </tr>
        <tr >
        <td>
        <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </td>
        <td>
        <div class="s1">
            <div class="st1">未开始</div>
            <div class="sb1">25%</div>
          </div>
        </td>
        <td>
        <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </td>
        <td>
        <div class="s1">
            <div class="st1">延期 </div>
            <div class="sb1">25%</div>
          </div>
        </td>			
</tr>

      </table> -->

</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'HelloWorld',
  
  data(){
    return{
      initData: [{name:'data1',value:80},{name:'data2',value:40},{name:'data3',value:60},{name:'data4',value:60}],
      names:["data1","data2","data3","data4"], // 获取名称
      values: [80,40,60,60], // 获取数值
      total : 0, // 总和
      color:['#5C73C7','#678456','#F6C752','#E76564'],
      refers:[],
      yAxis:[],
      states:["进行中","未开始","已完成","延期"],
      percent:[]
    }
  },
 mounted(){
  this.initMethod();
 },   
  methods:{
    
    initMethod(){
      for(let i=0;i<this.values.length;i++){
        this.total+=this.values[i];
      }
      for(let i=0;i<this.values.length;i++){
        this.percent[i]=Math.round(this.values[i]/this.total*10000)/100+"%"
      }
      for(let i=0;i<this.initData.length;i++){
        this.refers.push({
            type: 'pie',
            clockWise: false, //顺时加载
            color:this.color[i],
            hoverAnimation: false, // 鼠标移入变大
            radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
            center: ['45%','50%'],
            itemStyle: {
                normal:{
                    formatter:this.initData[i].name,
                    label: {
                        show: false,
                        position: 'outside'
                    },
                    labelLine: {
                        show: true,
                    },
                    borderWidth: 18
                }
            },
            data: [{
                name: this.initData[i].name,
                value: this.initData[i].value,
                itemStyle: {
                    
                   /* normal: { // 渐变色
                        color: new echarts.graphic.LinearGradient(0,1,0,0,[{
                            offset: 0,
                            color: color[i][0]
                        },{
                            offset: 1,
                            color: color[i][1]
                        }])
                    }*/
                },
            },{ // 阴影段
                name: '',
                value: this.total - this.initData[i].value,
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                tooltip: { // 不显示提示框
                    show: false
                },
                hoverAnimation: false // 鼠标移入变大
            }]
        })
        this.refers.push({
            name: '',
            type: 'pie',
            clockWise: false, //顺时加载
            z: 1, // 层级，默认为 2，z小的会被z大的覆盖住
            hoverAnimation: false, // 鼠标移入变大
            radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
            center: ['45%','50%'], // 位置
            label: {
                show: false
            },
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 18
                }
            },
            data: [{ // 阴影的75%
                value: 10,
                itemStyle: {
                    normal: {
                        color: 'rgba(1,179,238,0.1)'
                    }
                },
                tooltip: {
                    show: false
                },
            },{ // 阴影的最后25%，透明
                value: 0,
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)',
                        borderWidth: 0
                    }
                },
                tooltip: {
                    show: false
                },
            }]
        })
        this.yAxis.push(this.initData[i].name)
    }
  
    let myChart = echarts.init(document.getElementById('myChart'))
    let option = {
      // 提示框
      tooltip: {
          show: true,                 // 是否显示提示框
          formatter: '{b} </br> 攻击{c}次 </br> 占比{d}%'      // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
      },
      // 标题
      title: [{
        text: '图表',
        top:'5%',
        left:'3%',
        textStyle:{
            color: '#000',
            fontSize:18,
        }
      }],
        /*legend: {
            show: true,
            x: 'center',
            bottom: '15%',
            itemGap: 20,
            textStyle: {
                fontSize: 14,
                color: '#fff'
            },
            data: name,
        },
        */
      xAxis: [{ // x轴隐藏
          show: false
      }],
      yAxis: [{ // y轴配置
          show:false
      }],
      series: this.refers
    }
    myChart.setOption(option);
    for(let i=0;i<this.color.length;i++){
      document.getElementsByClassName("t1")[i].style.backgroundColor=this.color[i]
      document.getElementsByClassName("b1")[i].style.backgroundColor=this.color[i]
      document.getElementsByClassName("st1")[i].innerHTML=this.states[i]
      document.getElementsByClassName("sb1")[i].innerHTML=this.percent[i]
    }
    /*for(let i=0;i<this.color.length;i++){
      //document.getElementsByClassName(".t1").style="background-color:"+this.color[index]
      $(".t1").each(function(index){
        $(this).css("background-color",this.color[index]);
      });
      $(".b1").each(function(index){
        $(this).css("background-color",this.color[index]);
      });
    } */
   
    } 
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chartClass{
	height:600px;
	width:1500px;
}
.t1{
	height:5px;
	width:5px;
	display:block;
}
.b1{
	margin-top:4px;
	height:100px;
	width:5px;
	display:block;
}
#self .p1{
	position:relative;
  margin-right:5px;
}
.s1{
    margin-top:-100px;
    margin-right:20px;
    width:100px;
    margin-bottom: 100px;
}
.st1{
  margin-bottom: 55px;
}
</style>

低级版，它的存在代表着高级版的由来和自己的成长，直接上代码：

<template>

      <table  style="height:600px;width:1500px;">
        <tr >
        <td rowspan="3" ><div id="myChart" style="width: 500px; height: 500px;"></div></td>
        </tr>
        <tr >
        <td>
        <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </td>
        <td>
        <div class="s1">
            <div class="st1">进行中 </div>
            <div class="sb1">33.33%</div>
          </div>
        </td>
        <td>
        <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </td>
        <td>
        <div class="s1">
            <div class="st1">已完成 </div>
            <div class="sb1">16.67%</div>
          </div>
        </td>			
        </tr>
        <tr >
        <td>
        <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </td>
        <td>
        <div class="s1">
            <div class="st1">未开始</div>
            <div class="sb1">25%</div>
          </div>
        </td>
        <td>
        <div class="p1">
            <div class="t1"> </div>
            <div class="b1"></div>
          </div>
        </td>
        <td>
        <div class="s1">
            <div class="st1">延期 </div>
            <div class="sb1">25%</div>
          </div>
        </td>			
</tr>

      </table>

</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'HelloWorld',
  
  data(){
    return{
      initData: [{name:'data1',value:80},{name:'data2',value:40},{name:'data3',value:60},{name:'data4',value:60}],
      names:["data1","data2","data3","data4"], // 获取名称
      values: [80,40,60,60], // 获取数值
      total : 0, // 总和
      color:['#5C73C7','#96CB73','#F6C752','#E76564'],
      refers:[],
      yAxis:[],
    }
  },
 mounted(){
  this.initMethod();
 
 },   
  methods:{
    
    initMethod(){
      for(let i=0;i<this.values.length;i++){
        this.total+=this.values[i];
      }
      for(let i=0;i<this.initData.length;i++){
        this.refers.push({
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, // 鼠标移入变大
            radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
            center: ['45%','50%'],
            itemStyle: {
                normal:{
                    formatter:this.initData[i].name,
                    label: {
                        show: false,
                        position: 'outside'
                    },
                    labelLine: {
                        show: true,
                    },
                    borderWidth: 18
                }
            },
            data: [{
                name: this.initData[i].name,
                value: this.initData[i].value,
                itemStyle: {
                   /* normal: { // 渐变色
                        color: new echarts.graphic.LinearGradient(0,1,0,0,[{
                            offset: 0,
                            color: color[i][0]
                        },{
                            offset: 1,
                            color: color[i][1]
                        }])
                    }*/
                },
            },{ // 阴影段
                name: '',
                value: this.total - this.initData[i].value,
                itemStyle: {
                    normal: {
                        color: 'transparent'
                    }
                },
                tooltip: { // 不显示提示框
                    show: false
                },
                hoverAnimation: false // 鼠标移入变大
            }]
        })
        this.refers.push({
            name: '',
            type: 'pie',
            clockWise: false, //顺时加载
            z: 1, // 层级，默认为 2，z小的会被z大的覆盖住
            hoverAnimation: false, // 鼠标移入变大
            radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
            center: ['45%','50%'], // 位置
            label: {
                show: false
            },
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false
                    },
                    borderWidth: 18
                }
            },
            data: [{ // 阴影的75%
                value: 10,
                itemStyle: {
                    normal: {
                        color: 'rgba(1,179,238,0.1)'
                    }
                },
                tooltip: {
                    show: false
                },
            },{ // 阴影的最后25%，透明
                value: 0,
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,0)',
                        borderWidth: 0
                    }
                },
                tooltip: {
                    show: false
                },
            }]
        })
        this.yAxis.push(this.initData[i].name)
    }
  
    let myChart = echarts.init(document.getElementById('myChart'))
    let option = {
      // 提示框
      tooltip: {
          show: true,                 // 是否显示提示框
          formatter: '{b} </br> 攻击{c}次 </br> 占比{d}%'      // 提示框显示内容,此处{b}表示各数据项名称，此项配置为默认显示项，{c}表示数据项的值，默认不显示，({d}%)表示数据项项占比，默认不显示。
      },
      // 标题
      title: [{
        text: '图表',
        top:'5%',
        left:'3%',
        textStyle:{
            color: '#000',
            fontSize:18,
        }
      }],
        /*legend: {
            show: true,
            x: 'center',
            bottom: '15%',
            itemGap: 20,
            textStyle: {
                fontSize: 14,
                color: '#fff'
            },
            data: name,
        },
        */
      xAxis: [{ // x轴隐藏
          show: false
      }],
      yAxis: [{ // y轴配置
          show:false
      }],
      series: this.refers
    }
    myChart.setOption(option);
    for(let i=0;i<this.color.length;i++){
      document.getElementsByClassName("t1")[i].style.backgroundColor=this.color[i]
      document.getElementsByClassName("b1")[i].style.backgroundColor=this.color[i]
    }
    /*for(let i=0;i<this.color.length;i++){
      //document.getElementsByClassName(".t1").style="background-color:"+this.color[index]
      $(".t1").each(function(index){
        $(this).css("background-color",this.color[index]);
      });
      $(".b1").each(function(index){
        $(this).css("background-color",this.color[index]);
      });
    } */
   
    } 
  }
}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chartClass{
	height:600px;
	width:1500px;
}
.t1{
	height:5px;
	width:5px;
	display:block;
}
.b1{
	margin-top:4px;
	height:100px;
	width:5px;
	display:block;
}
#self .p1{
	position:relative;
  margin-right:5px;
}
.s1{
	margin-right:20px;
  width:60px;
}
.st1{
  margin-bottom: 55px;
}
</style>

piaoyiren
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue中使用echarts制作圆环图的实例代码
10-18
主要介绍了vue中使用echarts制作圆环图的实例代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
vue中给echarts图的legend显示添加百分比并给环形图中间添加文字
蜗牛~~
01-15 5977
<div id="chartmainbarCircle"></div> data(){ return{ // 环形图数据 data8:[ {value: 335, name: '优秀'}, {value: 310, name: '良好'}, {value: 234, name: '合格'}, .
vue中使用echarts组件(基本配置、柱状图、饼图、自定义圆环图并显示数据在图例legend旁)
qq_37899622的博客
01-15 2092
安装echarts npm install echarts -S 安装完成之后，就可以直接使用了 注意： 如果在安装echarts之后，在main.js进行了全局引入: import echarts from 'echarts' Vue.prototype.$echarts = echarts 再到Chart.vue中使用： myChart = this.$echarts.init(this.$refs.myChart) 此时，运行后可能会报错： Uncaught TypeError: Cann.
html中使用vue和echarts
02-20
html中使用vue和echarts
vue使用echarts实现水平柱形图实例
11-19
文件结构：
用于绘制纯CSS圆环图的轻量级Vue组件
08-11
用于绘制纯CSS圆环图的轻量级Vue组件
vue 圆形百分比进度条_vue实用组件——圆环百分比进度条
weixin_39957312的博客
12-19 817
有需要的人可以参考一下，如果试用过，发现问题，欢迎留言告知，不胜感激。功能介绍：1、若页面无刷新，且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画2、若页面无刷新，且第一次传值大于第二次传值则为执行递减动画3、中间展示的百分比数字有缓动动画(速度同圆环进度动画一直)4、动画完成时会触发动画完成回调5、外部传值为圆环进度百分比(整数)，圆环动画速度(整数)效果如图所示： {{ percen...
echart---百分数展示在圆环内
freddy的博客
04-10 1006
Vue echart---百分数展示在圆环内。
vue中使用圆形百分比图形
weixin_42823014的博客
05-04 2053
vue实现环形百分比进度条组件_caffreygo的博客-CSDN博客_vue环形百分比 在vue中封装一个可以实现圆形百分比进度条的组件 <radial-indicator percentNum="87" //表示的是百分比 speed="3" //动画加载速度 size="155" //整体的圆形大小 color="#8abf50" //进度条的颜色 @animationFinished="animationFinished" //动画
Echarts封装环形百分比组件，基于vue进行封装
zyxczyf123的博客
06-26 1198
首先引入Echarts图，在项目中安装或者直接在线引入 封装代码如下： <template> <div id="main" style="width: 600px; height: 400px"> <span>fdfd</span> </div> </template> <script> export default { props: { number: { type: [Number
Vue + Echarts 实现中国地图多级钻取功能.zip
08-01
本文为 Vue 2.x + Echarts 5.x 实现中国地图多级钻取功能（基本版 未做过多功能拓展和样式优化 便于二次开发）。（更多说明移步：https://blog.csdn.net/ZYS10000/article/details/119298354）
一个漂亮的基于Vue写的圆环菜单组件.zip
09-24
一个漂亮的基于Vue写的圆环菜单组件.zip,由vue.js提供的漂亮的圆形菜单
带进度的圆形进度条,可显示百分比
06-12
带进度的圆形进度条,可显示百分比。可以在统计控球率的时候使用
基于Vue和Echarts的员工数据大屏展示设计源码
04-06
本项目是一个基于Vue和Echarts的员工数据大屏展示项目，包含74个文件，主要文件类型包括Vue组件、JavaScript脚本、图片、XML配置文件、Git忽略文件、JSON配置文件、Idea配置文件、Babel配置文件和编辑器配置文件。...
Spring Cloud Gateway直接管理Vue.js的静态资源
wddblog的博客
04-28 594
1. 构建Vue.js应用像之前一样，构建你的Vue.js应用，并将生成的静态资源（位于dist目录）复制到Spring Boot项目的某个目录，比如。
element-ui的bug记录
最新发布
nick_zhang的博客
04-29 418
7.el-dialog组件在关闭时，会触发子组件的created/mounted生命周期。原因是当visible改变为false，即关闭dialog的时候，如果用户设置了destroyOnClose=true，则执行key++；key是绑定在较外层的div上的，key值的变化会导致这个div重新渲染。6.select 的 popper-append-to-body ,默认值为true;dialog的append-to-body,默认值为false;3.element表格前端分页。
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 507
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue2编写主体页面
5年编程经验的老猿。
04-28 415
这个示例展示了一个基本的主体页面布局，其中包含了侧边栏、导航栏和主要内容区域。Element UI的el-container、el-aside、el-header和el-main组件被用来创建布局的不同部分，而el-menu和el-submenu组件则用来创建侧边栏的导航菜单
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
gaoyu007的博客
04-28 319
Vue开发者工具Vue.js devtools Vue开发者工具安装步骤前端开发工具免费附带教程
vue+echarts实现双圆环代码
09-07
实现双圆环的代码可以使用Vue.js框架和Echarts库来完成。首先，在Vue组件中引入Echarts库： ```javascript import echarts from 'echarts' ``` 然后，在Vue组件的`mounted`生命周期钩子函数中，创建一个Echarts实例，并且通过`setOption`方法来设置双圆环的配置参数： ```javascript mounted() { // 创建echarts实例 const myChart = echarts.init(document.getElementById('chart')) // 设置双圆环的配置参数 const option = { series: [ { type: 'pie', radius: ['50%', '70%'], label: { show: false }, labelLine: { show: false }, data: [ { value: 60, name: '圆环1' }, { value: 40, name: '圆环2' } ] } ] } // 使用配置参数渲染图表 myChart.setOption(option) } ``` 最后，在Vue组件的模板中添加一个`div`元素用于显示双圆环图表： ```html <template> <div id="chart"></div> </template> ``` 这样就完成了使用Vue和Echarts实现双圆环的代码。将以上代码保存到一个Vue组件中，然后在需要显示双圆环的地方使用该组件即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

piaoyiren

谢谢你的欣赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值