上图上效果图：
getdata(){
let data={
xDatas: ["服务器", "交换机", "路由器", "设备", "终端", "防火墙", "动环设备"],
yDatas: ["152", "93", "6", "0", "0", "0", "0"]
}
let coordY=[];
for(let i=0;i<data.yDatas.length;i++){
coordY.push({coord:[i,data.yDatas[i]]});
}
this.init(data.xDatas,data.yDatas,coordY);
},
init(xDatas,yDatas,coordY) {
this.option = {
grid: {
top: '20%',
left: '0%',
right: '0%',
bottom: '0%',
containLabel: true
},
xAxis: {
type: "category",
data: xDatas,
axisLabel: {
color: '#E7FAFF',
fontSize: 12,
fontFamily: 'PingFang SC',
fontWeight: 'normal',
rotate: 20,
},
axisLine: {
lineStyle: {
color: '#6F7E93',
width: 1,
}
},
splitLine: {
show: false,
},
},
yAxis: {
type: "value",
name: "（个）",
nameTextStyle: {
color: "#A8C7DB",
fontSize: 12,
fontFamily: 'PingFang SC',
fontWeight: 600,
padding: [0, 0, 0, -35],
},
nameGap:15,
nameLocation: "end",
splitLine: {
show: false,
},
axisLabel: {
color: '#A8C7DB',
fontSize: 12,
fontFamily: 'PingFang SC',
fontWeight: 600,
},
},
series: [
{
data: yDatas,
type: "bar",
barWidth: 4,
itemStyle: {//graphic报错就自己搞个其他颜色，或者自己引用一下
color: new graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'rgba(113, 255, 205, 0.4405)'},
{offset: 1, color: '#0C1528'}
]
)
},
label: {
show: true,
position: 'top',
color: '#ffffff',
fontSize: 12,
fontFamily: 'PingFang SC',//要用字体自己下
fontWeight: 600,
distance:18,
}
},
{
data: yDatas,
type: "line",
smooth: true,
itemStyle: {
color: '#71FFCD',
borderColor: '#79C6FF',
borderWidth: 3,
opacity: 0.3,
},
markPoint: {
symbol: 'circle',
symbolSize: 25, // 设置大圆的大小
itemStyle: {
color: 'transparent',
borderColor: '#79C6FF',
opacity: 0.3,
borderWidth: 4,
},
data: coordY //这个就是折线点上的圈
},
lineStyle: {
width: 1,
color: '#71FFCD'
},
symbolSize: 8, // 设置小圆的大小
},
],
};
},
407
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
