echarts环图配置

echarts环图配置

1、安装echarts

js 复制代码
npm install echarts@4.9.0

2、页面引入echarts

复制代码
import echarts from 'echarts';

3、应用

template片段

html 复制代码
<div class="chart-wrap">
	<div id = "treeChart" style = "width: 180px; height:180px;" ></div>
	<div class="total" :style="{color: handleThemeColor(totlal).titleColor}">{{ totlal >= 8 ? '优秀' : totlal <= 3 ? '不及格' : '及格' }}</div>
</div>

script方法

js 复制代码
showChart() {
    let myChart = echarts.init(document.getElementById('treeChart'));
    let value = this.totlal; //当前进度
    let maxValue = 10; //进度条最大值
    let startBg = this.circleColor.start;
    let endBg = this.circleColor.end;
    let option = {
        legend: {
            orient: 'vertical',
            x: 'left',
        },
        graphic: [
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '30%',
                z: 2,
                zlevel: 100,
                style: {
                    text: '总得分',
                    textAlign: 'center',
                    fill: '#666666',
                    fontSize: 12,
                },
            },
            {
                type: 'text',
                left: 'center',
                top: '46%',
                z: 2,
                zlevel: 100,
                style: {
                    text: this.totlal,
                    textAlign: 'center',
                    fill: this.themeColor,
                    fontSize: 62,
                },
            },
        ],

        series: [
            // 进度条
            {
                startAngle: 210,
                type: 'pie',
                radius: ['72%', '100%'],
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                hoverAnimation: false, //鼠标悬浮是否有区域弹出动画,false:无 true:有
                avoidLabelOverlap: false,
                silent: true, //取消鼠标移入高亮效果: 不响应和触发鼠标事件
                animationEasing: 'cubicOut',
                data: [
                    //value当前进度 + 颜色
                    {
                        value: value,
                        itemStyle: {
                            //渐变颜色
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: startBg, // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: endBg, // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                    {
                        value: maxValue - value,
                        itemStyle: {
                            //渐变颜色
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#eee', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#eee', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        },
                    },
                    //(maxValue进度条最大值 - value当前进度) + 颜色
                    {
                        value: 5,
                        itemStyle: {
                            // 径向渐变颜色
                            color: {
                                type: 'radial',
                                x: 1,
                                y: 1,
                                r: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: '#eee', // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#eee', // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                            borderColor: '#fff',
                            borderWidth: 6
                        },
                    },
                ],
            },
        ],
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    //随着浏览器窗口大小改变而改变
    window.addEventListener('resize', function () {
        myChart.resize()
    })
}

css样式

css 复制代码
.chart-wrap {
  position: absolute;
  right: 78px;
  top: -60px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #FFFFFF;
  overflow: hidden;
}

#treeChart {
  position: absolute;
  top: 10px;
  left: 10px;
}

.total {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 13px;

  font-size: 16px;
  font-weight: 500;
}

最终效果

相关推荐
小桥风满袖41 分钟前
极简三分钟ES6 - ES9中字符串扩展
前端·javascript
小Wang1 小时前
npm私有库创建(docker+verdaccio)
前端·docker·npm
用户73087011793081 小时前
Vue中集成文字转语音:使用Web Speech API实现功能
前端
前端人类学1 小时前
掌控异步洪流:多请求并发下的顺序控制艺术
javascript·promise
李重楼1 小时前
前端性能优化之 HTTP/2 多路复用
前端·面试
yanessa_yu1 小时前
全屏滚动网站PC端自适应方案
前端
RoyLin1 小时前
TypeScript设计模式:桥接模式
前端·后端·typescript
火星开发者1 小时前
Vue中实现Word、Excel、PDF预览的详细步骤
前端
CryptoRzz1 小时前
印度尼西亚股票数据API对接实现
javascript·后端
brzhang1 小时前
干翻 Docker?WebAssembly 3.0 的野心,远不止浏览器,来一起看看吧
前端·后端·架构