vue环进度图、双环进度图 - echart图表

刘斩仙的笔记本

已于 2023-08-07 09:45:48 修改

阅读量1.9k

点赞数 1

分类专栏：图表（echarts）文章标签： echarts javascript 前端

于 2021-12-23 15:14:55 首次发布

本文链接：https://blog.csdn.net/qq_25252769/article/details/122107157

版权

图表（echarts）专栏收录该内容

9 篇文章 0 订阅

订阅专栏

如图所示：

在这里插入图片描述

代码如下：（复制另存txt，修改.html直接运行）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>环进度图、双环进度图 - echart图表</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    #app{
        display: flex;
        justify-content: center;
    }
    .testChart{
      width: 100px;
      height: 100px;
      background: #fff;
      padding: 20px;
    }
  </style>
</head>
<body style="background: #eee;">
  <div id="app">
    <div ref="testOne" class="testChart"></div>
    <div ref="testTwo" class="testChart"></div>
  </div>
</body>

<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 echart -->
<script src="https://lib.baomitu.com/echarts/5.2.0/echarts.min.js"></script>

<script>
  new Vue({
    el: '#app',
    data() {
      return { 
        myTestOneChart:{},
        myTestTwoChart:{},
      }
    },
    mounted(){
        this.testOneChart()
        this.testTwoChart()
        window.onresize = ()=>{ //窗口变化自动重载
            this.myTestOneChart.resize()
            this.myTestTwoChart.resize()
        }
    },
    methods: {
        testOneChart(){
            this.myTestOneChart = echarts.init(this.$refs.testOne);
            let option = {
                series: [{
                    type: 'gauge',
                    radius: '100%',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: true,
                        itemStyle: {
                            // borderWidth: 10,
                            // borderColor: ['#FFC16B','#0050E7']
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 6,
                            borderColor: '#04BEFB'
                        }
                    },
                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 10
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        distance: 5
                    },
                    color:"#00D7B5",
                    data: [
                        {
                            value: 80,
                            name: '下单门店数\n占比',
                            title: {
                                offsetCenter: ['1%', '40%'],
                            },
                            detail: {
                                offsetCenter: ['4%', '-10%']
                            }
                        },
                    ],
                    title: {
                        fontSize: 10,
                        color: '#A5A5A5',
                    },
                    detail: {
                        width: 15,
                        height: 6,
                        fontSize: 16,
                        color: 'auto',
                        borderColor: 'auto',
                        fontFamily: "FinFont-Bold, FinFont",
                        // borderRadius: 20,
                        // borderWidth: 8,
                        formatter: '{value}%'
                    }
                }]
            }

            // 使用刚指定的配置项和数据显示图表。
            this.myTestOneChart.setOption(option);
        },
        testTwoChart(){
            this.myTestTwoChart = echarts.init(this.$refs.testTwo);
            let option = {
                series: [{
                    type: 'gauge',
                    radius: '100%',
                    startAngle: 90,
                    endAngle: -270,
                    pointer: {
                        show: false
                    },
                    progress: {
                        show: true,
                        overlap: false,
                        roundCap: true,
                        clip: true,
                        itemStyle: {
                            // borderWidth: 10,
                            // borderColor: ['#FFC16B','#0050E7']
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            width: 8,
                            borderColor: '#04BEFB'
                        }
                    },
                    splitLine: {
                        show: false,
                        distance: 0,
                        length: 10
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        show: false,
                        distance: 5
                    },
                    color:["#19AEF7","#00D7B5"],
                    data: [
                        {
                            value: 30,
                            name: '时间进度',
                            title: {
                                offsetCenter: ['1%', '-15%']
                            },
                            detail: {
                                offsetCenter: ['4%', '-45%']
                            },
                            itemStyle: {
                                fontSize: 13,
                            }
                        },
                        {
                            value: 50,
                            name: '月完成率',
                            title: {
                                offsetCenter: ['1%', '60%'],
                            },
                            detail: {
                                offsetCenter: ['4%', '30%']
                            }
                        },
                    ],
                    title: {
                        fontSize: 10,
                        color: '#A5A5A5',
                    },
                    detail: {
                        width: 15,
                        height: 6,
                        fontSize: 16,
                        color: 'auto',
                        borderColor: 'auto',
                        fontFamily: "FinFont-Bold, FinFont",
                        // borderRadius: 20,
                        // borderWidth: 8,
                        formatter: '{value}%'
                    }
                }]
            }

            // 使用刚指定的配置项和数据显示图表。
            this.myTestTwoChart.setOption(option);
        },
    }
  })
</script>
</html>

备注：

来隔壁部门支援，我的天呐，他们真的是996，震惊！！！

刘斩仙的笔记本

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue环进度图、双环进度图 - echart图表

如图所示：代码如下：（复制另存txt，修改.html直接运行）<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>环进度图、双环进度图 - echart图表</title>  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/the
复制链接

扫一扫