eCharts笔记
2022-01-06 本文已影响0人
色即是猫
优化选中坐标上标题的背景
选中坐标上标题的背景
tooltip: {
trigger: 'axis',
axisPointer: {
label: {
backgroundColor: '#1c64da', //选中数据轴标题背景颜色
},
type: 'cross',
crossStyle: {
color: '#fff',
}
}
},
码克一下最全的修改参数：
https://blog.csdn.net/qq_34462220/article/details/107936601
解决图例太多的问题
优化前
image.png
【解决方案】
给图例增加分页
legend: {
data: this.legends,
type : 'scroll',//增加分页
},
优化后
image.png
使用tabs或者用到displsy:none等导致图表及窗口识别不到100%变成了100PX的问题
解决方案：个人认为最简单有效方法是直接定死宽度，如果需要跟随浏览器缩放的话可以写成下面这样
<div id="data_code_plot2" style="width: calc(100vw - 600px);height: calc(100vh - 650px)"></div>
重新定义图表大小
myChart.setOption(option);
//重新定义图表大小
myChart.resize({
width: 800,
height: 400
});
图表随浏览器大小变化自动调整大小
myChart.setOption(option);
//随浏览器大小变化
window.addEventListener('resize', () => {
myChart.resize();
})
grid图表位置控制
图片来源：https://blog.csdn.net/qq_30264689/article/details/80911974
image.png
image.png
grid: {
x: "12%",//x 偏移量
y: "7%", // y 偏移量
width: "87%", // 宽度
height: "79%"// 高度
left: "20%",
top: "20%",
right: "20%",
bottom: "30%",
containLabel: false // 这个啥？计算距离时候会计算容器边到标签的距离，否则计算容器边缘到刻度线的距离
},
title标题样式修改
title : {
show:true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
text: '主标题', //主标题文本，'\n'指定换行
link:'', //主标题文本超链接,默认值true
target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
subtext: '副标题', //副标题文本，'\n'指定换行
sublink: '', //副标题文本超链接
subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
x:'center’ ,//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
textAlign: null ,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
backgroundColor: 'rgba(0,0,0,0)', //标题背景颜色，默认'rgba(0,0,0,0)'透明
borderColor: '#ccc', //标题边框颜色,默认'#ccc'
borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
padding: 5, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
itemGap: 10, //主副标题纵向间隔，单位px，默认为10
textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal',
},
subtextStyle: {//副标题文本样式{"color": "#aaa"}
fontFamily: 'Arial, Verdana, sans...',
fontSize: 12,
fontStyle: 'normal',
fontWeight: 'normal', },
},
image
image
Y 轴坐标文字颜色
image
image
XY轴的线条颜色样式
image
image
XY轴网格的样式
image
toolbox工具栏
toolbox: {
top:15,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
tooltip
提示框
tooltip: {/////提示框--------
// 鼠标是否可以进入悬浮框
enterable: true,
// 触发方式 mousemove, click, none, mousemove|click
triggerOn: 'click',
// item 图形触发， axis 坐标轴触发， none 不触发
trigger: 'item',
// 浮层隐藏的延迟
hideDelay: 800,
// 背景色
backgroundColor: 'rgba(7,60,157,0.8)',
formatter: function (params) {
return `<div class=chartLabel>
<div class=title>${params.name}</div>
<div class=label>总告警：${params.value}</div>
</div>`
}
},
legend标识图例
legend: {
// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
orient: 'vertical',
// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
x: 'left',
// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
y: 'center',
itemWidth: 24, // 设置图例图形的宽
itemHeight: 18, // 设置图例图形的高
textStyle: {
color: '#666' // 图例文字颜色
},
// itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 30,
backgroundColor: '#eee', // 设置整个图例区域背景颜色
data: ['北京','上海','广州','深圳','郑州']
},
用min和max控制图表在波动数据中展示
yAxis: [
{
type: 'value',
min: 3500000,
max: 4500000,
splitNumber : 5,//（将y轴最大值平均成5个点）
//interval: 50000, // maxValue为你计算出来的值， 即数组中的最大值
axisLabel:{
formatter: function (value, index) {//优化单位数量级
if (value >= 100000000) {
return value / 100000000 + "亿";
} else if (value >= 10000) {
return value / 10000 + "万";
} else {
return value;
}
},
},
}
],
图表series
label
(图表显示数值的设置)
image.png
//方式一：
label: {
normal: {
show: true,
formatter: function (params) {
return params.name+"\n"+ params.value; //图表上展示文字 + 数值
},
}
},
//方式二：格式化
label: {
//格式化显示方式
formatter: '{b} : {c} ({d}%)'
},
symbol
(图形的样式)
修改标记的图形（symbol）的方法有三种：
一：ECharts 提供的标记类型
类型有 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'；
例：symbol: 'pin'
二：可以通过 'image://url' 设置为图片，其中 URL 为图片的链接
例：symbol: 'image://https://b-gold-cdn.xitu.io/v3/static/img/45.b99ea03.svg'
这个方法我们可以自定义SVG参数来拼接
//定将参数
let symbolImg = 'image://'+ require('@/assets/bigscreen-img/map-logo.svg’) ；
//图表中直接参数
symbol: symbolImg,
三：可以通过 图片base64位编码设置图片，
对于第三种方法，需要把jpg/png的图片格式转换为base64编码，转换工具这里提供一种：https://www.bejson.com/convert/image_to_svg/，
转成功之后，将保存的SVG文件用文本文档打开，如图：我们的目标是href后面的一大串编码，需要注意到是，这一串编码是很大的，一般都达到10K左右，所以如果可以，还是建议大家使用第二种方法。
tooltip: { // 提示框组件:可以设置在全局(tooltip)，可以设置在坐标系中(grid.tooltip、polar.tooltip、single.tooltip)，可以设置在系列中(series.tooltip)，可以设置在系列的每个数据项中(series.data.tooltip)
show: true, // 是否显示提示框组件。包括提示框浮层和 axisPointer。
trigger: 'item', // 触发类型,'item'数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。 'axis'坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。'none' 什么都不触发
triggerOn: 'mousemove', // 提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
showContent: true, // 是否显示提示框浮层，默认显示。只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false
alwaysShowContent: true, // 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后一定时间(见下方hideDelay睡醒)后隐藏，设置为true可以保证一直显示提示框内容
showDelay: 0, // 浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置。在triggerOn(提示框触发的条件)为 'mousemove' 时有效
hideDelay: 100, // 浮层隐藏的延迟，单位为 ms，在alwaysShowContent为true的时候无效
enterable: false, // 鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为true
renderMode: 'html', // 浮层的渲染模式，默认以'html'即额外的DOM节点展示tooltip；此外还可以设置为'richText'表示以富文本的形式渲染，渲染的结果在图表对应的Canvas中（目前SVG尚未支持富文本），这对于一些没有DOM的环境（如微信小程序）有更好的支持。
confine: false, // 是否将tooltip框限制在图表的区域内。当图表外层的dom被设置为'overflow:hidden'，或者移动端窄屏，导致tooltip超出外界被截断时，此配置比较有用
appendToBody: false, // (从v4.7.0开始支持)是否将tooltip的DOM节点添加为HTML的<body>的子节点。只有当renderMode为'html'是有意义的
className: 'echarts-tooltip echarts-tooltip-dark' // (从v5.0.0开始支持)指定 tooltip 的 DOM 节点的 CSS 类。（只在 html 模式下生效）
transitionDuration: 0.4, // 提示框浮层的移动动画过渡时间，单位是s，设置为0的时候会紧跟着鼠标移动。
position: ['50%', '50%'], // (这里是相对位置，放置在容器正中间)提示框浮层的位置，默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数，inside鼠标所在图形的内部中心位置，top、left、bottom、right鼠标所在图形上侧，左侧，下侧，右侧，
formatter: '{b0}: {c0}<br />{b1}: {c1}', // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式,模板变量有 {a}, {b}，{c}，{d}，{e}，分别表示系列名，数据名，数据值等，具体见下图
backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色
borderColor: '#333', // 提示框浮层的边框颜色
borderWidth: 0, // 提示框浮层的边框宽
padding: [
5, // 上
10, // 右
5, // 下
10, // 左
], // 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
textStyle: { // 提示框浮层的文本样式
color: '#fff', // 文字的颜色
fontStyle: 'normal', // 文字字体的风格 可选：'normal'(常规) 'italic'(斜体) 'oblique'(倾斜)
fontWeight: 'normal', // 文字字体的粗细 可选：'normal'(常规) 'bold'(粗体) 'bolder'(加粗) 'lighter'(细体) 100 | 200 | 300 | 400...(像素)
fontFamily: 'sans-serif', // 文字的字体系列 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...
fontSize: 14, // 文字的字体大小
lineHeight: 56, // 行高
width: 15, // 文本显示宽度
height: 15, // 文本显示高度
textBorderColor: '#333', // 文字本身的描边颜色
textBorderWidth: 2, // 文字本身的描边宽度
textBorderType: 'solid', // 文字本身的描边类型 可选：'solid'(实线) 'dashed'(虚线) 'dotted' 自v5.0.0开始，也可以是number或者number数组 如：textBorderType: [5, 10]，用以指定线条的 dash array，配合textBorderDashOffset可实现更灵活的虚线效果
textBorderDashOffset: 5, // (从v5.0.0开始支持)用于设置虚线的偏移量，可搭配 textBorderType 指定 dash array 实现灵活的虚线效果
textShadowColor: 'transparent', // 文字本身的阴影颜色
textShadowBlur: 0, // 文字本身的阴影长度
textShadowOffsetX: 0, // 文字本身的阴影X偏移
textShadowOffsetY: 0, // 文字本身的阴影Y偏移
overflow: 'none', // 文字超出宽度是否截断或者换行。配置width时有效'truncate'截断，并在末尾显示ellipsis配置的文本，默认为... 'break' 换行'breakAll'换行，跟'break'不同的是，在英语等拉丁文中，'breakAll'还会强制单词内换行
textShadowBlur: 0, // 文字本身的阴影长度
ellipsis: '这里是末尾显示的文本', // 在overflow配置为'truncate'的时候，可以通过该属性配置末尾显示的文本
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',// 额外附加到浮层的css样式。如左面为浮层添加阴影的示例
order: 'seriesAsc', // (从v5.0.0开始支持)多系列提示框浮层排列顺序。默认值为 'seriesAsc' 提示框排列顺序可选值:'seriesAsc'根据系列声明, 升序排列。 'seriesDesc'根据系列声明, 降序排列。 'valueAsc'根据数据值, 升序排列。 'valueDesc'根据数据值, 降序排列。
},
extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' , // 额外附加到浮层的css样式。如左面为浮层添加阴影的示例
order：'seriesAsc'， // (从v5.0.0开始支持)多系列提示框浮层排列顺序。默认值为 'seriesAsc'
// 注意版本支持
};
原文链接：https://blog.csdn.net/sunshineGGB/article/details/122561068
