echarts legend 排列问题

我们可以看看下面效果图：

legend.orient：图例列表的布局朝向。可选：'horizontal'、'vertical'。

legend.icon：图例项的 icon。除了 echarts 官方提供的标记类型，还支持图片链接和矢量图。

legend.align：图例标记和文本的对齐。可选：'auto'、'left'、‘right’。

legend 图例组件可以分组。

legend: [{icon : 'bar',data : [ '直接访问', '邮件营销'],x : 'left', //居左显示y: 'top',    //延Y轴顶部显示},{icon : 'bar',data : [ '联盟广告', '视频广告', '搜索引擎'],x : 'right', //居右显示y: 'top',    //延Y轴顶部显示}
],

除了 x、y 可以设置上述设置，每个小 legend 的 x 和 y 的值，定好每个小 legend 所在的绝对位置。

目标图例：

我们一个每个图例进行定位，当然也可以进行分组，下面是实现方式：


legend:[{orient: 'horizontal',x : '5%',bottom:'20px',width:'50px',align: 'left',data: ['大修'],}...
],
// 或者
legend:[{orient: 'horizontal',x : '5%',bottom:'20px',width:'50px',align: 'left',data: ['大修', '小修'],},{orient: 'horizontal',x : '30%',bottom:'20px',width:'50px',align: 'left',data: ['二保', '一保'],},{orient: 'horizontal',x : '55%',bottom:'20px',width:'50px',align: 'left',data: ['事故', '一保(外)'],},{orient: 'horizontal',x : '80%',bottom:'20px',width:'50px',align: 'left',data: ['外修', '中修'],}
],

echarts legend 排列问题相关推荐

echarts legend文字配置多个颜色（转）
困扰很久的问题终于解决了 oh yea! echarts legend文字配置多个颜色 legend: { data: [ { name:'直接访问', icon : 'circle', textSt ...
echarts legend修改形状
legend: {icon: "circle", // 字段控制形状类型包括 circle,rect,line,roundRect,triangle,diamond,pin,ar ...
echarts legend颜色_echarts数据可视化图表（二）：双柱状图
echarts数据可视化图表(二):双柱状图效果图: html js var loadEcharts09 = function () { var myChartss = echarts.init(d ...
d3.js 教程模仿echarts legend功能
上一节记录没有加上echarts的legend功能,这一小节补一下. 1. 数据我们可以从echarts中看出,折线数据并不是我们传进入的原始数据(多数情况下我们也不会修改原始数据),而是原始数组的 ...
echarts legend位置_一起读 ECharts 配置项手册之 series[i]-line（上）
之前的文章写得都比较杂,还总是想不到要写点什么-- 所以最近打算把 ECharts 所有系列挨个聊一遍,写一个 series 系列的简单介绍,解决一大段时间的难选题问题- -b,顺便方便比我还新的新手 ...
Echarts legend属性使用
Echarts的legend属性是对图例组件的相关配置而legend就是Echarts图表中对图形的解释部分: 其中legend自身常用的配置属性如下: orient 设置图例的朝向属性值: ve ...
Echarts legend翻页滚动形式
有时legend过多,需要翻页或者滚动形式,可以设置orient: "vertical", type: 'scroll',这两个属性,完整代码如下: var myChart = ...
echarts legend不显示_ECharts地图系列一（定制区域水波纹显示，以及其他区域圆点颜色不统一）...
Echarts水波纹地点显示,以及颜色点随机系列篇在现今的前端开发中,图表的展示是不可或缺的,也会接触到一些地图区域的展示,例如,现实场景下,需求需要现实当今公司在全国乃至世界的分部分布情况,这时就 ...
Echarts - legend、tooltip、xAxis属性设置
目录 legend: tooltip: xAxis: legend: legend: {show: true, //是否显示type: "plain", // 图例的类型 'pla ...

echarts legend 排列问题

echarts legend 排列问题相关推荐

最新文章

热门文章