echarts环图配置
echarts环图配置
1、安装echarts
npm install echarts@4.9.0
2、页面引入echarts
import echarts from 'echarts';
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>
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()
})
}
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;
}
最终效果
