echarts常用图形笔记

柱状图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 } }) },