echarts环图配置

echarts环图配置

1、安装echarts

npm install echarts@4.9.0
1

2、页面引入echarts

import echarts from 'echarts';
1

3、应用

template片段

<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>
1
2
3
4

script方法

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()
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

最终效果