我在上一篇文章(用echarts实现的一个圆环图标)中提到过用html和echarts实现改功能,这篇文章用Vue来实现,效果图如下:
vue的代码如下:
<template>
<el-container>
<el-row :span="2">
<el-col><div id="myChart" style="width: 500px; height: 360px;"></div></el-col>
</el-row>
<!-- <el-row>
<el-col>
<div class="p1">
<template slot="t1" ></template>
<div class="b1"></div>
</div>
</el-col>
<el-col>
<div class="s1">
<div class="st1"> </div>
<div class="sb1"></div>
</div>
</el-col>
<el-col>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</el-col>
<el-col>
<div class="s1">
<div class="st1"> </div>
<div class="sb1"></div>
</div>
</el-col>
</el-row> -->
<div v-for="(item,index) in names" :key="index">
<el-row>
<el-col>
<div class="p1">
<div class="t1"></div>
<div class="b1"></div>
</div>
</el-col>
<el-col>
<div class="s1">
<div class="st1"> </div>
<div class="sb1"></div>
</div>
</el-col>
<el-col>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</el-col>
<el-col>
<div class="s1">
<div class="st1"> </div>
<div class="sb1"></div>
</div>
</el-col>
</el-row>
</div>
<!-- <el-row>
<el-col>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</el-col>
<el-col>
<div class="s1">
<div class="st1"></div>
<div class="sb1"></div>
</div>
</el-col>
<el-col>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</el-col>
<el-col>
<div class="s1">
<div class="st1"> </div>
<div class="sb1"></div>
</div>
</el-col>
</el-row> -->
</el-container>
<!-- <table style="height:600px;width:1500px;">
<tr >
<td rowspan="3" ><div id="myChart" style="width: 500px; height: 500px;"></div></td>
</tr>
<tr >
<td>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</td>
<td>
<div class="s1">
<div class="st1">进行中 </div>
<div class="sb1">33.33%</div>
</div>
</td>
<td>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</td>
<td>
<div class="s1">
<div class="st1">已完成 </div>
<div class="sb1">16.67%</div>
</div>
</td>
</tr>
<tr >
<td>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</td>
<td>
<div class="s1">
<div class="st1">未开始</div>
<div class="sb1">25%</div>
</div>
</td>
<td>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</td>
<td>
<div class="s1">
<div class="st1">延期 </div>
<div class="sb1">25%</div>
</div>
</td>
</tr>
</table> -->
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'HelloWorld',
data(){
return{
initData: [{name:'data1',value:80},{name:'data2',value:40},{name:'data3',value:60},{name:'data4',value:60}],
names:["data1","data2","data3","data4"], // 获取名称
values: [80,40,60,60], // 获取数值
total : 0, // 总和
color:['#5C73C7','#678456','#F6C752','#E76564'],
refers:[],
yAxis:[],
states:["进行中","未开始","已完成","延期"],
percent:[]
}
},
mounted(){
this.initMethod();
},
methods:{
initMethod(){
for(let i=0;i<this.values.length;i++){
this.total+=this.values[i];
}
for(let i=0;i<this.values.length;i++){
this.percent[i]=Math.round(this.values[i]/this.total*10000)/100+"%"
}
for(let i=0;i<this.initData.length;i++){
this.refers.push({
type: 'pie',
clockWise: false, //顺时加载
color:this.color[i],
hoverAnimation: false, // 鼠标移入变大
radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
center: ['45%','50%'],
itemStyle: {
normal:{
formatter:this.initData[i].name,
label: {
show: false,
position: 'outside'
},
labelLine: {
show: true,
},
borderWidth: 18
}
},
data: [{
name: this.initData[i].name,
value: this.initData[i].value,
itemStyle: {
/* normal: { // 渐变色
color: new echarts.graphic.LinearGradient(0,1,0,0,[{
offset: 0,
color: color[i][0]
},{
offset: 1,
color: color[i][1]
}])
}*/
},
},{ // 阴影段
name: '',
value: this.total - this.initData[i].value,
itemStyle: {
normal: {
color: 'transparent'
}
},
tooltip: { // 不显示提示框
show: false
},
hoverAnimation: false // 鼠标移入变大
}]
})
this.refers.push({
name: '',
type: 'pie',
clockWise: false, //顺时加载
z: 1, // 层级,默认为 2,z小的会被z大的覆盖住
hoverAnimation: false, // 鼠标移入变大
radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
center: ['45%','50%'], // 位置
label: {
show: false
},
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
borderWidth: 18
}
},
data: [{ // 阴影的75%
value: 10,
itemStyle: {
normal: {
color: 'rgba(1,179,238,0.1)'
}
},
tooltip: {
show: false
},
},{ // 阴影的最后25%,透明
value: 0,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0
}
},
tooltip: {
show: false
},
}]
})
this.yAxis.push(this.initData[i].name)
}
let myChart = echarts.init(document.getElementById('myChart'))
let option = {
// 提示框
tooltip: {
show: true, // 是否显示提示框
formatter: '{b} </br> 攻击{c}次 </br> 占比{d}%' // 提示框显示内容,此处{b}表示各数据项名称,此项配置为默认显示项,{c}表示数据项的值,默认不显示,({d}%)表示数据项项占比,默认不显示。
},
// 标题
title: [{
text: '图表',
top:'5%',
left:'3%',
textStyle:{
color: '#000',
fontSize:18,
}
}],
/*legend: {
show: true,
x: 'center',
bottom: '15%',
itemGap: 20,
textStyle: {
fontSize: 14,
color: '#fff'
},
data: name,
},
*/
xAxis: [{ // x轴隐藏
show: false
}],
yAxis: [{ // y轴配置
show:false
}],
series: this.refers
}
myChart.setOption(option);
for(let i=0;i<this.color.length;i++){
document.getElementsByClassName("t1")[i].style.backgroundColor=this.color[i]
document.getElementsByClassName("b1")[i].style.backgroundColor=this.color[i]
document.getElementsByClassName("st1")[i].innerHTML=this.states[i]
document.getElementsByClassName("sb1")[i].innerHTML=this.percent[i]
}
/*for(let i=0;i<this.color.length;i++){
//document.getElementsByClassName(".t1").style="background-color:"+this.color[index]
$(".t1").each(function(index){
$(this).css("background-color",this.color[index]);
});
$(".b1").each(function(index){
$(this).css("background-color",this.color[index]);
});
} */
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chartClass{
height:600px;
width:1500px;
}
.t1{
height:5px;
width:5px;
display:block;
}
.b1{
margin-top:4px;
height:100px;
width:5px;
display:block;
}
#self .p1{
position:relative;
margin-right:5px;
}
.s1{
margin-top:-100px;
margin-right:20px;
width:100px;
margin-bottom: 100px;
}
.st1{
margin-bottom: 55px;
}
</style>
低级版,它的存在代表着高级版的由来和自己的成长,直接上代码:
<template>
<table style="height:600px;width:1500px;">
<tr >
<td rowspan="3" ><div id="myChart" style="width: 500px; height: 500px;"></div></td>
</tr>
<tr >
<td>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</td>
<td>
<div class="s1">
<div class="st1">进行中 </div>
<div class="sb1">33.33%</div>
</div>
</td>
<td>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</td>
<td>
<div class="s1">
<div class="st1">已完成 </div>
<div class="sb1">16.67%</div>
</div>
</td>
</tr>
<tr >
<td>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</td>
<td>
<div class="s1">
<div class="st1">未开始</div>
<div class="sb1">25%</div>
</div>
</td>
<td>
<div class="p1">
<div class="t1"> </div>
<div class="b1"></div>
</div>
</td>
<td>
<div class="s1">
<div class="st1">延期 </div>
<div class="sb1">25%</div>
</div>
</td>
</tr>
</table>
</template>
<script>
import * as echarts from 'echarts'
export default {
name: 'HelloWorld',
data(){
return{
initData: [{name:'data1',value:80},{name:'data2',value:40},{name:'data3',value:60},{name:'data4',value:60}],
names:["data1","data2","data3","data4"], // 获取名称
values: [80,40,60,60], // 获取数值
total : 0, // 总和
color:['#5C73C7','#96CB73','#F6C752','#E76564'],
refers:[],
yAxis:[],
}
},
mounted(){
this.initMethod();
},
methods:{
initMethod(){
for(let i=0;i<this.values.length;i++){
this.total+=this.values[i];
}
for(let i=0;i<this.initData.length;i++){
this.refers.push({
type: 'pie',
clockWise: false, //顺时加载
hoverAnimation: false, // 鼠标移入变大
radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
center: ['45%','50%'],
itemStyle: {
normal:{
formatter:this.initData[i].name,
label: {
show: false,
position: 'outside'
},
labelLine: {
show: true,
},
borderWidth: 18
}
},
data: [{
name: this.initData[i].name,
value: this.initData[i].value,
itemStyle: {
/* normal: { // 渐变色
color: new echarts.graphic.LinearGradient(0,1,0,0,[{
offset: 0,
color: color[i][0]
},{
offset: 1,
color: color[i][1]
}])
}*/
},
},{ // 阴影段
name: '',
value: this.total - this.initData[i].value,
itemStyle: {
normal: {
color: 'transparent'
}
},
tooltip: { // 不显示提示框
show: false
},
hoverAnimation: false // 鼠标移入变大
}]
})
this.refers.push({
name: '',
type: 'pie',
clockWise: false, //顺时加载
z: 1, // 层级,默认为 2,z小的会被z大的覆盖住
hoverAnimation: false, // 鼠标移入变大
radius: [60 - i*12 + '%',53 - i*12 + '%'], // 圆环
center: ['45%','50%'], // 位置
label: {
show: false
},
itemStyle: {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
borderWidth: 18
}
},
data: [{ // 阴影的75%
value: 10,
itemStyle: {
normal: {
color: 'rgba(1,179,238,0.1)'
}
},
tooltip: {
show: false
},
},{ // 阴影的最后25%,透明
value: 0,
itemStyle: {
normal: {
color: 'rgba(0,0,0,0)',
borderWidth: 0
}
},
tooltip: {
show: false
},
}]
})
this.yAxis.push(this.initData[i].name)
}
let myChart = echarts.init(document.getElementById('myChart'))
let option = {
// 提示框
tooltip: {
show: true, // 是否显示提示框
formatter: '{b} </br> 攻击{c}次 </br> 占比{d}%' // 提示框显示内容,此处{b}表示各数据项名称,此项配置为默认显示项,{c}表示数据项的值,默认不显示,({d}%)表示数据项项占比,默认不显示。
},
// 标题
title: [{
text: '图表',
top:'5%',
left:'3%',
textStyle:{
color: '#000',
fontSize:18,
}
}],
/*legend: {
show: true,
x: 'center',
bottom: '15%',
itemGap: 20,
textStyle: {
fontSize: 14,
color: '#fff'
},
data: name,
},
*/
xAxis: [{ // x轴隐藏
show: false
}],
yAxis: [{ // y轴配置
show:false
}],
series: this.refers
}
myChart.setOption(option);
for(let i=0;i<this.color.length;i++){
document.getElementsByClassName("t1")[i].style.backgroundColor=this.color[i]
document.getElementsByClassName("b1")[i].style.backgroundColor=this.color[i]
}
/*for(let i=0;i<this.color.length;i++){
//document.getElementsByClassName(".t1").style="background-color:"+this.color[index]
$(".t1").each(function(index){
$(this).css("background-color",this.color[index]);
});
$(".b1").each(function(index){
$(this).css("background-color",this.color[index]);
});
} */
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chartClass{
height:600px;
width:1500px;
}
.t1{
height:5px;
width:5px;
display:block;
}
.b1{
margin-top:4px;
height:100px;
width:5px;
display:block;
}
#self .p1{
position:relative;
margin-right:5px;
}
.s1{
margin-right:20px;
width:60px;
}
.st1{
margin-bottom: 55px;
}
</style>