update
This commit is contained in:
parent
b8a53d8d90
commit
29ba707cde
@ -270,90 +270,78 @@ export default {
|
|||||||
var myChart = this.$echarts.init(
|
var myChart = this.$echarts.init(
|
||||||
document.getElementById('ManuEchart')
|
document.getElementById('ManuEchart')
|
||||||
);
|
);
|
||||||
var MyOption = {
|
var option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'axis'
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow'
|
|
||||||
},
|
},
|
||||||
dataZoom: [{
|
xAxis: [{
|
||||||
type: 'slider', // 设置为滑动条型式
|
|
||||||
show: true, // 显示dataZoom组件
|
|
||||||
start: 0, // 默认显示的起始位置为0
|
|
||||||
end: 30, // 默认显示的结束位置为100
|
|
||||||
handleSize: 8, // 滑动条的手柄大小
|
|
||||||
handleStyle: {
|
|
||||||
color: '#DCE2E8' // 滑动条的手柄颜色
|
|
||||||
},
|
|
||||||
xAxisIndex: [0], // 表示控制第一个x轴
|
|
||||||
filterMode: 'filter' // 设置为filter模式,即数据超过范围时会被过滤掉
|
|
||||||
}]
|
|
||||||
,
|
|
||||||
backgroundColor: '#fff', // 悬浮框背景色
|
|
||||||
borderColor: '#000', // 悬浮框边框颜色
|
|
||||||
borderWidth: 1, // 悬浮框边框宽度
|
|
||||||
textStyle: { // 悬浮框文字样式
|
|
||||||
color: '#000',
|
|
||||||
fontSize: 12
|
|
||||||
}
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
type: 'category',
|
type: 'category',
|
||||||
data: xline,
|
data: xline,
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#76aaff',
|
color: "#ffffff"
|
||||||
width: 2,
|
|
||||||
type: "solid"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
}],
|
||||||
yAxis: {
|
yAxis: [{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
|
splitNumber: 4,
|
||||||
splitLine: {
|
splitLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#76aaff',
|
type: 'dashed',
|
||||||
|
color: '#DDD'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
axisLine: {
|
axisLine: {
|
||||||
show: true,
|
show: false,
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#76aaff',
|
color: "#ffffff"
|
||||||
width: 2,
|
},
|
||||||
type: "solid"
|
},
|
||||||
|
nameTextStyle: {
|
||||||
|
color: "#ffffff"
|
||||||
|
},
|
||||||
|
splitArea: {
|
||||||
|
show: false
|
||||||
}
|
}
|
||||||
},
|
}],
|
||||||
axisLabel: {//y轴文字的配置
|
series: [{
|
||||||
textStyle: {
|
name: '访问量',
|
||||||
color: '#76aaff',
|
|
||||||
margin: 15
|
|
||||||
},
|
|
||||||
// formatter: '{value} %'//y轴的每一个刻度值后面加上‘%’号
|
|
||||||
}
|
|
||||||
},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
data: yline,
|
|
||||||
type: 'line',
|
type: 'line',
|
||||||
label: {//文字的显示
|
|
||||||
show: true, //默认 显示文字
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
data: yline,
|
data: yline,
|
||||||
type: 'bar'
|
lineStyle: {
|
||||||
|
normal: {
|
||||||
|
width: 8,
|
||||||
|
color: {
|
||||||
|
type: 'linear',
|
||||||
|
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#A9F387' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#48D8BF' // 100% 处的颜色
|
||||||
|
}],
|
||||||
|
globalCoord: false // 缺省为 false
|
||||||
},
|
},
|
||||||
],
|
shadowColor: 'rgba(72,216,191, 0.3)',
|
||||||
dataZoom: {
|
shadowBlur: 10,
|
||||||
yAxisIndex: [0],
|
shadowOffsetY: 20
|
||||||
type: 'inside',
|
|
||||||
start: 0,
|
|
||||||
end: 100,
|
|
||||||
zoomLock: true,
|
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: '#fff',
|
||||||
|
borderWidth: 10,
|
||||||
|
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||||
|
shadowBlur: 100,*/
|
||||||
|
borderColor: "#A9F387"
|
||||||
}
|
}
|
||||||
myChart.setOption(MyOption, true);
|
},
|
||||||
|
smooth: true
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
myChart.setOption(option, true);
|
||||||
},
|
},
|
||||||
// 获取标签对象
|
// 获取标签对象
|
||||||
GetNav(id) {
|
GetNav(id) {
|
||||||
|
Loading…
Reference in New Issue
Block a user