echarts爬坑记录

2025-02-18 技术教程

一、
1、echarts Y轴刻度保留小数设置，以及设置刻度间隔
默认echarts会给你把最大值，最小值之间的这段距离分为5段，所以如果你的值都在6到6.5之间的话，你就设置min为6，max为6.5就可以

2、不显示柱状图上方的数据

在series里面的label里面进行设置
设置label:{show: false}即可
修改掉changeChartStyle里面的series下面的label对象的normal对象下面的show属性为false

3、tooltip表示悬浮框，
backgroundColor: "rgba(62,77,95,0.8)"：表示悬浮框的背景颜色，
shadowStyle:{color:'rgba(14,36,64,0.8)'}：表示悬浮框移入到每一列的背景颜色，需要设置type: 'shadow', 才起作用

二、柱状图学习

效果图：

对柱形图各部分分析:（重点）：

实现：
根据柱形每个部分的专业名称去寻找官网中的配置项手册对应的属性，然后实现你需要的效果

代码：

<!DOCTYPE html><html><head> <title>echarts</title></head><script src="js/jquery-1.11.1.min.js"></script><script type="text/javascript" src="js/echarts.min.js"></script><body > <div id="_top" > </div></body><script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('_top')); // 指定图表的配置项和数据 var option = { //-------------- 标题 title ---------------- title: { text: '主标题', textStyle:{ //---主标题内容样式 color:'#fff' }, subtext:'副标题', //---副标题内容样式 subtextStyle:{ color:'#bbb' }, padding:[0,0,100,100] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位 }, //---------------- 图例 legend ----------------- legend: { type:'plain', //----图例类型，默认为'plain'，当图例很多时可使用'scroll' top:'1%', //----图例相对容器位置,top\bottom\left\right selected:{ '销量':true, //----图例选择,图形加载出来会显示选择的图例，默认为true }, textStyle:{ //----图例内容样式 color:'#fff', //---所有图例的字体颜色 //backgroundColor:'black', //---所有图例的字体背景色 }, tooltip:{ //图例提示框，默认不显示 show:true, color:'red', }, data:[ //----图例内容 { name:'销量', icon:'circle', //----图例的外框样式 textStyle:{ color:'#fff', //----单独设置某一个图例的颜色 //backgroundColor:'black',//---单独设置某一个图例的字体背景色 } } ], }, //-------------- 提示框 ----------------- tooltip: { show:true, //---是否显示提示框,默认为true trigger:'item', //---数据项图形触发 axisPointer:{ //---指示样式 type:'shadow', axis:'auto', }, padding:5, textStyle:{ //---提示框内容样式 color:"#fff", }, }, //------------- grid区域 ---------------- grid:{ show:false, //---是否显示直角坐标系网格 top:80, //---相对位置，top\bottom\left\right containLabel:false, //---grid 区域是否包含坐标轴的刻度标签 tooltip:{ //---鼠标焦点放在图形上，产生的提示框 show:true, trigger:'item', //---触发类型 textStyle:{ color:'#666', }, } }, //------------- x轴 ------------------- xAxis: { show:true, //---是否显示 position:'bottom', //---x轴位置 offset:0, //---x轴相对于默认位置的偏移 type:'category', //---轴类型，默认'category' name:'月份', //---轴名称 nameLocation:'end', //---轴名称相对位置 nameTextStyle:{ //---坐标轴名称样式 color:"#fff", padding:[5,0,0,-5], //---坐标轴名称相对位置 }, nameGap:15, //---坐标轴名称与轴线之间的距离 //nameRotate:270, //---坐标轴名字旋转 axisLine:{ //---坐标轴轴线 show:true, //---是否显示 //------------------- 箭头 ------------------------- symbol:['none', 'arrow'], //---是否显示轴线箭头 symbolSize:[8, 8] , //---箭头大小 symbolOffset:[0,7], //---箭头位置 //------------------- 线 ------------------------- lineStyle:{ color:'#fff', width:1, type:'solid', }, }, axisTick:{ //---坐标轴刻度 show:true, //---是否显示 inside:true, //---是否朝内 lengt:3, //---长度 lineStyle:{ //color:'red', //---默认取轴线的颜色 width:1, type:'solid', }, }, axisLabel:{ //---坐标轴标签 show:true, //---是否显示 inside:false, //---是否朝内 rotate:0, //---旋转角度 margin: 5, //---刻度标签与轴线之间的距离 //color:'red', //---默认取轴线的颜色 }, splitLine:{ //---grid 区域中的分隔线 show:false, //---是否显示，'category'类目轴不显示，此时我的X轴为类目轴，splitLine属性是无意义的 lineStyle:{ //color:'red', //width:1, //type:'solid', }, }, splitArea:{ //--网格区域 show:false, //---是否显示，默认false }, data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],//内容 }, //---------------------- y轴 ------------------------ yAxis: { show:true, //---是否显示 position:'left', //---y轴位置 offset:0, //---y轴相对于默认位置的偏移 type:'value', //---轴类型，默认'category' name:'销量', //---轴名称 nameLocation:'end', //---轴名称相对位置value nameTextStyle:{ //---坐标轴名称样式 color:"#fff", padding:[5,0,0,5], //---坐标轴名称相对位置 }, nameGap:15, //---坐标轴名称与轴线之间的距离 //nameRotate:270, //---坐标轴名字旋转 axisLine:{ //---坐标轴轴线 show:true, //---是否显示 //------------------- 箭头 ------------------------- symbol:['none', 'arrow'], //---是否显示轴线箭头 symbolSize:[8, 8] , //---箭头大小 symbolOffset:[0,7], //---箭头位置 //------------------- 线 ------------------------- lineStyle:{ color:'#fff', width:1, type:'solid', }, }, axisTick:{ //---坐标轴刻度 show:true, //---是否显示 inside:true, //---是否朝内 lengt:3, //---长度 lineStyle:{ //color:'red', //---默认取轴线的颜色 width:1, type:'solid', }, }, axisLabel:{ //---坐标轴标签 show:true, //---是否显示 inside:false, //---是否朝内 rotate:0, //---旋转角度 margin: 8, //---刻度标签与轴线之间的距离 //color:'red', //---默认取轴线的颜色 }, splitLine:{ //---grid 区域中的分隔线 show:true, //---是否显示，'category'类目轴不显示，此时我的y轴为类目轴，splitLine属性是有意义的 lineStyle:{ color:'#666', width:1, type:'dashed', //---类型 }, }, splitArea:{ //--网格区域 show:false, //---是否显示，默认false } }, //------------ 内容数据 ----------------- series: [ { name: '销量', //---系列名称 type: 'bar', //---类型 legendHoverLink:true, //---是否启用图例 hover 时的联动高亮 label:{ //---图形上的文本标签 show:false, position:'insideTop', //---相对位置 rotate:0, //---旋转角度 color:'#eee', }, itemStyle:{ //---图形形状 color:'blue', barBorderRadius:[18,18,0,0], }, barWidth:'20', //---柱形宽度 barCategoryGap:'20%', //---柱形间距 data: [3020, 4800, 3600, 6050, 4320, 6200,5050,7200,4521,6700,8000,5020] } ] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option);</script></html>

三、修改悬浮框tooltip里面的文字显示
在tooltip里面，定义
formatter:function(params){
return params[0].axisValue.slice(1)+ " 火警数："+params[0].value
}
params表示每一条数据的对象

怎么给列表添加数字排序呢

在yAxis里面添加

axisLabel:{interval: 0,margin: 225, textStyle: { align: 'left', fontSize: 13 }, rich: { a: { color: '#fff', backgroundColor: '#FAAA39', width: 20, height: 20, align: 'center', borderRadius: 2 }, b: { color: '#fff', backgroundColor: '#4197FD', width: 20, height: 20, align: 'center', borderRadius: 2 } }, formatter: function(params) { if (parseInt(params.slice(0, 1)) < 3) { return [ '{a|' + (parseInt(params.slice(0, 1)) + 1) + '}' + ' ' + params.slice(1) ].join('\n') } else { return [ '{b|' + (parseInt(params.slice(0, 1)) + 1) + '}' + ' ' + params.slice(1) ].join('\n') } }}

然后，在给yAxis赋值的时候，添加数字序号

var nxData = [];for (var i = xData.length-1; i >=0; i--) { nxData.push(i + xData[i]); //nxData这里面就包含了数字序号}CHART["_topUnitResult"].setOption({ yAxis: { type: 'category', data: nxData, }, series: [{ name: '报警数', type: 'bar', data: yData }]});