柱状图
1、基本属性用法
//设置参数
myCharts.setOption({
title:{
text:"hello word"
},
xAxis:{
type:"category",
data:xData,
},
yAxis:{
type:"value"
},
tooltip:{//提示框工具
trigger:"item"
},
series:{//系列
name:"牛皮",
type:"bar",
data:yData,
color:"green",
markLine:{
data:[{
type:"average",
name:"平均值",
}],
},
markPoint:{
data:[{
type:"min",
name:"最小值"
},
{
type:"max",
name:"最大值"
}
]
}
}
})
},
2、横向柱状图
xAxis:{//调换横纵坐标内容
type:"value"
},
yAxis:{
type:"category",
data:xData,
},
3、图例的使用
legend:{
show:true,
icon:"circle",//形状
top:"10%",//位置
itemWidth:10,
itemHeight:20,//图例大小
textStyle:{//图例文字样式
},
饼状图
//设置参数
myCharts.setOption({
title:{
text:"hello word",
left:"center"
},
legend:{//图例
left:"left",
orient:"verical", //纵向排列
},
tooltip:{
trigger:"item"
},
series:[{//系列
name:"牛皮",
type:"pie",
radius:["20%","70%"],//设置半径 内半径 外半径可以设置为环形图
data:data2,
label:{//标签
show:true，
position:"inside"//outside 外侧展示 inside内展示 center中心展示
},
roseType:"area"//南丁格尔图
}]
})
},
折线图
1、折线图的基本属性用法
myCharts.setOption({
title:{
text:"hello word",
},
tooltip:{//提示框
trigger:"item"
},
yAxis:{
},
xAxis:{
data:xData
},
series:[{//系列
name:"牛皮",
type:"line",//折线图
smooth:"true",//开启平滑的过渡
data:yData,
areaStyle:{},//填充
markPoint:{
data:[
{type:"max",name:"最大值"},
{type:"min",name:"最小值"}]
},
markLine:{
data:[
{type:"average",name:"平均值"}
]
}
},
]
})
},
2、折线图的堆叠
//设置参数
myCharts.setOption({
title:{
text:"hello word",
},
tooltip:{
trigger:"item"
},
yAxis:{
},
xAxis:{
data:xData
},
series:[{//系列
name:"牛皮",
type:"line",//折线图
smooth:"true",//开启平滑的过渡
data:yData,
areaStyle:{},//填充
markPoint:{
data:[
{type:"max",name:"最大值"},
{type:"min",name:"最小值"}]
},
markLine:{
data:[
{type:"average",name:"平均值"}
]
}
}, {
type:"line",
data:aData，
areaStyle:{},//填充
stack:"num"//这里是堆叠
}
]
})
},
散点图
//设置参数
myCharts.setOption({
title:{
text:"hello word",
},
tooltip:{//提示框组件
trigger:"item"
},
xAxis:{
data:xData
},
yAxis:{},
grid:{
show:true,//边框是否显示
left:"20%",
top:"20%",//边距
backgroundColor:"yellow"//背景颜色
},
series:[{//系列
symbolSize:20,//散点大小
name:"牛皮",
type:"scatter",
data:yData,
color:"red",//颜色
emphasis:{//高亮
itemStyle:{
borderColor:"green",
borderWidth:30
}
}
}]
})
},
雷达图
let data2 = result1.map(item => ({
value: [item.finalTotalAmount, item.id, item.outTradeNo],
name: item.userName
}));
console.log(data2)
//设置参数
myCharts.setOption({
title:{
text:"hello word",
},
legend:{
},
tooltip:{
trigger:"item"
},
radar: {
indicator:[// 设置雷达图的指示器
{name:"总金额",max:999},
{name:"主键",max:99999},
{name:"订单交易编号",max:999999999999999},
],
radius:120,//半径
// shape:"circle",//形状
splitNumber:4,//图形分割数
splitArea:{//分割区
areaStyle:{
color:["red","blue","yellow","green"]
}
}
},
series:[{//系列
name:"牛皮",
type:"radar",
data:data2,
areaStyle:{//数据图形的填充
color:"yellow"
}
},
],
lineStyle:{//线的样式
type:"dashed",
color:"black"
}
})
},
扫一扫
1593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
