ECharts常见图表配置

发布网友发布时间：2024-09-29 06:48

共1个回答

热心网友时间：2024-10-18 23:29

用过很多次ECharts图表，每次用的时候都要查文档，也想过进行记录，总是忙于手头工作或者因为惰性没有落实到文章，这次痛定思痛趁着假期记录下，以下代码基于echarts5.0.0版本，出于偷懒，直接copy的项目代码，简单做了调整，可以直接放到ECharts对应示例使用，注释应该是够用的，有问题欢迎留言讨论。

横向柱状图//坐标轴文字样式constYDataTextStyle={color:"#C1E0F9",fontSize:13,align:"right",fontFamily:"PingFangSC-Regular",};option={grid:{top:10,left:75,bottom:10,right:20,},xAxis:{type:"value",show:false,},yAxis:{//坐标轴线axisLine:{show:false,},//坐标轴刻度axisTick:{show:false,},//坐标轴数据data:[{value:"走访宣传",textStyle:YDataTextStyle},{value:"安全隐患",textStyle:YDataTextStyle},{value:"疫情防控",textStyle:YDataTextStyle},{value:"市容环境",textStyle:YDataTextStyle},{value:"出租屋管理",textStyle:YDataTextStyle},{value:"社会秩序",textStyle:YDataTextStyle},{value:"公共服务",textStyle:YDataTextStyle},{value:"拆迁纠纷",textStyle:YDataTextStyle},],},series:[{//类型type:"bar",//数据data:[377,452,645,730,824,945,967,1264],//柱子宽度barWidth:12,//顶部文字label:{show:true,position:"right",valueAnimation:true,fontFamily:"youse",fontSize:14,color:"#A8DAFC",//{a}：系列名{b}：数据名{c}：数据值formatter:"{c}",//距离图形距离distance:15,},//是否显示柱子背景色showBackground:true,//柱子背景色样式backgroundStyle:{color:"rgba(122,188,248,.04)",},//柱子样式itemStyle:{//边框borderColor:"#42B1F8",borderWidth:0.2,//颜色color:{type:"linear",x:0,y:0,x2:1,y2:0,//渐变色colorStops:[{offset:0,color:"rgba(123,133,167,0.00)",//0%处的颜色},{offset:1,color:"rgba(66,177,248,0.40)",//100%处的颜色},],},},},],};

效果如下：

纵向柱状图option={grid:{top:30,left:35,bottom:50,right:10,},legend:{bottom:5,data:["热线电话","巡查上报"],textStyle:{fontFamily:"PingFangSC-Regular",fontSize:12,color:"#fff",},},xAxis:[{type:"category",axisTick:{show:false,},axisLabel:{color:"#C1E0F9",fontSize:13,fontFamily:"PingFangSC-Regular",},data:["5月","6月","7月","8月","9月","10月"],},],yAxis:[{type:"value",position:"left",axisLine:{show:false,//横坐标线lineStyle:{color:"#9EACC1",opacity:0.1,},},axisLabel:{color:"#8497AC",fontSize:12,fontFamily:"PingFangSC-Regular",},axisTick:{show:false,},//水平分隔线样式splitLine:{lineStyle:{color:"#9EACC1",opacity:0.1,},},},],series:[{name:"热线电话",type:"bar",data:[500,250,325,190,240,260],//多个并排柱子设置柱子之间的间距barGap:"50%",//柱子宽度barWidth:14,//顶部文字label:{show:true,position:"top",valueAnimation:true,fontFamily:"Akrobat-Black",fontSize:16,color:"#65DDBC",formatter:"{c}",//距离图形距离distance:5,},//柱子样式itemStyle:{//边框borderColor:"#00E2B4",borderWidth:0.2,//颜色color:{type:"linear",x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:"rgba(0,226,180,0.4)",//底部颜色},{offset:1,color:"rgba(123,133,167,0.00)",//顶部颜色},],},},},{type:"line",data:[500,250,325,190,240,260],lineStyle:{opacity:0,},showSymbol:true,//顶点偏移symbolOffset:[-11,0],//设定为实心点symbol:"circle",//设定实心点的大小symbolSize:5,//设定实线点的颜色color:"#65DDBC",},{name:"巡查上报",type:"bar",data:[180,100,175,110,90,60],//多个并排柱子设置柱子之间的间距barGap:"50%",//柱子宽度barWidth:14,//顶部文字label:{show:true,position:"top",valueAnimation:true,fontFamily:"Akrobat-Black",fontSize:16,color:"#FFBB40",formatter:"{c}",//距离图形距离distance:5,},//柱子样式itemStyle:{//边框borderColor:"#FFBB40",borderWidth:0.2,//颜色color:{type:"linear",x:0,y:0,x2:0,y2:1,colorStops:[{offset:0,color:"rgba(255,187,64,0.36)",//底部颜色},{offset:1,color:"rgba(123,133,167,0.00)",//顶部颜色},],},},},{type:"line",data:[180,100,175,110,90,60],lineStyle:{opacity:0,},showSymbol:true,//顶点偏移symbolOffset:[11,0],//设定为实心点symbol:"circle",//设定实心点的大小symbolSize:5,//设定实线点的颜色color:"#FFBB40",},],};

效果如下：

环形图//色值数组constcolors=['#00B1FF','#65DDBC','#9070CA','#FFBB40','#EA5B51','#0069FF'],//chart饼图色值数组colorsForChart=[],//数据数组data=[11.2,17.6,25.6,9.6,20.8,15.2],//chart饼图数据数组dataForChart=[];//设计图饼图之间有间隙，所以数据之间添加固定间隙数值，颜色之间添加tranparent做饼图间隙//注：这里只是一个思路，不适合照搬colors.forEach((item,index)=>{colorsForChart.push(item,'transparent');dataForChart.push(data[index],1.5);});colors.forEach((item,index)=>{colorsForChart.push(item,'transparent');dataForChart.push(data[index],1.5);});option={series:[{type:'pie',radius:['93%','100%'],color:colorsForChart,label:{show:false},data:dataForChart}]};

效果如下：

仪表盘option={series:[{type:"gauge",//仪表盘半径radius:"85%",//最小的数据值min:0,//最大的数据值max:30,//仪表盘起始角度startAngle:210,//仪表盘结束角度endAngle:-30,//仪表盘指针样式这里用来设置仪表盘色值itemStyle:{color:"#65DDBC",},//进度条progress:{show:true,width:3,},//仪表盘轴线axisLine:{lineStyle:{width:3,color:[[1,"#213B69"]],},},//刻度样式axisTick:{show:false,},//分隔线样式splitLine:{show:false,},//刻度标签axisLabel:{show:false,},//标题title:{show:false,},//仪表盘详情，用于显示数据detail:{//中心偏移量offsetCenter:[0,0],//中心文字样式textStyle:{color:"#65DDBC",fontSize:20},},//仪表盘指针pointer:{show:false,},//表盘中指针的固定点anchor:{show:false,},//系列中的数据内容数组data:[{value:16,},],},],};

效果如下：