165 lines
3.8 KiB
Vue
165 lines
3.8 KiB
Vue
<template>
|
|
<ModelBox name='3-1'>
|
|
<div class='line-rate'>
|
|
<div class='legend-box'>
|
|
<div class='legend-item' v-for='(item, index) in legendArr' :key='index'>
|
|
<span class='dot' :style='{backgroundColor: item.color,"--dot-color": item.color}'></span>
|
|
<span class='name'>{{item.name}}</span>
|
|
</div>
|
|
</div>
|
|
<div id='lineRate' style='width: 584px; height: 270px;'></div>
|
|
</div>
|
|
</ModelBox>
|
|
</template>
|
|
<script>
|
|
import * as echarts from 'echarts';
|
|
import ModelBox from './ModelBox.vue';
|
|
export default {
|
|
name: 'LineRate',
|
|
components: {
|
|
ModelBox
|
|
},
|
|
data() {
|
|
return {
|
|
legendArr:[
|
|
{color:'#FFCE6A', name:'A1'},
|
|
{color:'#21CECD', name:'A2'},
|
|
{color:'#77B4FD', name:'A3'},
|
|
{color:'#29BDFA', name:'A4'},
|
|
{color:'#5A7DDA', name:'A5'},
|
|
{color:'#FFB49D', name:'A6'},
|
|
{color:'#C5A6FC', name:'A7'},
|
|
{color:'#7164FF', name:'A8'},
|
|
{color:'#98B0C7', name:'A9'},
|
|
{color:'#5D7092', name:'A10'}
|
|
]
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getChart()
|
|
},
|
|
methods: {
|
|
init() {
|
|
|
|
},
|
|
getChart() {
|
|
var chartDom = document.getElementById('lineRate');
|
|
var myChart = echarts.init(chartDom);
|
|
var option;
|
|
option = {
|
|
color: ['#FFCE6A', '#21CECD', '#77B4FD', '#29BDFA', '#5A7DDA', '#FFB49D', '#C5A6FC', '#7164FF', '#98B0C7', '#5D7092'],
|
|
tooltip: {
|
|
trigger: 'axis'
|
|
},
|
|
grid: {
|
|
top: 32,
|
|
left: 10,
|
|
right: 15,
|
|
bottom: 5,
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
show:true,
|
|
lineStyle:{
|
|
color: 'rgba(0,0,0,0.45)'
|
|
}
|
|
},
|
|
data: ['6:00', '7:00', '8:00', '9:00', '10:00', '11:00', '12:00'],
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
axisLabel: {
|
|
formatter: '{value}%'
|
|
},
|
|
axisLine: {
|
|
show:false,
|
|
lineStyle:{
|
|
color: 'rgba(0,0,0,0.45)'
|
|
}
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: 'A1',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
symbolSize: 6,
|
|
data: [82, 13, 10, 33, 90, 23, 71]
|
|
},
|
|
{
|
|
name: 'A2',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
symbolSize: 6,
|
|
data: [22, 38, 59, 23, 99, 33, 31]
|
|
},
|
|
{
|
|
name: 'A3',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
symbolSize: 6,
|
|
data: [15, 43, 20, 95, 89, 33, 41]
|
|
},
|
|
{
|
|
name: 'A4',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
symbolSize: 6,
|
|
data: [32, 33, 30, 33, 39, 33, 32]
|
|
},
|
|
{
|
|
name: 'A5',
|
|
type: 'line',
|
|
symbol: 'circle',
|
|
symbolSize: 6,
|
|
data: [82, 93, 90, 93, 29, 33, 32]
|
|
}
|
|
]
|
|
};
|
|
option && myChart.setOption(option);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang='scss' scoped>
|
|
.line-rate {
|
|
position: relative;
|
|
.legend-box {
|
|
width: 280px;
|
|
height: 35px;
|
|
position: absolute;
|
|
right: 0;
|
|
top:-20px;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
.legend-item {
|
|
width: 55px;
|
|
.dot {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
margin-right: 8px;
|
|
position: relative;
|
|
}
|
|
.dot::before {
|
|
content: '';
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 2px;
|
|
background-color: var(--dot-color);
|
|
position: absolute;
|
|
top:3px;
|
|
left: -3px;
|
|
}
|
|
.name{
|
|
font-size: 14px;
|
|
color: #8C8C8C;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |