|
|
|
export default {
|
|
|
|
name: 'lineChart',
|
|
|
|
template: '',
|
|
|
|
components: {
|
|
|
|
},
|
|
|
|
data(){
|
|
|
|
return {
|
|
|
|
domainName:'http://192.168.0.245:8180/api-web',
|
|
|
|
yAxisData:'',//y序列的数据
|
|
|
|
seriesData:[],//y轴数据
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
setup(props, {attrs, slots, emit}) {
|
|
|
|
//业务性能指标y序列
|
|
|
|
let performanceData=[
|
|
|
|
{
|
|
|
|
|
|
|
|
type: 'value',
|
|
|
|
axisLabel: {
|
|
|
|
formatter: '{value} %'//以百分比显示
|
|
|
|
},
|
|
|
|
}, {
|
|
|
|
name: '单位:万',
|
|
|
|
type: 'value',
|
|
|
|
axisLabel: {
|
|
|
|
show: true,
|
|
|
|
interval: 'right',//居中显示
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]
|
|
|
|
//一般y序列
|
|
|
|
let yAxisCommon={
|
|
|
|
type: 'value',
|
|
|
|
splitLine:{
|
|
|
|
lineStyle: {
|
|
|
|
color:'#0a1b31'
|
|
|
|
}
|
|
|
|
},
|
|
|
|
axisLabel:{
|
|
|
|
color:'#ffffff',
|
|
|
|
},
|
|
|
|
}
|
|
|
|
|
|
|
|
//业务双y轴数据
|
|
|
|
let performanceYData=[
|
|
|
|
{
|
|
|
|
name:'可用性',
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:[120, 132, 101, 134, 90, 230, 210],
|
|
|
|
yAxisIndex:1,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#97d5f4",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#97d5f4'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name:'成功率',
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:[120, 132, 101, 134, 90, 230, 210],
|
|
|
|
yAxisIndex:0,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#efe0a7",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#efe0a7'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name:'响应率',
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:[220, 182, 191, 234, 290, 330, 310],
|
|
|
|
yAxisIndex:0,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#e5abd1",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#e5abd1'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name:'交易量',
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
// stack: 'Total',
|
|
|
|
show:false,
|
|
|
|
data:[150,232,201,154,190,330,410],
|
|
|
|
yAxisIndex:1,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#97aaff",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#97aaff'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
]
|
|
|
|
//一般y轴数据
|
|
|
|
let ySeriesCommon=[
|
|
|
|
{
|
|
|
|
name: '网络投票',
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
stack: 'Total',
|
|
|
|
data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
|
yAxisIndex:0,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:"#97d5f4",//tooltip里的小圆点颜色
|
|
|
|
lineStyle:{
|
|
|
|
color:'#97d5f4'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: '涉税文书',
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
stack: 'Total',
|
|
|
|
data: [220, 182, 191, 234, 290, 330, 310],
|
|
|
|
showSymbol:false,
|
|
|
|
yAxisIndex:0,
|
|
|
|
itemStyle : {
|
|
|
|
color:"#ffffff",
|
|
|
|
normal : {
|
|
|
|
color:'#efe0a7',
|
|
|
|
lineStyle:{
|
|
|
|
color:'#efe0a7'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: '网上申报',
|
|
|
|
type: 'line',
|
|
|
|
smooth:true,
|
|
|
|
stack: 'Total',
|
|
|
|
data: [150, 232, 201, 154, 190, 330, 410],
|
|
|
|
yAxisIndex:0,
|
|
|
|
showSymbol:false,
|
|
|
|
itemStyle : {
|
|
|
|
normal : {
|
|
|
|
color:'#e5abd1',
|
|
|
|
lineStyle:{
|
|
|
|
color:'#e5abd1'
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]
|
|
|
|
|
|
|
|
const {proxy} = Vue.getCurrentInstance();
|
|
|
|
|
|
|
|
// 挂载完
|
|
|
|
Vue.onMounted(() => {
|
|
|
|
/*$.get(proxy.domainName,function(res){
|
|
|
|
|
|
|
|
})*/
|
|
|
|
proxy.yAxisData=performanceData;
|
|
|
|
proxy.seriesData=performanceYData;
|
|
|
|
|
|
|
|
console.log('222',proxy.yAxisData)
|
|
|
|
const chartDom = document.getElementById('line-echart');
|
|
|
|
const myChart = echarts.init(chartDom);
|
|
|
|
let option;
|
|
|
|
|
|
|
|
option = {
|
|
|
|
title: {
|
|
|
|
text: ''
|
|
|
|
},
|
|
|
|
tooltip: {
|
|
|
|
trigger: 'axis',
|
|
|
|
backgroundColor:'rgba(50,50,50,0.7)',
|
|
|
|
borderColor:"#333",
|
|
|
|
textStyle:{
|
|
|
|
color:"#fff",
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
legend: {
|
|
|
|
data: ['网络投票', '涉税文书', '网上申报'],
|
|
|
|
itemHeight:0,//图例圆圈大小设置
|
|
|
|
y:'7px',
|
|
|
|
textStyle: {
|
|
|
|
color: '#ffffff',
|
|
|
|
fontsize:"12px"
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
grid: {
|
|
|
|
left: '3%',
|
|
|
|
right: '4%',
|
|
|
|
bottom: '3%',
|
|
|
|
containLabel: true,
|
|
|
|
show:true,//设置网格区域背景色
|
|
|
|
borderColor:"transparent",
|
|
|
|
backgroundColor:new echarts.graphic.LinearGradient(
|
|
|
|
0,0,0,1,
|
|
|
|
[
|
|
|
|
{offset:0,color:'#3ac9fb'},
|
|
|
|
{offset:1,color:'#2a81f3'}
|
|
|
|
]
|
|
|
|
)
|
|
|
|
},
|
|
|
|
toolbox: {
|
|
|
|
feature: {
|
|
|
|
saveAsImage: {}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
xAxis: {
|
|
|
|
type: 'category',
|
|
|
|
boundaryGap: false,
|
|
|
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
|
|
|
|
|
|
|
axisLine:{
|
|
|
|
show:false,//是否显示坐标线
|
|
|
|
},
|
|
|
|
axisTick: {
|
|
|
|
show: false //是否显示坐标刻度
|
|
|
|
},
|
|
|
|
axisLabel:{
|
|
|
|
color:'#ffffff',
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
yAxis: proxy.yAxisData,
|
|
|
|
series: proxy.seriesData,
|
|
|
|
itemStyle:{
|
|
|
|
showSymbol:false
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
option && myChart.setOption(option);
|
|
|
|
|
|
|
|
let xAxisData=proxy.getRangeData();
|
|
|
|
// console.log('111',xAxisData)
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
|
|
const getRangeData=()=> {
|
|
|
|
//获取当前月份的最后一天,当前日期
|
|
|
|
const date = new Date();
|
|
|
|
let currentMonth = date.getMonth();
|
|
|
|
const nextMonth = ++currentMonth;
|
|
|
|
const nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
|
|
|
|
const oneDay = 1000 * 60 * 60 * 24;
|
|
|
|
const lastTime = new Date(nextMonthFirstDay - oneDay);
|
|
|
|
const lastDay = lastTime.getDate();
|
|
|
|
|
|
|
|
const dd = date.getDate();
|
|
|
|
let rangeData=[];
|
|
|
|
if(dd+15>lastDay){
|
|
|
|
console.log("11",dd)
|
|
|
|
const start=lastDay-15;
|
|
|
|
const end=lastDay;
|
|
|
|
for(let i=start;i<end;i++){
|
|
|
|
rangeData.push(i+1)
|
|
|
|
}
|
|
|
|
}else{
|
|
|
|
const start=dd;
|
|
|
|
const end=dd+15;
|
|
|
|
for(let i=start;i<end;i++){
|
|
|
|
console.log("44",i)
|
|
|
|
rangeData.push(i)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return rangeData;
|
|
|
|
}
|
|
|
|
|
|
|
|
return{
|
|
|
|
getRangeData
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |
|
|
\ No newline at end of file |
...
|
...
|
|
