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;
}

最终效果