本文介绍了Echarts中柱形图的配置，包括柱形图从下往上延伸、Y轴反转、值越小柱形图越长的实现方法，并列举了地图点击事件、环形图图例、数据颜色分配不均衡等问题的解决方案。
v-charts环形图自定义图例后小圆点不见了
<ve-ring v-bind:data="intentionChartData"
v-bind:settings="ringChatSetting"
v-bind:height="'240px'"
v-bind:tooltip="tooltip"
v-if="intentionChartData && intentionChartData.rows && intentionChartData.rows.length">
</ve-ring>
tooltip: {
trigger: 'item',
formatter: function(params) {
return `<span style="display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:10px;background:`
+params.color+`"></span>`+params.name + ': ' + params.value + '(' + params.percent.toFixed(1) + '%)'
}
},
echarts地图出现重复点击事件
myChart.setOption(optionMap);
//关闭点击事件
myChart.off('click')
myChart.on('click', function (mapParams) {});echarts地图数据变化大导致颜色分配不均衡，最大最小值基本同一个颜色
//data是后台返回的数据
var lengedarr = []for (var i = 0; i < data.length; i++) {
lengedarr.push(data[i].value)
}
map_flow_provice.series[0].data = dataList;
if(lengedarr.length){
map_flow_provice.visualMap.max = Math.max(...lengedarr)
map_flow_provice.visualMap.min = Math.min(...lengedarr)
}else {
map_flow_provice.visualMap.max = 0
map_flow_provice.visualMap.min = 200
}Y轴加%
yAxis: {
axisLabel: {
formatter: function (val) {
return val * 100 + '%';
}
}
}
Echarts中tooltip超出外层div显示不全问题
Echarts中tooltip超出外层div显示不全问题_木雷双雄7的博客-优快云博客_echarts tooltip不显示
echarts宽度100%变成了100px
一开始是display：none；在一开始初始化执行js的时候找不到这个元素，所以会出现问题。解决方法就是，在echarts初始化之前再用js获取当前屏幕的大小，然后再给他设置宽度就可以了。
| 1 2 3 4 |
|
柱子上直接展示数值 负数的数值展示在下面 加上%
var labelTop = {
normal: {
label: {
show: true,
position: 'top',
formatter: function (value) {
if (ifPercent) {
return value.value + "%";
} else {
return value.value;
}
}
}
},
}
var labelBottom = {
normal: {
label: {
show: true,
position: 'bottom',
formatter: function (value) {
if (ifPercent) {
return value.value + "%";
} else {
return value.value;
}
}
}
},
}
for (var i = 0; i < serverOption.series.length; i++) {
if (serverOption.series[i].data < 0) {
serverOption.series[i].itemStyle = labelBottom;
} else {
serverOption.series[i].itemStyle = labelTop;
}
}解决legend放在下面的时候只显示一部分的问题
option.legend().setY("bottom");
option.legend().setX("center");
option.legend().padding(10); // 距外边的距离
Grid grid = new Grid();
grid.setBottom("50");
option.setGrid(grid);legend属性设置
option.legend().orient(Orient.vertical); // vertical垂直摆放还是并排horizontal摆放
option.legend().borderWidth(10); // legend边框宽度
option.legend().itemHeight(10); //legend的高度
option.legend().itemGap(10); //legend的高度间距
option.legend().align(Align.bottom); //对齐方式yAxis.axisLabel.margin：刻度标签与轴线之间的距离。默认值是8，可以改小一点。不过本来的值已经很小了，这个没多大作用。
yAxis.axisLabel.formatter：刻度标签的内容格式器，支持字符串模板和回调函数两种形式。比如可以设置太长了换行之类的。
grid.left：grid 组件离容器左侧的距离。默认值是10%。
echarts柱形图从下往上延伸 y轴反转 值越小柱形图越长
大家知道怎么实现的嘛 实现好一下午还做出来 哈哈 想要的留言 有时间我会详细写下来
首先举个栗子：
效果图
Option option = EchartHelper.generateOption();
//设置legend
String dealerRankTrendName = "商擎排名";
String dealerEngineTotalScoreName = "商擎分";
option.legend().data(dealerRankTrendName, dealerEngineTotalScoreName);
//设置xAxis
Axis xAxis = new CategoryAxis();
xAxis.axisTick().setShow(false);
xAxis.setData((dealerRankTrendList.stream().map(x -> x.getReportDate()).collect(Collectors.toList())));
xAxis.setBoundaryGap(true); //x轴数据自动调整
option.xAxis(xAxis);
//设置yAxis
Axis yAxisLeft = new ValueAxis();
SplitLine splitLine = new SplitLine();
splitLine.setShow(false);
yAxisLeft.setSplitLine(splitLine);//隐藏y轴指示线
yAxisLeft.setMax(0);
yAxisLeft.setMin(10);
yAxisLeft.setBoundaryGap(true); //x轴数据自动调整
option.yAxis(yAxisLeft);
Axis yAxisRight = new ValueAxis();
yAxisRight.setSplitLine(splitLine);
yAxisRight.setMax(700);
yAxisRight.setMin(0);
yAxisRight.setBoundaryGap(true); //x轴数据自动调整
option.yAxis(yAxisRight);
//设置series
Line line1 = SeriesFactory.newLine(dealerEngineTotalScoreName);
line1.setData((dealerEngineTotalScoreList.stream().map(x -> x.getTotalScore()).collect(Collectors.toList())));
line1.setSmooth(false);
line1.setyAxisIndex(1);
option.series(line1);
Bar chartSeries = SeriesFactory.newBar(dealerRankTrendName);
chartSeries.setData((dealerRankTrendList.stream().map(x -> x.getRankNum()).collect(Collectors.toList())));
chartSeries.setyAxisIndex(0);
option.series(chartSeries);
return option;
js写法：
<div class="box-bd">
<div style="height: 330px;width:100%" id="rankContainer"></div>
<div style="display: none" id="rankContainerhtml"></div>
</div>
<div name="loading" class="ics_loading n-hide"><i class="loading-icon"></i></div>var rankContainerJson = null;
function getDealerRankTrend(startDate, endDate, dealerId, factoryId) {
var loadingView = $("#rankContainer").parent().parent().find(".ics_loading");
if (loadingView) {
loadingView.removeClass("fn-hide");
}
$.get("../XX/getOO", {
"startDate": startDate,
"endDate": endDate,
"dealerId": dealerId,
"factoryId": factoryId
}, function (data) {
chartContainer1 = echarts.init(document.getElementById('rankContainer'), 'shine');
chartContainer1.resize();
if (data && data.returncode === 0) {
var serverOption = data.result;
rankContainerJson = serverOption;
var tooltip = {
trigger: 'axis',
formatter: function (params) {
var alertStr = params[0].name;
for (var i = 0; i < params.length; i++) {
alertStr += "<br/><span style='display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:" + params[i].color + ";'></span>";
alertStr += params[i].seriesName + ": " + params[i].value;
}
return alertStr;
},
}
serverOption.tooltip = tooltip;
if (serverOption && typeof serverOption === "object") {
echartsOptionInit(serverOption);
chartContainer1.setOption(serverOption, true);
}
}
if (loadingView) {
loadingView.addClass("fn-hide");
}
});
}各个属性说明 以下引自Echarts数据可视化grid直角坐标系（xAxis、yAxis），开发全解+完美注释_腾讯数据架构师的博客-优快云博客
grid=[{
show:true, //是否显示
zlevel:0, //所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
left:"10%", //组件离容器左侧的距离,百分比字符串或整型数字
top:60, //组件离容器上侧的距离，百分比字符串或整型数字
right:"auto", //组件离容器右侧的距离,百分比字符串或整型数字
bottom:"auto", //组件离容器下侧的距离,百分比字符串或整型数字
width:"auto", //图例宽度
height:"auto", //图例高度
containLabel: true, //grid 区域是否包含坐标轴的刻度标签，
backgroundColor:"transparent", //标题背景色
borderColor:"#ccc", //边框颜色
borderWidth:0, //边框线宽
shadowColor:"red", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //阴影的模糊大小
tooltip:{ //坐标系特定的 tooltip 设定
show:true, //是否显示提示框组件，包括提示框浮层和 axisPointer
trigger:"axis", //触发类型 none不触发 'item' 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis' 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
position: ['50%', '50%'], //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
1. 字符串模板
模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等。 在 trigger 为 'axis' 的时候，会有多个系列的数据，此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a}，{b}，{c}，{d} 含义不一样。 其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为：
-
折线（区域）图、柱状（条形）图、K线图 :
{a}（系列名称），{b}（类目值），{c}（数值）,{d}（无） -
散点图（气泡）图 :
{a}（系列名称），{b}（数据名称），{c}（数值数组）,{d}（无） -
地图 :
{a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无） -
饼图、仪表盘、漏斗图:
{a}（系列名称），{b}（数据项名称），{c}（数值）,{d}（百分比）
更多其它图表模板变量的含义可以见相应的图表的 label.formatter 配置项。
示例：
formatter: '{b0}: {c0}<br />{b1}: {c1}'
backgroundColor:"transparent", //标题背景色
borderColor:"#ccc", //边框颜色
borderWidth:0, //边框线宽
padding:5, //图例内边距，单位px 5 [5, 10] [5,10,5,10]
textStyle:mytextStyle, //文本样式
},
}];
xAxis=[
{
show:true, //是否显示 x 轴
gridIndex:0, //x 轴所在的 grid 的索引，默认位于第一个 grid
position:"bottom", //x 轴的位置。"top"，"bottom"，默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧
offset:0, //X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用
type:"category", //坐标轴类型。'value' 数值轴，适用于连续数据。'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。'log' 对数轴。适用于对数数据
name:'时间', //坐标轴名称
nameLocation:"end", //坐标轴名称显示位置。可选：'start','middle','end'
nameTextStyle:mytextStyle, //坐标轴名称的文字样式
nameGap:15, //坐标轴名称与轴线之间的距离
nameRotate:0, //坐标轴名字旋转，角度值
inverse:false, //是否是反向坐标轴
boundaryGap:true, //类目轴中 boundaryGap 可以配置为 true 和 false。非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效['20%', '20%']
min:null, //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。不设置时会自动计算最小值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
max:null, //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。不设置时会自动计算最大值保证坐标轴刻度的均匀分布。在类目轴中，也可以设置为类目的序数
scale:false, //只在数值轴中（type: 'value'）有效。是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。在设置 min 和 max 之后该配置项无效。
splitNumber:5, //坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整
minInterval:0, //自动计算的坐标轴最小间隔大小,例如可以设置成1保证坐标轴分割刻度显示成整数。只在数值轴中（type: 'value'）有效。
logBase:10, //对数轴的底数，只在对数轴中（type: 'log'）有效
silent:false, //坐标轴是否是静态无法交互
triggerEvent:false, //坐标轴的标签是否响应和触发鼠标事件
axisLine:{ //坐标 轴线
show:true, //是否显示坐标轴轴线
onZero:true, //X 轴或者 Y 轴的轴线是否在另一个轴的 0 刻度上，只有在另一个轴为数值轴且包含 0 刻度时有效
lineStyle:mylineStyle
},
axisTick :{ //坐标轴刻度相关设置
show:true, //是否显示坐标轴刻度。
alignWithLabel:false, //类目轴中在 boundaryGap 为 true 的时候有效，可以保证刻度线和标签对齐
interval:auto, //坐标轴刻度的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
inside:false, //坐标轴刻度是否朝内，默认朝外。
length:5, //坐标轴刻度的长度。
lineStyle:mylineStyle
},
axisLabel:{ //坐标轴刻度标签的相关设置
show:true, //是否显示
interval:"auto", //坐标轴刻度标签的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，如果值为 2，表示隔两个标签显示一个标签，以此类推
inside:false, //刻度标签是否朝内，默认朝外
rotate:0, //刻度标签旋转的角度，在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。旋转的角度从 -90 度到 90 度
margin:8, //刻度标签与轴线之间的距离
formatter: function (value, index) { //使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
return value+"kg";
},
showMinLabel:null, //是否显示最小 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最小 tick 的 label）
showMaxLabel:null, //是否显示最大 tick 的 label。可取值 true, false, null。默认自动判定（即如果标签重叠，不会显示最大 tick 的 label）
textStyle:mytextStyle
},
splitLine:{ //坐标轴在 grid 区域中的分隔线。
show:true, //是否显示分隔线。默认数值轴显示，类目轴不显示。
interval:"auto", //坐标轴分隔线的显示间隔，在类目轴中有效。默认会采用标签不重叠的策略间隔显示标签。可以设置成 0 强制显示所有标签。如果设置为 1，表示『隔一个标签显示一个标签』，可以用数值表示间隔的数据，也可以通过回调函数控制。回调函数格式如下：
lineStyle:mylineStyle
},
splitArea:{ //坐标轴在 grid 区域中的分隔区域，默认不显示。
interval:"auto",
show:false, //是否显示分隔区域
areaStyle:myareaStyle
},
data : ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], //类目数据，在类目轴（type: 'category'）中有效。
zlevel:0, //X 轴所有图形的 zlevel 值。
z:0, //X 轴组件的所有图形的z值
}
];
yAxis=xAxis; //y轴配置内容同x轴
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
