Echarts富文本rich及格式化工具formatter的使用

        Echarts官网上说,ECharts,一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

        ECharts 提供了常规的折线图柱状图散点图饼图K线图,用于统计的盒形图,用于地理数据可视化的地图热力图线图,用于关系数据可视化的关系图treemap旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图仪表盘,并且支持图与图之间的混搭。

        除了已经内置的包含了丰富功能的图表,ECharts 还提供了自定义系列,只需要传入一个renderItem函数,就可以从数据映射到任何你想要的图形,更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

        Echarts官网上提供的实例几乎满足实际开发需求,有时未免有些特殊的需求,还好Echarts官网上提供丰富的开发文档。通过仔细阅读文档终究会想到解决方法。

        今天主要总结一下关于Echarts可视化组件开发中的富文本,官方文档对富文本的解释如下: 

              原先 echarts 中的文本标签,只能对整块统一进行样式设置,并且仅仅支持颜色和字体的设置,从而导致不易于制作表达能力更强的文字描述信息。

              echarts v3.7 以后,支持了富文本标签,能够:

  • 定制文本块整体的样式(如背景、边框、阴影等)、位置、旋转等。
  • 对文本块中个别片段定义样式(如颜色、字体、高宽、背景、阴影等)、对齐方式等。
  • 在文本中使用图片做小图标或者背景。
  • 特定组合以上的规则,可以做出简单表格、分割线等效果。

开始下面的介绍之前,先说明一下下面会使用的两个名词的含义:

  • 文本块(Text Block):文本标签块整体。
  • 文本片段(Text Fregment):文本标签块中的部分文本。

 

 

文本样式相关的配置项

echarts 提供了丰富的文本标签配置项,包括:

  • 字体基本样式设置:fontStylefontWeightfontSizefontFamily
  • 文字颜色:color
  • 文字描边:textBorderColortextBorderWidth
  • 文字阴影:textShadowColortextShadowBlurtextShadowOffsetXtextShadowOffsetY
  • 文本块或文本片段大小:lineHeightwidthheightpadding
  • 文本块或文本片段的对齐:alignverticalAlign
  • 文本块或文本片段的边框、背景(颜色或图片):backgroundColorborderColorborderWidthborderRadius
  • 文本块或文本片段的阴影:shadowColorshadowBlurshadowOffsetXshadowOffsetY
  • 文本块的位置和旋转:positiondistancerotate

可以在各处的 rich 属性中定义文本片段样式。例如 series-bar.label.rich

例如:

label: { // 在文本中,可以对部分文本采用 rich 中定义样式。 // 这里需要在文本中使用标记符号: // `{styleName|text content text content}` 标记样式名。 // 注意,换行仍是使用 '\n'。 formatter: [ '{a|这段文本采用样式a}', '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}' ].join('\n'), // 这里是文本块的样式设置: color: '#333', fontSize: 5, fontFamily: 'Arial', borderWidth: 3, backgroundColor: '#984455', padding: [3, 10, 10, 5], lineHeight: 20, // rich 里是文本片段的样式设置: rich: { a: { color: 'red', lineHeight: 10 }, b: { backgroundColor: { image: 'xxx/xxx.jpg' }, height: 40 }, x: { fontSize: 18, fontFamily: 'Microsoft YaHei', borderColor: '#449933', borderRadius: 4 }, ... } }

注意:如果不定义 rich,不能指定文字块的 widthheight

 


 

文本、文本框、文本片段的基本样式和装饰

每个文本可以设置基本的字体样式:fontStylefontWeightfontSizefontFamily

可以设置文字的颜色 color 和边框的颜色 textBorderColortextBorderWidth

文本框可以设置边框和背景的样式:borderColorborderWidthbackgroundColorpadding

文本片段也可以设置边框和背景的样式:borderColorborderWidthbackgroundColorpadding

例如:

标签的位置

对于折线图、柱状图、散点图等,均可以使用 label 来设置标签。标签的相对于图形元素的位置,一般使用 label.positionlabel.distance 来配置。

例如:

注意:position 在不同的图中可取值有所不同。distance 并不是在每个图中都支持。详情请参见 option 文档

 


 

标签的旋转

某些图中,为了能有足够长的空间来显示标签,需要对标签进行旋转。例如:

这种场景下,可以结合 alignverticalAlign 来调整标签位置。

注意,逻辑是,先使用 alignverticalAlign 定位,再旋转。

 


 

文本片段的排版和对齐

关于排版方式,每个文本片段,可以想象成 CSS 中的 inline-block,在文档流中按行放置。

每个文本片段的内容盒尺寸(content box size),默认是根据文字大小决定的。但是,也可以设置 widthheight 来强制指定,虽然一般不会这么做(参见下文)。文本片段的边框盒尺寸(border box size),由上述本身尺寸,加上文本片段的 padding 来得到。

只有 '\n' 是换行符,能导致换行。

一行内,会有多个文本片段。每行的实际高度,由 lineHeight 最大的文本片段决定。文本片段的 lineHeight 可直接在 rich 中指定,也可以在 rich 的父层级中统一指定而采用到 rich 的所有项中,如果都不指定,则取文本片段的边框盒尺寸(border box size)。

在一行的 lineHeight 被决定后,一行内,文本片段的竖直位置,由文本片段的 verticalAlign 来指定(这里和 CSS 中的规则稍有不同):

  • 'bottom':文本片段的盒的底边贴住行底。
  • 'top':文本片段的盒的顶边贴住行顶。
  • 'middle':居行中。

文本块的宽度,可以直接由文本块的 width 指定,否则,由最长的行决定。宽度决定后,在一行中进行文本片段的放置。文本片段的 align 决定了文本片段在行中的水平位置:

  • 首先,从左向右连续紧靠放置 align'left' 的文本片段盒。
  • 然后,从右向左连续紧靠放置 align'right' 的文本片段盒。
  • 最后,剩余的没处理的文本片段盒,紧贴着,在中间剩余的区域中居中放置。

关于文字在文本片段盒中的位置:

  • 如果 align'center',则文字在文本片段盒中是居中的。
  • 如果 align'left',则文字在文本片段盒中是居左的。
  • 如果 align'right',则文字在文本片段盒中是居右的。

例如:

 

特殊效果:图标、分割线、标题块、简单表格

看下面的例子:

文本片段的 backgroundColor 可以指定为图片后,就可以在文本中使用图标了:

rich: { Sunny: { // 这样设定 backgroundColor 就可以是图片了。 backgroundColor: { image: './data/asset/img/weather/sunny_128.png' }, // 可以只指定图片的高度,从而图片的宽度根据图片的长宽比自动得到。 height: 30 } }

分割线实际是用 border 实现的:

rich: { hr: { borderColor: '#777', // 这里把 width 设置为 '100%',表示分割线的长度充满文本块。 // 注意,这里是文本块内容盒(content box)的 100%,而不包含 padding。 // 虽然这和 CSS 相关的定义有所不同,但是在这类场景中更加方便。 width: '100%', borderWidth: 0.5, height: 0 } }

标题块是使用 backgroundColor 实现的:

// 标题文字居左
formatter: '{titleBg|Left Title}', rich: { titleBg: { backgroundColor: '#000', height: 30, borderRadius: [5, 5, 0, 0], padding: [0, 10, 0, 10], width: '100%', color: '#eee' } } // 标题文字居中。 // 这个实现有些 tricky,但是,能够不引入更复杂的排版规则而实现这个效果。 formatter: '{tc|Center Title}{titleBg|}', rich: { titleBg: { align: 'right', backgroundColor: '#000', height: 30, borderRadius: [5, 5, 0, 0], padding: [0, 10, 0, 10], width: '100%', color: '#eee' } }

下面直接贴上实例代码和GitHub连接
Demo1 对echarts的title使用富文本,对其格式化
01(这个title是固定的)
效果图:

 
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script>
</head>

<bod>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

// 指定图表的配置项和数据
var data = [2220, 1682, 2791, 3000, 4090, 3230, 2910];
var xdata = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
},
grid: {
top: '10%',
containLabel: true
},
title: {
/* text: 'subtextStyle.rich使用', */
subtext: '{a|名称:}{b|供水统计}',
left: 'center',
textStyle: {
fontSize: 20
},
subtextStyle: {
rich: {
a: { //开头和结尾的文字样式
color: 'gray',
fontSize: 18
},
b: {
/* backgroundColor: 'pink', */ //无法设置渐变色
color: 'green',
padding: [3, 8],
fontSize: 16,
fontWeight: 600,
/* borderColor: '#0b4d9d',
borderWidth: 1, */
}
}
}
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>

</html>
01(这个title是动态的)
效果图:
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script>
</head>

<bod>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 900px;height:600px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var timename = "时间"
var time = "18:08:08"
// 指定图表的配置项和数据
var data = [2220, 1682, 2791, 3000, 4090, 3230, 2910];
var xdata = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var option = {
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
},
grid: {
top: '10%',
containLabel: true
},
title: {
subtext: "{" + "a" + "|" + timename + "}" + "{" + "b" + "|" + time + "}",
left: 'center',
textStyle: {
fontSize: 20
},
subtextStyle: {
rich: {
a: { //开头和结尾的文字样式
color: 'gray',
fontSize: 18
},
b: {
color: 'green',
padding: [3, 8],
fontSize: 16,
fontWeight: 600,
}
}
}
},
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '直接访问',
type: 'bar',
barWidth: '60%',
data: [10, 52, 200, 334, 390, 330, 220]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>

</html>
demo2 在vue使用echarts,修改
tooltip
效果图:

代码《01》

<template>
<div>
<div id="main4"></div>
</div>
</template>
<script>
export default {
name: "Echarts2",
data() {
return {
Datatime14: [],
DataWaterRealUnitConsumptionnum14: [],
DataWaterForcastUnitConsumptionnum14: [],
Datamarkred14: [],
DataMaxDatanum14: [],
Datanum14: [],
Datamarkred14top: [],
bjstimer4: null
};
},
mounted() {
let that = this;
that.request();
},

methods: {
request() {
var _this = this;
var msg= {"BCtWaterUnitConsumption":369.6461,"CtWaterUnitConsumption":0,"MaxData":776.25690484946767,"WaterForcastUnitConsumption":[{"Data":362.9547,"Time":"00:00:00","Type":0},{"Data":360.6984,"Time":"00:15:00","Type":0},{"Data":363.2329,"Time":"00:30:00","Type":0},{"Data":363.1301,"Time":"00:45:00","Type":0},{"Data":359.9166,"Time":"01:00:00","Type":0},{"Data":363.332,"Time":"01:15:00","Type":0},{"Data":362.3297,"Time":"01:30:00","Type":0},{"Data":360.9614,"Time":"01:45:00","Type":0},{"Data":359.6568,"Time":"02:00:00","Type":0},{"Data":359.0653,"Time":"02:15:00","Type":0},{"Data":357.4453,"Time":"02:30:00","Type":0},{"Data":355.9816,"Time":"02:45:00","Type":0},{"Data":354.3747,"Time":"03:00:00","Type":0},{"Data":352.9428,"Time":"03:15:00","Type":0},{"Data":351.5586,"Time":"03:30:00","Type":0},{"Data":349.9676,"Time":"03:45:00","Type":0},{"Data":349.3789,"Time":"04:00:00","Type":0},{"Data":347.9629,"Time":"04:15:00","Type":0},{"Data":346.4833,"Time":"04:30:00","Type":0},{"Data":345.2582,"Time":"04:45:00","Type":0},{"Data":343.9858,"Time":"05:00:00","Type":0},{"Data":342.6171,"Time":"05:15:00","Type":0},{"Data":341.2137,"Time":"05:30:00","Type":0},{"Data":339.7374,"Time":"05:45:00","Type":0},{"Data":338.1941,"Time":"06:00:00","Type":0},{"Data":336.6827,"Time":"06:15:00","Type":0},{"Data":331.4004,"Time":"06:30:00","Type":0},{"Data":328.4645,"Time":"06:45:00","Type":0},{"Data":330.2028,"Time":"07:00:00","Type":0},{"Data":325.8771,"Time":"07:15:00","Type":0},{"Data":328.5522,"Time":"07:30:00","Type":0},{"Data":330.5124,"Time":"07:45:00","Type":0},{"Data":330.3464,"Time":"08:00:00","Type":0},{"Data":333.293,"Time":"08:15:00","Type":0},{"Data":332.2695,"Time":"08:30:00","Type":0},{"Data":335.3607,"Time":"08:45:00","Type":0},{"Data":335.2552,"Time":"09:00:00","Type":0},{"Data":335.2558,"Time":"09:15:00","Type":0},{"Data":336.6607,"Time":"09:30:00","Type":0},{"Data":336.4277,"Time":"09:45:00","Type":0},{"Data":337.7365,"Time":"10:00:00","Type":0},{"Data":337.4455,"Time":"10:15:00","Type":0},{"Data":339.2552,"Time":"10:30:00","Type":0},{"Data":339.0848,"Time":"10:45:00","Type":0},{"Data":339.8569,"Time":"11:00:00","Type":0},{"Data":339.9649,"Time":"11:15:00","Type":0},{"Data":340.0957,"Time":"11:30:00","Type":0},{"Data":340.738,"Time":"11:45:00","Type":0},{"Data":341.5738,"Time":"12:00:00","Type":0},{"Data":342.1352,"Time":"12:15:00","Type":0},{"Data":341.8438,"Time":"12:30:00","Type":0},{"Data":342.2098,"Time":"12:45:00","Type":0},{"Data":343.7514,"Time":"13:00:00","Type":0},{"Data":343.0101,"Time":"13:15:00","Type":0},{"Data":346.3281,"Time":"13:30:00","Type":0},{"Data":347.3826,"Time":"13:45:00","Type":0},{"Data":348.6347,"Time":"14:00:00","Type":0},{"Data":348.8486,"Time":"14:15:00","Type":0},{"Data":346.5973,"Time":"14:30:00","Type":0},{"Data":346.7559,"Time":"14:45:00","Type":0},{"Data":346.4899,"Time":"15:00:00","Type":0},{"Data":344.2002,"Time":"15:15:00","Type":0},{"Data":343.5149,"Time":"15:30:00","Type":0},{"Data":346.3243,"Time":"15:45:00","Type":0},{"Data":343.2917,"Time":"16:00:00","Type":0},{"Data":343.4204,"Time":"16:15:00","Type":0},{"Data":342.4683,"Time":"16:30:00","Type":0},{"Data":341.7943,"Time":"16:45:00","Type":0},{"Data":342.6641,"Time":"17:00:00","Type":0},{"Data":343.2705,"Time":"17:15:00","Type":0},{"Data":341.2998,"Time":"17:30:00","Type":0},{"Data":344.0632,"Time":"17:45:00","Type":0},{"Data":344.623,"Time":"18:00:00","Type":0},{"Data":344.8369,"Time":"18:15:00","Type":0},{"Data":346.6588,"Time":"18:30:00","Type":0},{"Data":346.2391,"Time":"18:45:00","Type":0},{"Data":346.1565,"Time":"19:00:00","Type":0},{"Data":346.1591,"Time":"19:15:00","Type":0},{"Data":346.9922,"Time":"19:30:00","Type":0},{"Data":348.2123,"Time":"19:45:00","Type":0},{"Data":349.4399,"Time":"20:00:00","Type":0},{"Data":350.8944,"Time":"20:15:00","Type":0},{"Data":351.2439,"Time":"20:30:00","Type":0},{"Data":352.8311,"Time":"20:45:00","Type":0},{"Data":353.284,"Time":"21:00:00","Type":0},{"Data":353.9928,"Time":"21:15:00","Type":0},{"Data":354.2663,"Time":"21:30:00","Type":0},{"Data":355.0968,"Time":"21:45:00","Type":0},{"Data":355.7013,"Time":"22:00:00","Type":0},{"Data":356.9886,"Time":"22:15:00","Type":0},{"Data":359.8441,"Time":"22:30:00","Type":0},{"Data":358.2381,"Time":"22:45:00","Type":0},{"Data":356.2934,"Time":"23:00:00","Type":0},{"Data":360.339,"Time":"23:15:00","Type":0},{"Data":361.7268,"Time":"23:30:00","Type":0},{"Data":361.6662,"Time":"23:45:00","Type":0}],"WaterRealUnitConsumption":[{"Data":369.65,"Time":"00:00:00","Type":0},{"Data":367.99,"Time":"00:15:00","Type":0},{"Data":366.52,"Time":"00:30:00","Type":0},{"Data":365.8,"Time":"00:45:00","Type":0},{"Data":365.58,"Time":"01:00:00","Type":0},{"Data":363.02,"Time":"01:15:00","Type":0},{"Data":359.55,"Time":"01:30:00","Type":0},{"Data":358.59,"Time":"01:45:00","Type":0},{"Data":357.36,"Time":"02:00:00","Type":0},{"Data":355.72,"Time":"02:15:00","Type":0},{"Data":353.18,"Time":"02:30:00","Type":0},{"Data":351.04,"Time":"02:45:00","Type":0},{"Data":350.64,"Time":"03:00:00","Type":0},{"Data":347.82,"Time":"03:15:00","Type":0},{"Data":344.98,"Time":"03:30:00","Type":0},{"Data":343.71,"Time":"03:45:00","Type":0},{"Data":342.97,"Time":"04:00:00","Type":0},{"Data":341.64,"Time":"04:15:00","Type":0},{"Data":340.12,"Time":"04:30:00","Type":0},{"Data":337.44,"Time":"04:45:00","Type":0},{"Data":335.96,"Time":"05:00:00","Type":0},{"Data":333.18,"Time":"05:15:00","Type":0},{"Data":331.69,"Time":"05:30:00","Type":0},{"Data":328.68,"Time":"05:45:00","Type":0},{"Data":324.76,"Time":"06:00:00","Type":0},{"Data":322.81,"Time":"06:15:00","Type":0},{"Data":321.16,"Time":"06:30:00","Type":0},{"Data":321.61,"Time":"06:45:00","Type":0},{"Data":320.78,"Time":"07:00:00","Type":0},{"Data":319.95,"Time":"07:15:00","Type":0},{"Data":327.16,"Time":"07:30:00","Type":0},{"Data":325.33,"Time":"07:45:00","Type":0},{"Data":326.77,"Time":"08:00:00","Type":0},{"Data":329.21,"Time":"08:15:00","Type":0},{"Data":328.78,"Time":"08:30:00","Type":0},{"Data":333.78,"Time":"08:45:00","Type":0},{"Data":335.49,"Time":"09:00:00","Type":0},{"Data":0,"Time":"09:15:00","Type":0},{"Data":339.03,"Time":"09:30:00","Type":0},{"Data":341.42,"Time":"09:45:00","Type":0},{"Data":341.88,"Time":"10:00:00","Type":0},{"Data":343.24,"Time":"10:15:00","Type":0},{"Data":344.38,"Time":"10:30:00","Type":0},{"Data":347.14,"Time":"10:45:00","Type":0},{"Data":345.67,"Time":"11:00:00","Type":0},{"Data":346.5,"Time":"11:15:00","Type":0},{"Data":346.99,"Time":"11:30:00","Type":0},{"Data":347.4,"Time":"11:45:00","Type":0},{"Data":0,"Time":"12:00:00","Type":0},{"Data":346.14,"Time":"12:15:00","Type":0},{"Data":346.04,"Time":"12:30:00","Type":0},{"Data":345.05,"Time":"12:45:00","Type":0},{"Data":345.16,"Time":"13:00:00","Type":0},{"Data":344.13,"Time":"13:15:00","Type":0},{"Data":344.36,"Time":"13:30:00","Type":0},{"Data":345.04,"Time":"13:45:00","Type":0},{"Data":344.92,"Time":"14:00:00","Type":0},{"Data":344.03,"Time":"14:15:00","Type":0}]}
var MaxData14 = msg.MaxData; //最大值
var WaterForcastUnitConsumption14 = msg.WaterForcastUnitConsumption; //预测曲线
var WaterRealUnitConsumption14 = msg.WaterRealUnitConsumption; //实际曲线
var time14 = [];
var num14 = [];
var markred14 = [];
var markred14top=[]
var MaxDatanum14 = []; //最大值
var WaterForcastUnitConsumptionnum14 = []; //预测曲线
var WaterRealUnitConsumptionnum14 = []; //实际曲线
for (var i = 0; i < WaterForcastUnitConsumption14.length; i++) {
WaterForcastUnitConsumptionnum14.push(WaterForcastUnitConsumption14[i].Data);
time14.push(WaterForcastUnitConsumption14[i].Time);
MaxDatanum14.push(MaxData14);
num14.push(MaxData14/30);
}
for (var i = 0; i < WaterRealUnitConsumption14.length; i++) {
WaterRealUnitConsumptionnum14.push(WaterRealUnitConsumption14[i].Data);
}
for (var i = 0; i < WaterRealUnitConsumption14.length-1; i++) {
markred14.push(0);
markred14top.push(0);
}
markred14.push(WaterRealUnitConsumptionnum14[WaterRealUnitConsumptionnum14.length - 1]);
markred14top.push(MaxData14/30);
_this.Datatime14 = time14;
_this.DataWaterRealUnitConsumptionnum14 = WaterRealUnitConsumptionnum14;
_this.DataWaterForcastUnitConsumptionnum14 = WaterForcastUnitConsumptionnum14;
_this.Datamarkred14 = markred14;
_this.Datamarkred14top = markred14top;
_this.Datanum14 = num14
_this.DataMaxDatanum14 = MaxDatanum14;
_this.drawLine();

},
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("main4"));
// 绘制图表
myChart.setOption({
grid: {
height: 84,
width: 760,
bottom: 10,
top: 35,
right: 1,
left: 51
},
color: ["#a9b2bf", "#0060ff", "#b53f9a"],
legend: {
right: 5,
width: 500,
itemWidth: 40,
textStyle: {
color: "#6e7b8b"
},
data: ["历史值", "预测值"],
icon: "rect", //  这个字段控制形状  类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none

itemWidth: 14, // 设置宽度

itemHeight: 14, // 设置高度

itemGap: 40 // 设置间距
},
tooltip: {
trigger: "axis",
padding: [0, 10],
formatter: function(params) {
/* console.log(params) */
var res = "<div> <p> 时间:" + params[0].name + " </p> </div>";
for (var i = 0; i < params.length; i++) {
if (params[i].seriesName == "历史值") {
res +=
"<p>" + params[i].seriesName + ":" + params[i].data + "</p>";
} else if(params[i].seriesIndex == 3){
res += "<p>" + "预测值" + ":" + params[i].data + "</p>";
}
/* res +=
"<p>" + params[i].seriesName + ":" + params[i].data + "</p>"; */
}
return res;
},
textStyle: {
align: "left"
}
},
xAxis: [
{
data: this.Datatime14,
axisLabel: {
inside: false,
textStyle: {
color: "#fff"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
}
],
yAxis: {
splitLine: {
show: false,
lineStyle: {
color: "#dfdfdf",
width: 1,
type: "dashed"
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#999"
}
}
},
series: [
{
name: "历史值",
type: "bar",
barWidth: 6,
data: this.DataWaterRealUnitConsumptionnum14,
zlevel: 99,
itemStyle: {
normal: {
color: "#a9b2bf"
}
}
},
{
type: "bar",
stack: '标记',
barWidth: 6,
data:this.Datamarkred14,
zlevel: 199,
itemStyle: {
normal: {
color: "red",
},
},
tooltip:{
show:false
}
},
{
type: "bar",
stack: '标记',
barWidth: 6,
data:this.Datamarkred14top,
zlevel: 199,
itemStyle: {
normal: {
color: "red",
},
},
tooltip:{
show:false
}
},

{
type: "bar",
stack: "总量",
barWidth: 6,
itemStyle: {
normal: {
color: "rgba(229,235,236,0)"
}
},
zlevel: 1333, // Make series be overlap
/* barGap: '-100%', */ data: this.DataWaterForcastUnitConsumptionnum14
},
{
name: "预测值",
type: "bar",
barWidth: 6,
stack: "总量",
itemStyle: {
normal: {
color: "#0060ff"
}
},
zlevel: 1333,
data: this.Datanum14
},
{
type: "bar",
barWidth: 6,
itemStyle: {
normal: {
color: "#e5ebec"
}
},
barGap: "-100%",
data: this.DataMaxDatanum14
}
]
});
}
},
beforeDestroy() {
clearInterval(this.bjstimer4);
this.bjstimer4 = null;
}
};
</script>
<style scoped>
#main4 {
width: 820px;
height: 134px;
margin-left: 20px;

/* border: 1px red solid; */
}
</style>
代码《02》

<template>
<div>
<div id="main5"></div>
</div>
</template>
<script>
export default {
name: "Echarts2",
data() {
return {
Datatime15: [],
DataWaterRealTotalEfficiencynum15: [],
DataWaterForcastTotalEfficiencynum15: [],
Datamarkred15: [],
DataMaxDatanum15: [],
Datanum15: [],
Datamarkred15top: [],
bjstimer5: null
};
},
mounted() {
let that = this;
that.request();
},

methods: {
request() {
var _this = this;
var msg = {
CtWaterTotalEfficiency: 0,
HighestTotalEfficiency: 73,
LowestTotalEfficiency: 73,
MaxData: 100,
WaterForcastTotalEfficiency: [
{ Data: 73, Time: "00:00:00", Type: 0 },
{ Data: 73, Time: "00:15:00", Type: 0 },
{ Data: 73, Time: "00:30:00", Type: 0 },
{ Data: 73, Time: "00:45:00", Type: 0 },
{ Data: 73, Time: "01:00:00", Type: 0 },
{ Data: 73, Time: "01:15:00", Type: 0 },
{ Data: 73, Time: "01:30:00", Type: 0 },
{ Data: 73, Time: "01:45:00", Type: 0 },
{ Data: 73, Time: "02:00:00", Type: 0 },
{ Data: 73, Time: "02:15:00", Type: 0 },
{ Data: 73, Time: "02:30:00", Type: 0 },
{ Data: 73, Time: "02:45:00", Type: 0 },
{ Data: 73, Time: "03:00:00", Type: 0 },
{ Data: 73, Time: "03:15:00", Type: 0 },
{ Data: 73, Time: "03:30:00", Type: 0 },
{ Data: 73, Time: "03:45:00", Type: 0 },
{ Data: 73, Time: "04:00:00", Type: 0 },
{ Data: 73, Time: "04:15:00", Type: 0 },
{ Data: 73, Time: "04:30:00", Type: 0 },
{ Data: 73, Time: "04:45:00", Type: 0 },
{ Data: 73, Time: "05:00:00", Type: 0 },
{ Data: 73, Time: "05:15:00", Type: 0 },
{ Data: 73, Time: "05:30:00", Type: 0 },
{ Data: 73, Time: "05:45:00", Type: 0 },
{ Data: 73, Time: "06:00:00", Type: 0 },
{ Data: 73, Time: "06:15:00", Type: 0 },
{ Data: 73, Time: "06:30:00", Type: 0 },
{ Data: 73, Time: "06:45:00", Type: 0 },
{ Data: 73, Time: "07:00:00", Type: 0 },
{ Data: 73, Time: "07:15:00", Type: 0 },
{ Data: 73, Time: "07:30:00", Type: 0 },
{ Data: 73, Time: "07:45:00", Type: 0 },
{ Data: 73, Time: "08:00:00", Type: 0 },
{ Data: 73, Time: "08:15:00", Type: 0 },
{ Data: 73, Time: "08:30:00", Type: 0 },
{ Data: 73, Time: "08:45:00", Type: 0 },
{ Data: 73, Time: "09:00:00", Type: 0 },
{ Data: 73, Time: "09:15:00", Type: 0 },
{ Data: 73, Time: "09:30:00", Type: 0 },
{ Data: 73, Time: "09:45:00", Type: 0 },
{ Data: 73, Time: "10:00:00", Type: 0 },
{ Data: 73, Time: "10:15:00", Type: 0 },
{ Data: 73, Time: "10:30:00", Type: 0 },
{ Data: 73, Time: "10:45:00", Type: 0 },
{ Data: 73, Time: "11:00:00", Type: 0 },
{ Data: 73, Time: "11:15:00", Type: 0 },
{ Data: 73, Time: "11:30:00", Type: 0 },
{ Data: 73, Time: "11:45:00", Type: 0 },
{ Data: 73, Time: "12:00:00", Type: 0 },
{ Data: 73, Time: "12:15:00", Type: 0 },
{ Data: 73, Time: "12:30:00", Type: 0 },
{ Data: 73, Time: "12:45:00", Type: 0 },
{ Data: 73, Time: "13:00:00", Type: 0 },
{ Data: 73, Time: "13:15:00", Type: 0 },
{ Data: 73, Time: "13:30:00", Type: 0 },
{ Data: 73, Time: "13:45:00", Type: 0 },
{ Data: 73, Time: "14:00:00", Type: 0 },
{ Data: 73, Time: "14:15:00", Type: 0 },
{ Data: 73, Time: "14:30:00", Type: 0 },
{ Data: 73, Time: "14:45:00", Type: 0 },
{ Data: 73, Time: "15:00:00", Type: 0 },
{ Data: 73, Time: "15:15:00", Type: 0 },
{ Data: 73, Time: "15:30:00", Type: 0 },
{ Data: 73, Time: "15:45:00", Type: 0 },
{ Data: 73, Time: "16:00:00", Type: 0 },
{ Data: 73, Time: "16:15:00", Type: 0 },
{ Data: 73, Time: "16:30:00", Type: 0 },
{ Data: 73, Time: "16:45:00", Type: 0 },
{ Data: 73, Time: "17:00:00", Type: 0 },
{ Data: 73, Time: "17:15:00", Type: 0 },
{ Data: 73, Time: "17:30:00", Type: 0 },
{ Data: 73, Time: "17:45:00", Type: 0 },
{ Data: 73, Time: "18:00:00", Type: 0 },
{ Data: 73, Time: "18:15:00", Type: 0 },
{ Data: 73, Time: "18:30:00", Type: 0 },
{ Data: 73, Time: "18:45:00", Type: 0 },
{ Data: 73, Time: "19:00:00", Type: 0 },
{ Data: 73, Time: "19:15:00", Type: 0 },
{ Data: 73, Time: "19:30:00", Type: 0 },
{ Data: 73, Time: "19:45:00", Type: 0 },
{ Data: 73, Time: "20:00:00", Type: 0 },
{ Data: 73, Time: "20:15:00", Type: 0 },
{ Data: 73, Time: "20:30:00", Type: 0 },
{ Data: 73, Time: "20:45:00", Type: 0 },
{ Data: 73, Time: "21:00:00", Type: 0 },
{ Data: 73, Time: "21:15:00", Type: 0 },
{ Data: 73, Time: "21:30:00", Type: 0 },
{ Data: 73, Time: "21:45:00", Type: 0 },
{ Data: 73, Time: "22:00:00", Type: 0 },
{ Data: 73, Time: "22:15:00", Type: 0 },
{ Data: 73, Time: "22:30:00", Type: 0 },
{ Data: 73, Time: "22:45:00", Type: 0 },
{ Data: 73, Time: "23:00:00", Type: 0 },
{ Data: 73, Time: "23:15:00", Type: 0 },
{ Data: 73, Time: "23:30:00", Type: 0 },
{ Data: 73, Time: "23:45:00", Type: 0 }
],
WaterRealTotalEfficiency: [
{ Data: 73, Time: "00:00:00", Type: 0 },
{ Data: 73, Time: "00:15:00", Type: 0 },
{ Data: 73, Time: "00:30:00", Type: 0 },
{ Data: 73, Time: "00:45:00", Type: 0 },
{ Data: 73, Time: "01:00:00", Type: 0 },
{ Data: 73, Time: "01:15:00", Type: 0 },
{ Data: 73, Time: "01:30:00", Type: 0 },
{ Data: 73, Time: "01:45:00", Type: 0 },
{ Data: 73, Time: "02:00:00", Type: 0 },
{ Data: 73, Time: "02:15:00", Type: 0 },
{ Data: 73, Time: "02:30:00", Type: 0 },
{ Data: 73, Time: "02:45:00", Type: 0 },
{ Data: 73, Time: "03:00:00", Type: 0 },
{ Data: 73, Time: "03:15:00", Type: 0 },
{ Data: 73, Time: "03:30:00", Type: 0 },
{ Data: 73, Time: "03:45:00", Type: 0 },
{ Data: 73, Time: "04:00:00", Type: 0 },
{ Data: 73, Time: "04:15:00", Type: 0 },
{ Data: 73, Time: "04:30:00", Type: 0 },
{ Data: 73, Time: "04:45:00", Type: 0 },
{ Data: 73, Time: "05:00:00", Type: 0 },
{ Data: 73, Time: "05:15:00", Type: 0 },
{ Data: 73, Time: "05:30:00", Type: 0 },
{ Data: 73, Time: "05:45:00", Type: 0 },
{ Data: 73, Time: "06:00:00", Type: 0 },
{ Data: 73, Time: "06:15:00", Type: 0 },
{ Data: 73, Time: "06:30:00", Type: 0 },
{ Data: 73, Time: "06:45:00", Type: 0 },
{ Data: 73, Time: "07:00:00", Type: 0 },
{ Data: 73, Time: "07:15:00", Type: 0 },
{ Data: 73, Time: "07:30:00", Type: 0 },
{ Data: 73, Time: "07:45:00", Type: 0 },
{ Data: 73, Time: "08:00:00", Type: 0 },
{ Data: 73, Time: "08:15:00", Type: 0 },
{ Data: 73, Time: "08:30:00", Type: 0 },
{ Data: 73, Time: "08:45:00", Type: 0 },
{ Data: 73, Time: "09:00:00", Type: 0 },
{ Data: 0, Time: "09:15:00", Type: 0 },
{ Data: 73, Time: "09:30:00", Type: 0 },
{ Data: 73, Time: "09:45:00", Type: 0 },
{ Data: 73, Time: "10:00:00", Type: 0 },
{ Data: 73, Time: "10:15:00", Type: 0 },
{ Data: 73, Time: "10:30:00", Type: 0 },
{ Data: 73, Time: "10:45:00", Type: 0 },
{ Data: 73, Time: "11:00:00", Type: 0 },
{ Data: 73, Time: "11:15:00", Type: 0 },
{ Data: 73, Time: "11:30:00", Type: 0 },
{ Data: 73, Time: "11:45:00", Type: 0 },
{ Data: 0, Time: "12:00:00", Type: 0 },
{ Data: 73, Time: "12:15:00", Type: 0 },
{ Data: 73, Time: "12:30:00", Type: 0 },
{ Data: 73, Time: "12:45:00", Type: 0 },
{ Data: 73, Time: "13:00:00", Type: 0 },
{ Data: 73, Time: "13:15:00", Type: 0 },
{ Data: 73, Time: "13:30:00", Type: 0 },
{ Data: 73, Time: "13:45:00", Type: 0 },
{ Data: 73, Time: "14:00:00", Type: 0 },
{ Data: 73, Time: "14:15:00", Type: 0 }
]
};
var _this = this;
var MaxData15 = msg.MaxData;
var WaterForcastTotalEfficiency15 = msg.WaterForcastTotalEfficiency;
var WaterRealTotalEfficiency15 = msg.WaterRealTotalEfficiency;
var time15 = [];
var num15 = [];
var markred15 = [];
var markred15top = [];
var MaxDatanum15 = []; //最大值
var WaterForcastTotalEfficiencynum15 = []; //预测曲线
var WaterRealTotalEfficiencynum15 = []; //实际曲线
for (var i = 0; i < WaterForcastTotalEfficiency15.length; i++) {
WaterForcastTotalEfficiencynum15.push(
WaterForcastTotalEfficiency15[i].Data
);
time15.push(WaterForcastTotalEfficiency15[i].Time);
MaxDatanum15.push(MaxData15);
num15.push(MaxData15 / 30);
}
for (var i = 0; i < WaterRealTotalEfficiency15.length; i++) {
WaterRealTotalEfficiencynum15.push(WaterRealTotalEfficiency15[i].Data);
}
for (var i = 0; i < WaterRealTotalEfficiency15.length - 1; i++) {
markred15.push(0);
markred15top.push(0);
}
markred15.push(
WaterRealTotalEfficiencynum15[WaterRealTotalEfficiencynum15.length - 1]
);
markred15top.push(MaxData15 / 30);
_this.Datatime15 = time15;
_this.DataWaterRealTotalEfficiencynum15 = WaterRealTotalEfficiencynum15;
_this.DataWaterForcastTotalEfficiencynum15 = WaterForcastTotalEfficiencynum15;
_this.Datamarkred15 = markred15;
_this.Datamarkred15top = markred15top;
_this.Datanum15 = num15;
_this.DataMaxDatanum15 = MaxDatanum15;
_this.drawLine();
},
drawLine() {
// 基于准备好的dom,初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("main5"));
// 绘制图表
myChart.setOption({
grid: {
height: 84,
width: 760,
bottom: 10,
top: 35,
right: 1,
left: 51
},
color: ["#a9b2bf", "#0060ff", "#b53f9a"],
legend: {
right: 5,
width: 500,
itemWidth: 40,
textStyle: {
color: "#6e7b8b"
},
data: ["历史值", "预测值"],
icon: "rect", //  这个字段控制形状  类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none

itemWidth: 14, // 设置宽度

itemHeight: 14, // 设置高度

itemGap: 40 // 设置间距
},
tooltip: {
trigger: "axis",
padding: [0, 10],
formatter: function(params) {
/* console.log(params) */
var res = "<div> <p> 时间:" + params[0].name + " </p> </div>";
for (var i = 0; i < params.length; i++) {
if (params[i].seriesName == "历史值") {
res +=
"<p>" + params[i].seriesName + ":" + params[i].data + "</p>";
} else if (params[i].seriesIndex == 3) {
res += "<p>" + "预测值" + ":" + params[i].data + "</p>";
}
/* res +=
"<p>" + params[i].seriesName + ":" + params[i].data + "</p>"; */
}
return res;
},
textStyle: {
align: "left"
}
},
xAxis: [
{
data: this.Datatime15,
axisLabel: {
inside: false,
textStyle: {
color: "#fff"
}
},
axisTick: {
show: false
},
axisLine: {
show: false
},
z: 10
}
],
yAxis: {
splitLine: {
show: false,
lineStyle: {
color: "#dfdfdf",
width: 1,
type: "dashed"
}
},
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
textStyle: {
color: "#999"
}
}
},
series: [
{
name: "历史值",
type: "bar",
barWidth: 6,
data: this.DataWaterRealTotalEfficiencynum15,
zlevel: 99,
itemStyle: {
normal: {
color: "#a9b2bf"
}
}
},
{
type: "bar",
stack: "标记",
barWidth: 6,
data: this.Datamarkred15,
zlevel: 199,
itemStyle: {
normal: {
color: "red"
}
},
tooltip: {
show: false
}
},
{
type: "bar",
stack: "标记",
barWidth: 6,
data: this.Datamarkred15top,
zlevel: 199,
itemStyle: {
normal: {
color: "red"
}
},
tooltip: {
show: false
}
},

{
type: "bar",
stack: "总量",
barWidth: 6,
itemStyle: {
normal: {
color: "rgba(229,235,236,0)"
}
},
zlevel: 1333, // Make series be overlap
/* barGap: '-100%', */ data: this
.DataWaterForcastTotalEfficiencynum15
},
{
name: "预测值",
type: "bar",
barWidth: 6,
stack: "总量",
itemStyle: {
normal: {
color: "#0060ff"
}
},
zlevel: 1333,
data: this.Datanum15
},
{
type: "bar",
barWidth: 6,
itemStyle: {
normal: {
color: "#e5ebec"
}
},
barGap: "-100%",
data: this.DataMaxDatanum15
}
]
});
}
},
beforeDestroy() {
clearInterval(this.bjstimer5);
this.bjstimer5 = null;
}
};
</script>
<style scoped>
#main5 {
width: 820px;
height: 134px;
margin-left: 20px;

/* border: 1px red solid; */
}
</style>
今天先到这,有时间在续写......



 

转载于:https://www.cnblogs.com/volodya/p/Echarts.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/483788.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

国拨经费约31.48亿!科技部发布科技创新2030 —“脑科学与类脑研究”重大项目2021年度项目申报指南...

来源&#xff1a;科技部科技部关于发布科技创新 2030 —“脑科学与类脑研究”重大项目 2021年度项目申报指南的通知国科发资〔2021〕265号各省、自治区、直辖市及计划单列市科技厅&#xff08;委、局&#xff09;&#xff0c;新疆生产建设兵团科技局&#xff0c;国务院各有关部…

牛客16662 津津的储蓄计划

题目描述 津津的零花钱一直都是自己管理。每个月的月初妈妈给津津300元钱&#xff0c;津津会预算这个月的花销&#xff0c;并且总能做到实际花销和预算的相同。 为了让津津学习如何储蓄&#xff0c;妈妈提出&#xff0c;津津可以随时把整百的钱存在她那里&#xff0c;到了年末她…

Hinton获2021迪克森科学奖:他改变了AI,改变了世界

来源&#xff1a;AI科技评论作者&#xff1a;维克多编辑&#xff1a;青暮据卡内基梅隆大学&#xff08;CMU&#xff09;官方消息&#xff0c;Geoffrey Hinton 获得了2021年的迪克森科学奖&#xff08;The Dickson Prize in Science&#xff09;。此奖项设立于1969年&#xff0c…

牛客21783 牛牛的星际旅行

题目描述 在一个遥远的星球上&#xff0c;每周有N天&#xff0c;牛牛去了这个星球旅游&#xff0c;他恰好只带了N件不同的衣服&#xff0c;编号为1到N 每一天他会穿其中的某一件衣服&#xff0c;一周之内不能穿同一件衣服两次&#xff0c;而且假如某件衣服是在第x天穿的&#x…

国拨经费约31.48亿!科技部发布科技创新2030 —“脑科学与类脑研究”重大项目2021年度项目申报指南

来源&#xff1a;科技部科技部关于发布科技创新 2030 —“脑科学与类脑研究”重大项目 2021年度项目申报指南的通知国科发资〔2021〕265号各省、自治区、直辖市及计划单列市科技厅&#xff08;委、局&#xff09;&#xff0c;新疆生产建设兵团科技局&#xff0c;国务院各有关部…

牛客21805 字符串编码与解码

链接&#xff1a;https://ac.nowcoder.com/acm/problem/21805 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 给你两个长度相同的字符串a&#xff…

数学有什么用处?看完后恍然大悟!

来源&#xff1a;算法数学俱乐部编辑&#xff1a;nhyilin高等数学有什么用&#xff1f;很多人问过我这个问题。其实大多数人在问这个问题的时候&#xff0c;心里已经预设了否定的答案。确实&#xff0c;对于大多数人来说&#xff0c;已经发展到了连数字都基本很少用了的一些高等…

牛客16589 机器翻译

链接&#xff1a;https://ac.nowcoder.com/acm/problem/16589 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 131072K&#xff0c;其他语言262144K 64bit IO Format: %lld 题目描述 小晨的电脑上安装了一个机器翻译软…

2021年传感器行业的机遇与风险 | 深度思考

来源&#xff1a;蓝焱资本2021年已过半&#xff0c;物联网时代已经到来。毫无疑问&#xff0c;万物联网的背后是万物数字化&#xff0c;而数字化万物的核心就是传感器。传感器这个概念虽然已经存在多年&#xff0c;但它依旧是个活力无限的领域。随着物联网概念的火热&#xff0…

牛客16654 谁拿了最多奖学金

链接&#xff1a;https://ac.nowcoder.com/acm/problem/16654 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 131072K&#xff0c;其他语言262144K 64bit IO Format: %lld 题目描述 某校的惯例是在每学期的期末考试之…

Flink应用场景

本文为《Flink大数据项目实战》学习笔记&#xff0c;想通过视频系统学习Flink这个最火爆的大数据计算框架的同学&#xff0c;推荐学习课程&#xff1a; Flink大数据项目实战&#xff1a;http://t.cn/EJtKhaz 主要应用场景有三类&#xff1a; 1.Event-driven Applications【事件…

未来,中国空间站将成为怎样的“太空科研站”?

来源&#xff1a;中国科学报作者&#xff1a;赵维杰&#xff0c;NSR新闻编辑9月17日13点34分&#xff0c;神舟十二号载人飞船返回舱在东风着陆场顺利着陆。航天员聂海胜、刘伯明、汤洪波状态良好&#xff0c;我国空间站阶段首次载人飞行任务取得圆满成功。从6月17日升空至今&am…

牛客16464 神奇的幻方

链接&#xff1a;https://ac.nowcoder.com/acm/problem/16464 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 131072K&#xff0c;其他语言262144K 64bit IO Format: %lld 题目描述 幻方是一种很神奇的 N*N 矩阵&…

李飞飞AI100报告第二弹,提出14大AI机遇与挑战,82页pdf

来源&#xff1a;Stanford编辑&#xff1a;好困 David「AI100」报告第二弹&#xff01;本次报告评估了2016年至2021年间人工智能的发展&#xff0c;涵盖14大问题&#xff0c;探讨了人工智能发展的关键领域。主题是「人工智能在日常生活中的渗透影响&#xff1a;希望、关注和方向…

牛客16502 螺旋矩阵

链接&#xff1a;https://ac.nowcoder.com/acm/problem/16502 来源&#xff1a;牛客网 题目描述 一个 n 行 n 列的螺旋矩阵可由如下方法生成&#xff1a; 从矩阵的左上角&#xff08;第 1 行第 1 列&#xff09;出发&#xff0c;初始时向右移动&#xff1b;如果前方是未曾经…

java 接口

转载于:https://www.cnblogs.com/javawen/p/10650269.html

四位专家谈:数字医学中的因果关系

来源&#xff1a;ScienceAI编译&#xff1a;凯霞Ben Glocker&#xff08;伦敦帝国理工学院医学成像机器学习专家&#xff09;、Mirco Musolesi&#xff08;伦敦大学学院数据科学和数字健康专家&#xff09;、Jonathan Richens&#xff08;诊断机器学习模型专家&#xff0c;Baby…

牛客21781 牛兄牛弟

链接&#xff1a;https://ac.nowcoder.com/acm/problem/21781 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 32768K&#xff0c;其他语言65536K 64bit IO Format: %lld 题目描述 一群牛兄牛弟准备去一家餐厅吃饭&am…

中国算力发展指数白皮书(2021)

来源&#xff1a;中国信息通信研究院编辑&#xff1a;蒲蒲当前&#xff0c;新一轮科技革命和产业变革正在重塑全球经济结构&#xff0c;算力作为数字经济时代新的生产力&#xff0c;是支撑数字经济发展的坚实基础&#xff0c;对推动科技进步、促进行业数字化以及支撑经济社会发…

牛客14605 画三角

链接&#xff1a;https://ac.nowcoder.com/acm/problem/14605 来源&#xff1a;牛客网 时间限制&#xff1a;C/C 1秒&#xff0c;其他语言2秒 空间限制&#xff1a;C/C 131072K&#xff0c;其他语言262144K 64bit IO Format: %lld 题目描述 小学时&#xff0c;JYM和XJ刚刚学…