|
|
|
@ -1,7 +1,8 @@ |
|
|
|
<template> |
|
|
|
<!-- <div>数据统计组件</div> --> |
|
|
|
<div style="width: 100%; height: 300px" class="chart-box"> |
|
|
|
<div id="Cisualmap" style="height: 350px"></div> |
|
|
|
<div style="width: 100%; height: 300px" class="chart-box d-flex"> |
|
|
|
<div id="Cisualmap1" style="width: 50%; height: 300px"></div> |
|
|
|
<div id="Cisualmap2" style="width: 50%; height: 300px"></div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<script> |
|
|
|
@ -34,130 +35,56 @@ export default { |
|
|
|
})(); |
|
|
|
}; |
|
|
|
}, |
|
|
|
destroyed() { |
|
|
|
clearInterval(this.timer); |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
async drawLine() { |
|
|
|
// 基于准备好的dom，初始化echarts实例 |
|
|
|
let myChart = this.$echarts.init(document.getElementById('Cisualmap')); |
|
|
|
var data = [ |
|
|
|
['2000-06-05', 116], |
|
|
|
['2000-06-06', 129], |
|
|
|
['2000-06-07', 135], |
|
|
|
['2000-06-08', 86], |
|
|
|
['2000-06-09', 73], |
|
|
|
['2000-06-10', 85], |
|
|
|
['2000-06-11', 73], |
|
|
|
['2000-06-12', 68], |
|
|
|
['2000-06-13', 92], |
|
|
|
['2000-06-14', 130], |
|
|
|
['2000-06-15', 245], |
|
|
|
['2000-06-16', 139], |
|
|
|
['2000-06-17', 115], |
|
|
|
['2000-06-18', 111], |
|
|
|
['2000-06-19', 309], |
|
|
|
['2000-06-20', 206], |
|
|
|
['2000-06-21', 137], |
|
|
|
['2000-06-22', 128], |
|
|
|
['2000-06-23', 85], |
|
|
|
['2000-06-24', 94], |
|
|
|
['2000-06-25', 71], |
|
|
|
['2000-06-26', 106], |
|
|
|
['2000-06-27', 84], |
|
|
|
['2000-06-28', 93], |
|
|
|
['2000-06-29', 85], |
|
|
|
['2000-06-30', 73], |
|
|
|
['2000-07-01', 83], |
|
|
|
['2000-07-02', 125], |
|
|
|
['2000-07-03', 107], |
|
|
|
['2000-07-04', 82], |
|
|
|
['2000-07-05', 44], |
|
|
|
['2000-07-06', 72], |
|
|
|
['2000-07-07', 106], |
|
|
|
['2000-07-08', 107], |
|
|
|
['2000-07-09', 66], |
|
|
|
['2000-07-10', 91], |
|
|
|
['2000-07-11', 92], |
|
|
|
['2000-07-12', 113], |
|
|
|
['2000-07-13', 107], |
|
|
|
['2000-07-14', 131], |
|
|
|
['2000-07-15', 111], |
|
|
|
['2000-07-16', 64], |
|
|
|
['2000-07-17', 69], |
|
|
|
['2000-07-18', 88], |
|
|
|
['2000-07-19', 77], |
|
|
|
['2000-07-20', 83], |
|
|
|
['2000-07-21', 111], |
|
|
|
['2000-07-22', 57], |
|
|
|
['2000-07-23', 55], |
|
|
|
['2000-07-24', 60], |
|
|
|
]; |
|
|
|
|
|
|
|
var dateList = data.map(function(item) { |
|
|
|
return item[0]; |
|
|
|
}); |
|
|
|
var valueList = data.map(function(item) { |
|
|
|
return item[1]; |
|
|
|
}); |
|
|
|
let myChart1 = this.$echarts.init(document.getElementById('Cisualmap1')); |
|
|
|
let myChart2 = this.$echarts.init(document.getElementById('Cisualmap2')); |
|
|
|
// 绘制图表 |
|
|
|
var option = { |
|
|
|
// Make gradient line here |
|
|
|
visualMap: [ |
|
|
|
{ |
|
|
|
show: false, |
|
|
|
type: 'continuous', |
|
|
|
seriesIndex: 0, |
|
|
|
min: 0, |
|
|
|
max: 400, |
|
|
|
}, |
|
|
|
{ |
|
|
|
show: false, |
|
|
|
type: 'continuous', |
|
|
|
seriesIndex: 1, |
|
|
|
dimension: 0, |
|
|
|
min: 0, |
|
|
|
max: dateList.length - 1, |
|
|
|
}, |
|
|
|
], |
|
|
|
|
|
|
|
title: [ |
|
|
|
{ |
|
|
|
left: 'center', |
|
|
|
text: '新建病例', |
|
|
|
}, |
|
|
|
{ |
|
|
|
top: '55%', |
|
|
|
left: 'center', |
|
|
|
text: '已完成病例', |
|
|
|
}, |
|
|
|
], |
|
|
|
tooltip: { trigger: 'axis' }, |
|
|
|
xAxis: [ |
|
|
|
{ data: dateList }, |
|
|
|
{ |
|
|
|
data: dateList, |
|
|
|
gridIndex: 1, |
|
|
|
}, |
|
|
|
], |
|
|
|
yAxis: [{}, { gridIndex: 1 }], |
|
|
|
grid: [{ bottom: '60%' }, { top: '60%' }], |
|
|
|
var option1 = { |
|
|
|
title: { |
|
|
|
left: 'center', |
|
|
|
text: '新建病例', |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|
|
|
}, |
|
|
|
yAxis: { type: 'value' }, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320], |
|
|
|
type: 'line', |
|
|
|
showSymbol: false, |
|
|
|
data: valueList, |
|
|
|
areaStyle: { color: 'rgba(229,244,254,1)' }, |
|
|
|
lineStyle: { color: 'rgb(45,151,213)' }, |
|
|
|
itemStyle: { color: 'rgb(45,151,213)' }, |
|
|
|
smooth: true, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
var option2 = { |
|
|
|
title: { |
|
|
|
left: 'center', |
|
|
|
text: '已完成病例', |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], |
|
|
|
}, |
|
|
|
yAxis: { type: 'value' }, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
data: [820, 932, 901, 934, 1290, 1330, 1320], |
|
|
|
type: 'line', |
|
|
|
showSymbol: false, |
|
|
|
data: valueList, |
|
|
|
xAxisIndex: 1, |
|
|
|
yAxisIndex: 1, |
|
|
|
areaStyle: { color: 'rgba(229,244,254,1)' }, |
|
|
|
lineStyle: { color: 'rgb(45,151,213)' }, |
|
|
|
itemStyle: { color: 'rgb(45,151,213)' }, |
|
|
|
smooth: true, |
|
|
|
}, |
|
|
|
], |
|
|
|
}; |
|
|
|
myChart.setOption(option); |
|
|
|
myChart1.setOption(option1); |
|
|
|
myChart2.setOption(option2); |
|
|
|
}, |
|
|
|
}, |
|
|
|
}; |
|
|
|
|
