文章目录
一、效果图
二、使用
-
通过 npm 安装 ECharts:
npm install echarts --save -
安装完成以后，可以将 echarts引入页面，这样我们就可以在该页面使用 echarts 所有组件
import * as echarts from "echarts" -
下面是代码，注意分辨哪些是自己需要的部分，不需要的直接删除。
js
<template>
<div class="container_main">
<div class="container_main_Class">
<div class="chartClass">
<div class="leftClass">
<div class="spanClass">
<span>{{ dataMap2.goodValue }} 次</span>
</div>
<div class="spanClass">
<span>好评/默认好评</span>
</div>
</div>
<div class="centerClass" ref="myChart"></div>
<div class="rightClass">
<div class="spanClass">
<span>{{ dataMap2.warnValue }} 次</span>
</div>
<div class="spanClass">
<span>投诉举报</span>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: "part4",
data(){
return{
myChart:null,
dataMap2:{
goodValue:Math.ceil(Math.random()* 1000),
warnValue:Math.ceil(Math.random()* 1000),
df:Math.ceil(Math.random()* 10),
}
}
},
mounted() {
this.init()
},
methods:{
async init(){
if (this.myChart) {
this.myChart.dispose()
}
this.$nextTick(()=>{
this.drawChart(this.dataMap2)
})
},
drawChart(dataMap){
this.myChart = echarts.init(this.$refs.myChart)
let goodValuebl = ((dataMap.goodValue / (dataMap.goodValue+dataMap.warnValue))*100).toFixed(2)
let df = dataMap.df
let colorSet = {
color: '#468EFD'
};
let colorA = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
offset: 0,
color: '#5CF9FE' // 0% 处的颜色
},
{
offset: 0.17,
color: '#5CF9FE' // 100% 处的颜色
},
{
offset: 0.95,
color: '#468EFD' // 100% 处的颜色
},
{
offset: 1,
color: '#468EFD' // 100% 处的颜色
}
])
let option = {
title: [
{
show: true,
text: "得分：" + df + "分",
offsetCenter: [0, 0], // x, y，单位px
bottom: 10,
left:'center',
textStyle: {
color: '#fff',
fontSize: 18, //表盘上的标题文字大小
fontWeight: 400,
fontFamily:'SourceHanSansCN-Bold',
}
},
],
series: [
{
name: "内部进度条",
type: "gauge",
center: ['50%', '80%'],
radius: '85%',
startAngle: 180,
endAngle: 0,
splitNumber: 10,
max: 100,
axisLine: {
lineStyle: {
color: [
[goodValuebl / 100, colorA],
[1, "#ff7373"]
],
width: 14
}
},
axisLabel: {
show: false,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
itemStyle: {
show: false,
},
detail: {
show:false,
formatter: function(value) {
return value + "%"
},
offsetCenter: [0, 82],
textStyle: {
padding: [0, 0, 0, 0],
fontSize: 18,
fontWeight: '700',
color: colorSet.color
}
},
data: [goodValuebl],
pointer: {
show: false,
length: '75%',
radius: '20%',
width: 1, //指针粗细
},
},
{
name: '外部刻度',
type: 'gauge',
center: ['50%', '80%'],
radius: '100%',
startAngle: 180,
endAngle: 0,
min: 0, //最小刻度
max: 10, //最大刻度
splitNumber: 10, //刻度数量
axisLine: {
show: true,
lineStyle: {
width: 1,
color: [
[1, 'rgba(0,0,0,0)']
]
}
}, //仪表盘轴线
axisLabel: {
show: true,
color: '#7dd1ff',
distance: -15,
formatter: function(v) {
switch (v + '') {
case '0':
return '0';
case '1':
return '1';
case '2':
return '2';
case '3':
return '3';
case '4':
return '4';
case '5':
return '5';
case '6':
return '6';
case '7':
return '7';
case '8':
return '8';
case '9':
return '9';
case '10':
return '10';
}
}
}, //刻度标签。
axisTick: {
show: true,
lineStyle: {
color: colorSet.color,
width: 1
},
length: -8
}, //刻度样式
splitLine:{
show: true,
lineStyle: {
color: colorSet.color,
width: 1
},
length: -8
}, //分隔线样式
detail: {
show: false
},
animationDuration: 4000,
pointer: {
show: true,
length: '75%',
radius: '20%',
itemStyle: {
color: '#7dd1ff',
},
width: 2, //指针粗细
},
data: [df],
},
]
}
this.myChart.setOption(option)
},
}
}
</script>
<style scoped lang="less">
.container_main{
position: absolute;
top: 0px;
left: 0px;
width: 602px;
height: 920px;
.container_main_Class{
width: 550px;
height: 830px;
margin: auto;
margin-top: 18px;
//background: red;
}
.chartClass{
width: 100%;
height: 210px;
display: flex;
justify-content: space-between;
background: rgba(7,90,255,0.1);
.leftClass{
width: 140px;
height: 180px;
display: flex;
flex-direction: column;
justify-content: flex-end;
.spanClass{
height: 30px;
line-height: 30px;
font-size: 18px;
text-align: right;
span{
font-weight: bold;
background-image: linear-gradient(to bottom, #00d4ff, #02ffc0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
.centerClass{
width: 250px;
height: 100%;
//background: #13c2c2;
}
.rightClass{
width: 140px;
height: 180px;
display: flex;
flex-direction: column;
justify-content: flex-end;
.spanClass{
height: 30px;
line-height: 30px;
font-size: 18px;
text-align: left;
span{
font-weight: bold;
background-image: linear-gradient(to bottom, #ff0000, #ff7373);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
}
}
}
}
</style>