文档章节

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

o
 osc_w9s1w4o0
发布于 2019/03/30 21:27
字数 6866
阅读 128
收藏 0

精选30+云产品,助力企业轻松上云!>>>

        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是固定的)
效果图:

 

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <title>ECharts</title>
 7     <!-- 引入 echarts.js -->
 8     <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script>
 9 </head>
10 
11 
12 
13 
14 
15 <bod>
16     <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
17     <div id="main" style="width: 900px;height:600px;"></div>
18     <script type="text/javascript">
19         // 基于准备好的dom,初始化echarts实例
20         var myChart = echarts.init(document.getElementById('main'));
21 
22 
23 
24 
25 
26         // 指定图表的配置项和数据
27         var data = [2220, 1682, 2791, 3000, 4090, 3230, 2910];
28         var xdata = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
29         var option = {
30             color: ['#3398DB'],
31             tooltip: {
32                 trigger: 'axis',
33             },
34             grid: {
35                 top: '10%',
36                 containLabel: true
37             },
38             title: {
39                /*  text: 'subtextStyle.rich使用', */
40                 subtext: '{a|名称:}{b|供水统计}',
41                 left: 'center',
42                 textStyle: {
43                     fontSize: 20
44                 },
45                 subtextStyle: {
46                     rich: {
47                         a: { //开头和结尾的文字样式
48                             color: 'gray',
49                             fontSize: 18
50                         },
51                         b: {
52                            /*  backgroundColor: 'pink', */ //无法设置渐变色
53                             color: 'green',
54                             padding: [3, 8],
55                             fontSize: 16,
56                             fontWeight: 600,
57                           /*   borderColor: '#0b4d9d',
58                             borderWidth: 1, */
59                         }
60                     }
61                 }
62             },
63             xAxis: [{
64                 type: 'category',
65                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
66                 axisTick: {
67                     alignWithLabel: true
68                 }
69             }],
70             yAxis: [{
71                 type: 'value'
72             }],
73             series: [{
74                 name: '直接访问',
75                 type: 'bar',
76                 barWidth: '60%',
77                 data: [10, 52, 200, 334, 390, 330, 220]
78             }]
79         };
80         // 使用刚指定的配置项和数据显示图表。
81         myChart.setOption(option);
82     </script>
83 </body>
84 
85 
86 
87 
88 
89 </html>

 

 

01(这个title是动态的)
效果图:
 1 <!DOCTYPE html>
 2 <html>
 3 
 4 
 5 
 6 
 7 <head>
 8     <meta charset="utf-8">
 9     <title>ECharts</title>
10     <!-- 引入 echarts.js -->
11     <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0/echarts-en.common.js"></script>
12 </head>
13 
14 
15 
16 
17 
18 <bod>
19     <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
20     <div id="main" style="width: 900px;height:600px;"></div>
21     <script type="text/javascript">
22         // 基于准备好的dom,初始化echarts实例
23         var myChart = echarts.init(document.getElementById('main'));
24         var timename = "时间"
25         var time = "18:08:08"
26         // 指定图表的配置项和数据
27         var data = [2220, 1682, 2791, 3000, 4090, 3230, 2910];
28         var xdata = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
29         var option = {
30             color: ['#3398DB'],
31             tooltip: {
32                 trigger: 'axis',
33             },
34             grid: {
35                 top: '10%',
36                 containLabel: true
37             },
38             title: {
39                 subtext: "{" + "a" + "|" + timename + "}" + "{" + "b" + "|" + time + "}",
40                 left: 'center',
41                 textStyle: {
42                     fontSize: 20
43                 },
44                 subtextStyle: {
45                     rich: {
46                         a: { //开头和结尾的文字样式
47                             color: 'gray',
48                             fontSize: 18
49                         },
50                         b: {
51                             color: 'green',
52                             padding: [3, 8],
53                             fontSize: 16,
54                             fontWeight: 600,
55                         }
56                     }
57                 }
58             },
59             xAxis: [{
60                 type: 'category',
61                 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
62                 axisTick: {
63                     alignWithLabel: true
64                 }
65             }],
66             yAxis: [{
67                 type: 'value'
68             }],
69             series: [{
70                 name: '直接访问',
71                 type: 'bar',
72                 barWidth: '60%',
73                 data: [10, 52, 200, 334, 390, 330, 220]
74             }]
75         };
76         // 使用刚指定的配置项和数据显示图表。
77         myChart.setOption(option);
78     </script>
79     </body>
80 
81 
82 
83 
84 
85 </html>

 

demo2 在vue使用echarts,修改
tooltip
效果图:

代码《01》

  1 <template>
  2  <div>
  3  <div id="main4"></div>
  4  </div>
  5 </template>
  6 <script>
  7 export default {
  8  name: "Echarts2",
  9  data() {
 10  return {
 11  Datatime14: [],
 12  DataWaterRealUnitConsumptionnum14: [],
 13  DataWaterForcastUnitConsumptionnum14: [],
 14  Datamarkred14: [],
 15  DataMaxDatanum14: [],
 16  Datanum14: [],
 17  Datamarkred14top: [],
 18  bjstimer4: null
 19  };
 20  },
 21  mounted() {
 22  let that = this;
 23  that.request();
 24  },
 25 
 26 
 27 
 28   methods: {
 29     request() {
 30           var _this = this;
 31       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}]}
 32           var MaxData14 = msg.MaxData; //最大值
 33           var WaterForcastUnitConsumption14 =  msg.WaterForcastUnitConsumption; //预测曲线
 34           var WaterRealUnitConsumption14 =  msg.WaterRealUnitConsumption; //实际曲线
 35           var time14 = [];
 36           var num14 = [];
 37           var markred14 = [];
 38           var markred14top=[]
 39           var MaxDatanum14 = []; //最大值
 40           var WaterForcastUnitConsumptionnum14 = []; //预测曲线
 41           var WaterRealUnitConsumptionnum14 = []; //实际曲线
 42           for (var i = 0; i < WaterForcastUnitConsumption14.length; i++) {
 43             WaterForcastUnitConsumptionnum14.push(WaterForcastUnitConsumption14[i].Data);
 44             time14.push(WaterForcastUnitConsumption14[i].Time);
 45             MaxDatanum14.push(MaxData14);
 46             num14.push(MaxData14/30);
 47           }
 48           for (var i = 0; i < WaterRealUnitConsumption14.length; i++) {
 49             WaterRealUnitConsumptionnum14.push(WaterRealUnitConsumption14[i].Data);
 50           }
 51            for (var i = 0; i < WaterRealUnitConsumption14.length-1; i++) {
 52             markred14.push(0);
 53             markred14top.push(0);
 54           }
 55           markred14.push(WaterRealUnitConsumptionnum14[WaterRealUnitConsumptionnum14.length - 1]);
 56           markred14top.push(MaxData14/30);
 57           _this.Datatime14 = time14;
 58           _this.DataWaterRealUnitConsumptionnum14 = WaterRealUnitConsumptionnum14;
 59           _this.DataWaterForcastUnitConsumptionnum14 = WaterForcastUnitConsumptionnum14;
 60           _this.Datamarkred14 = markred14;
 61           _this.Datamarkred14top = markred14top;
 62           _this.Datanum14 = num14
 63           _this.DataMaxDatanum14 = MaxDatanum14;
 64           _this.drawLine();
 65 
 66 
 67 
 68 
 69     },
 70     drawLine() {
 71       // 基于准备好的dom,初始化echarts实例
 72       let myChart = this.$echarts.init(document.getElementById("main4"));
 73       // 绘制图表
 74       myChart.setOption({
 75         grid: {
 76           height: 84,
 77           width: 760,
 78           bottom: 10,
 79           top: 35,
 80           right: 1,
 81           left: 51
 82         },
 83         color: ["#a9b2bf", "#0060ff", "#b53f9a"],
 84         legend: {
 85           right: 5,
 86           width: 500,
 87           itemWidth: 40,
 88           textStyle: {
 89             color: "#6e7b8b"
 90           },
 91           data: ["历史值", "预测值"],
 92           icon: "rect", //  这个字段控制形状  类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none
 93 
 94 
 95 
 96 
 97           itemWidth: 14, // 设置宽度
 98 
 99 
100 
101 
102           itemHeight: 14, // 设置高度
103 
104 
105 
106 
107           itemGap: 40 // 设置间距
108         },
109         tooltip: {
110           trigger: "axis",
111           padding: [0, 10],
112           formatter: function(params) {
113             /* console.log(params) */
114             var res = "<div> <p> 时间:" + params[0].name + " </p> </div>";
115             for (var i = 0; i < params.length; i++) {
116               if (params[i].seriesName == "历史值") {
117                 res +=
118                   "<p>" + params[i].seriesName + ":" + params[i].data + "</p>";
119               } else if(params[i].seriesIndex == 3){
120                 res += "<p>" + "预测值" + ":" + params[i].data + "</p>";
121               }
122               /* res +=
123                 "<p>" + params[i].seriesName + ":" + params[i].data + "</p>"; */
124             }
125             return res;
126           },
127           textStyle: {
128             align: "left"
129           }
130         },
131         xAxis: [
132           {
133             data: this.Datatime14,
134             axisLabel: {
135               inside: false,
136               textStyle: {
137                 color: "#fff"
138               }
139             },
140             axisTick: {
141               show: false
142             },
143             axisLine: {
144               show: false
145             },
146             z: 10
147           }
148         ],
149         yAxis: {
150           splitLine: {
151             show: false,
152             lineStyle: {
153               color: "#dfdfdf",
154               width: 1,
155               type: "dashed"
156             }
157           },
158           axisLine: {
159             show: false
160           },
161           axisTick: {
162             show: false
163           },
164           axisLabel: {
165             textStyle: {
166               color: "#999"
167             }
168           }
169         },
170         series: [
171           {
172             name: "历史值",
173             type: "bar",
174             barWidth: 6,
175             data: this.DataWaterRealUnitConsumptionnum14,
176             zlevel: 99,
177             itemStyle: {
178               normal: {
179                 color: "#a9b2bf"
180               }
181             }
182           },
183           {
184             type: "bar",
185             stack: '标记',
186             barWidth: 6,
187             data:this.Datamarkred14,
188             zlevel: 199,
189             itemStyle: {
190             normal: {
191               color: "red",
192             },
193           },
194            tooltip:{
195               show:false
196             }
197           },
198           {
199             type: "bar",
200             stack: '标记',
201             barWidth: 6,
202             data:this.Datamarkred14top,
203             zlevel: 199,
204             itemStyle: {
205             normal: {
206               color: "red",
207             },
208           },
209            tooltip:{
210               show:false
211             }
212           },
213 
214 
215 
216 
217           {
218             type: "bar",
219             stack: "总量",
220             barWidth: 6,
221             itemStyle: {
222               normal: {
223                 color: "rgba(229,235,236,0)"
224               }
225             },
226             zlevel: 1333, // Make series be overlap
227             /*  barGap: '-100%',  */ data: this.DataWaterForcastUnitConsumptionnum14
228           },
229           {
230             name: "预测值",
231             type: "bar",
232             barWidth: 6,
233             stack: "总量",
234             itemStyle: {
235               normal: {
236                 color: "#0060ff"
237               }
238             },
239             zlevel: 1333,
240             data: this.Datanum14
241           },
242           {
243             type: "bar",
244             barWidth: 6,
245             itemStyle: {
246               normal: {
247                 color: "#e5ebec"
248               }
249             },
250             barGap: "-100%",
251             data: this.DataMaxDatanum14
252           }
253         ]
254       });
255     }
256   },
257   beforeDestroy() {
258     clearInterval(this.bjstimer4);
259     this.bjstimer4 = null;
260   }
261 };
262 </script>
263 <style  scoped>
264 #main4 {
265   width: 820px;
266   height: 134px;
267   margin-left: 20px;
268 
269 
270 
271 
272   /*   border: 1px red solid; */
273 }
274 </style>

 

代码《02》

  1 <template>
  2  <div>
  3  <div id="main5"></div>
  4  </div>
  5 </template>
  6 <script>
  7 export default {
  8  name: "Echarts2",
  9  data() {
 10  return {
 11  Datatime15: [],
 12  DataWaterRealTotalEfficiencynum15: [],
 13  DataWaterForcastTotalEfficiencynum15: [],
 14  Datamarkred15: [],
 15  DataMaxDatanum15: [],
 16  Datanum15: [],
 17  Datamarkred15top: [],
 18  bjstimer5: null
 19  };
 20  },
 21  mounted() {
 22  let that = this;
 23  that.request();
 24  },
 25 
 26 
 27 
 28   methods: {
 29     request() {
 30       var _this = this;
 31       var msg = {
 32         CtWaterTotalEfficiency: 0,
 33         HighestTotalEfficiency: 73,
 34         LowestTotalEfficiency: 73,
 35         MaxData: 100,
 36         WaterForcastTotalEfficiency: [
 37           { Data: 73, Time: "00:00:00", Type: 0 },
 38           { Data: 73, Time: "00:15:00", Type: 0 },
 39           { Data: 73, Time: "00:30:00", Type: 0 },
 40           { Data: 73, Time: "00:45:00", Type: 0 },
 41           { Data: 73, Time: "01:00:00", Type: 0 },
 42           { Data: 73, Time: "01:15:00", Type: 0 },
 43           { Data: 73, Time: "01:30:00", Type: 0 },
 44           { Data: 73, Time: "01:45:00", Type: 0 },
 45           { Data: 73, Time: "02:00:00", Type: 0 },
 46           { Data: 73, Time: "02:15:00", Type: 0 },
 47           { Data: 73, Time: "02:30:00", Type: 0 },
 48           { Data: 73, Time: "02:45:00", Type: 0 },
 49           { Data: 73, Time: "03:00:00", Type: 0 },
 50           { Data: 73, Time: "03:15:00", Type: 0 },
 51           { Data: 73, Time: "03:30:00", Type: 0 },
 52           { Data: 73, Time: "03:45:00", Type: 0 },
 53           { Data: 73, Time: "04:00:00", Type: 0 },
 54           { Data: 73, Time: "04:15:00", Type: 0 },
 55           { Data: 73, Time: "04:30:00", Type: 0 },
 56           { Data: 73, Time: "04:45:00", Type: 0 },
 57           { Data: 73, Time: "05:00:00", Type: 0 },
 58           { Data: 73, Time: "05:15:00", Type: 0 },
 59           { Data: 73, Time: "05:30:00", Type: 0 },
 60           { Data: 73, Time: "05:45:00", Type: 0 },
 61           { Data: 73, Time: "06:00:00", Type: 0 },
 62           { Data: 73, Time: "06:15:00", Type: 0 },
 63           { Data: 73, Time: "06:30:00", Type: 0 },
 64           { Data: 73, Time: "06:45:00", Type: 0 },
 65           { Data: 73, Time: "07:00:00", Type: 0 },
 66           { Data: 73, Time: "07:15:00", Type: 0 },
 67           { Data: 73, Time: "07:30:00", Type: 0 },
 68           { Data: 73, Time: "07:45:00", Type: 0 },
 69           { Data: 73, Time: "08:00:00", Type: 0 },
 70           { Data: 73, Time: "08:15:00", Type: 0 },
 71           { Data: 73, Time: "08:30:00", Type: 0 },
 72           { Data: 73, Time: "08:45:00", Type: 0 },
 73           { Data: 73, Time: "09:00:00", Type: 0 },
 74           { Data: 73, Time: "09:15:00", Type: 0 },
 75           { Data: 73, Time: "09:30:00", Type: 0 },
 76           { Data: 73, Time: "09:45:00", Type: 0 },
 77           { Data: 73, Time: "10:00:00", Type: 0 },
 78           { Data: 73, Time: "10:15:00", Type: 0 },
 79           { Data: 73, Time: "10:30:00", Type: 0 },
 80           { Data: 73, Time: "10:45:00", Type: 0 },
 81           { Data: 73, Time: "11:00:00", Type: 0 },
 82           { Data: 73, Time: "11:15:00", Type: 0 },
 83           { Data: 73, Time: "11:30:00", Type: 0 },
 84           { Data: 73, Time: "11:45:00", Type: 0 },
 85           { Data: 73, Time: "12:00:00", Type: 0 },
 86           { Data: 73, Time: "12:15:00", Type: 0 },
 87           { Data: 73, Time: "12:30:00", Type: 0 },
 88           { Data: 73, Time: "12:45:00", Type: 0 },
 89           { Data: 73, Time: "13:00:00", Type: 0 },
 90           { Data: 73, Time: "13:15:00", Type: 0 },
 91           { Data: 73, Time: "13:30:00", Type: 0 },
 92           { Data: 73, Time: "13:45:00", Type: 0 },
 93           { Data: 73, Time: "14:00:00", Type: 0 },
 94           { Data: 73, Time: "14:15:00", Type: 0 },
 95           { Data: 73, Time: "14:30:00", Type: 0 },
 96           { Data: 73, Time: "14:45:00", Type: 0 },
 97           { Data: 73, Time: "15:00:00", Type: 0 },
 98           { Data: 73, Time: "15:15:00", Type: 0 },
 99           { Data: 73, Time: "15:30:00", Type: 0 },
100           { Data: 73, Time: "15:45:00", Type: 0 },
101           { Data: 73, Time: "16:00:00", Type: 0 },
102           { Data: 73, Time: "16:15:00", Type: 0 },
103           { Data: 73, Time: "16:30:00", Type: 0 },
104           { Data: 73, Time: "16:45:00", Type: 0 },
105           { Data: 73, Time: "17:00:00", Type: 0 },
106           { Data: 73, Time: "17:15:00", Type: 0 },
107           { Data: 73, Time: "17:30:00", Type: 0 },
108           { Data: 73, Time: "17:45:00", Type: 0 },
109           { Data: 73, Time: "18:00:00", Type: 0 },
110           { Data: 73, Time: "18:15:00", Type: 0 },
111           { Data: 73, Time: "18:30:00", Type: 0 },
112           { Data: 73, Time: "18:45:00", Type: 0 },
113           { Data: 73, Time: "19:00:00", Type: 0 },
114           { Data: 73, Time: "19:15:00", Type: 0 },
115           { Data: 73, Time: "19:30:00", Type: 0 },
116           { Data: 73, Time: "19:45:00", Type: 0 },
117           { Data: 73, Time: "20:00:00", Type: 0 },
118           { Data: 73, Time: "20:15:00", Type: 0 },
119           { Data: 73, Time: "20:30:00", Type: 0 },
120           { Data: 73, Time: "20:45:00", Type: 0 },
121           { Data: 73, Time: "21:00:00", Type: 0 },
122           { Data: 73, Time: "21:15:00", Type: 0 },
123           { Data: 73, Time: "21:30:00", Type: 0 },
124           { Data: 73, Time: "21:45:00", Type: 0 },
125           { Data: 73, Time: "22:00:00", Type: 0 },
126           { Data: 73, Time: "22:15:00", Type: 0 },
127           { Data: 73, Time: "22:30:00", Type: 0 },
128           { Data: 73, Time: "22:45:00", Type: 0 },
129           { Data: 73, Time: "23:00:00", Type: 0 },
130           { Data: 73, Time: "23:15:00", Type: 0 },
131           { Data: 73, Time: "23:30:00", Type: 0 },
132           { Data: 73, Time: "23:45:00", Type: 0 }
133         ],
134         WaterRealTotalEfficiency: [
135           { Data: 73, Time: "00:00:00", Type: 0 },
136           { Data: 73, Time: "00:15:00", Type: 0 },
137           { Data: 73, Time: "00:30:00", Type: 0 },
138           { Data: 73, Time: "00:45:00", Type: 0 },
139           { Data: 73, Time: "01:00:00", Type: 0 },
140           { Data: 73, Time: "01:15:00", Type: 0 },
141           { Data: 73, Time: "01:30:00", Type: 0 },
142           { Data: 73, Time: "01:45:00", Type: 0 },
143           { Data: 73, Time: "02:00:00", Type: 0 },
144           { Data: 73, Time: "02:15:00", Type: 0 },
145           { Data: 73, Time: "02:30:00", Type: 0 },
146           { Data: 73, Time: "02:45:00", Type: 0 },
147           { Data: 73, Time: "03:00:00", Type: 0 },
148           { Data: 73, Time: "03:15:00", Type: 0 },
149           { Data: 73, Time: "03:30:00", Type: 0 },
150           { Data: 73, Time: "03:45:00", Type: 0 },
151           { Data: 73, Time: "04:00:00", Type: 0 },
152           { Data: 73, Time: "04:15:00", Type: 0 },
153           { Data: 73, Time: "04:30:00", Type: 0 },
154           { Data: 73, Time: "04:45:00", Type: 0 },
155           { Data: 73, Time: "05:00:00", Type: 0 },
156           { Data: 73, Time: "05:15:00", Type: 0 },
157           { Data: 73, Time: "05:30:00", Type: 0 },
158           { Data: 73, Time: "05:45:00", Type: 0 },
159           { Data: 73, Time: "06:00:00", Type: 0 },
160           { Data: 73, Time: "06:15:00", Type: 0 },
161           { Data: 73, Time: "06:30:00", Type: 0 },
162           { Data: 73, Time: "06:45:00", Type: 0 },
163           { Data: 73, Time: "07:00:00", Type: 0 },
164           { Data: 73, Time: "07:15:00", Type: 0 },
165           { Data: 73, Time: "07:30:00", Type: 0 },
166           { Data: 73, Time: "07:45:00", Type: 0 },
167           { Data: 73, Time: "08:00:00", Type: 0 },
168           { Data: 73, Time: "08:15:00", Type: 0 },
169           { Data: 73, Time: "08:30:00", Type: 0 },
170           { Data: 73, Time: "08:45:00", Type: 0 },
171           { Data: 73, Time: "09:00:00", Type: 0 },
172           { Data: 0, Time: "09:15:00", Type: 0 },
173           { Data: 73, Time: "09:30:00", Type: 0 },
174           { Data: 73, Time: "09:45:00", Type: 0 },
175           { Data: 73, Time: "10:00:00", Type: 0 },
176           { Data: 73, Time: "10:15:00", Type: 0 },
177           { Data: 73, Time: "10:30:00", Type: 0 },
178           { Data: 73, Time: "10:45:00", Type: 0 },
179           { Data: 73, Time: "11:00:00", Type: 0 },
180           { Data: 73, Time: "11:15:00", Type: 0 },
181           { Data: 73, Time: "11:30:00", Type: 0 },
182           { Data: 73, Time: "11:45:00", Type: 0 },
183           { Data: 0, Time: "12:00:00", Type: 0 },
184           { Data: 73, Time: "12:15:00", Type: 0 },
185           { Data: 73, Time: "12:30:00", Type: 0 },
186           { Data: 73, Time: "12:45:00", Type: 0 },
187           { Data: 73, Time: "13:00:00", Type: 0 },
188           { Data: 73, Time: "13:15:00", Type: 0 },
189           { Data: 73, Time: "13:30:00", Type: 0 },
190           { Data: 73, Time: "13:45:00", Type: 0 },
191           { Data: 73, Time: "14:00:00", Type: 0 },
192           { Data: 73, Time: "14:15:00", Type: 0 }
193         ]
194       };
195       var _this = this;
196       var MaxData15 = msg.MaxData;
197       var WaterForcastTotalEfficiency15 = msg.WaterForcastTotalEfficiency;
198       var WaterRealTotalEfficiency15 = msg.WaterRealTotalEfficiency;
199       var time15 = [];
200       var num15 = [];
201       var markred15 = [];
202       var markred15top = [];
203       var MaxDatanum15 = []; //最大值
204       var WaterForcastTotalEfficiencynum15 = []; //预测曲线
205       var WaterRealTotalEfficiencynum15 = []; //实际曲线
206       for (var i = 0; i < WaterForcastTotalEfficiency15.length; i++) {
207         WaterForcastTotalEfficiencynum15.push(
208           WaterForcastTotalEfficiency15[i].Data
209         );
210         time15.push(WaterForcastTotalEfficiency15[i].Time);
211         MaxDatanum15.push(MaxData15);
212         num15.push(MaxData15 / 30);
213       }
214       for (var i = 0; i < WaterRealTotalEfficiency15.length; i++) {
215         WaterRealTotalEfficiencynum15.push(WaterRealTotalEfficiency15[i].Data);
216       }
217       for (var i = 0; i < WaterRealTotalEfficiency15.length - 1; i++) {
218         markred15.push(0);
219         markred15top.push(0);
220       }
221       markred15.push(
222         WaterRealTotalEfficiencynum15[WaterRealTotalEfficiencynum15.length - 1]
223       );
224       markred15top.push(MaxData15 / 30);
225       _this.Datatime15 = time15;
226       _this.DataWaterRealTotalEfficiencynum15 = WaterRealTotalEfficiencynum15;
227       _this.DataWaterForcastTotalEfficiencynum15 = WaterForcastTotalEfficiencynum15;
228       _this.Datamarkred15 = markred15;
229       _this.Datamarkred15top = markred15top;
230       _this.Datanum15 = num15;
231       _this.DataMaxDatanum15 = MaxDatanum15;
232       _this.drawLine();
233     },
234     drawLine() {
235       // 基于准备好的dom,初始化echarts实例
236       let myChart = this.$echarts.init(document.getElementById("main5"));
237       // 绘制图表
238       myChart.setOption({
239         grid: {
240           height: 84,
241           width: 760,
242           bottom: 10,
243           top: 35,
244           right: 1,
245           left: 51
246         },
247         color: ["#a9b2bf", "#0060ff", "#b53f9a"],
248         legend: {
249           right: 5,
250           width: 500,
251           itemWidth: 40,
252           textStyle: {
253             color: "#6e7b8b"
254           },
255           data: ["历史值", "预测值"],
256           icon: "rect", //  这个字段控制形状  类型包括 circle,rect ,roundRect,triangle,diamond,pin,arrow,none
257 
258 
259 
260 
261           itemWidth: 14, // 设置宽度
262 
263 
264 
265 
266           itemHeight: 14, // 设置高度
267 
268 
269 
270 
271           itemGap: 40 // 设置间距
272         },
273         tooltip: {
274           trigger: "axis",
275           padding: [0, 10],
276           formatter: function(params) {
277             /* console.log(params) */
278             var res = "<div> <p> 时间:" + params[0].name + " </p> </div>";
279             for (var i = 0; i < params.length; i++) {
280               if (params[i].seriesName == "历史值") {
281                 res +=
282                   "<p>" + params[i].seriesName + ":" + params[i].data + "</p>";
283               } else if (params[i].seriesIndex == 3) {
284                 res += "<p>" + "预测值" + ":" + params[i].data + "</p>";
285               }
286               /* res +=
287                 "<p>" + params[i].seriesName + ":" + params[i].data + "</p>"; */
288             }
289             return res;
290           },
291           textStyle: {
292             align: "left"
293           }
294         },
295         xAxis: [
296           {
297             data: this.Datatime15,
298             axisLabel: {
299               inside: false,
300               textStyle: {
301                 color: "#fff"
302               }
303             },
304             axisTick: {
305               show: false
306             },
307             axisLine: {
308               show: false
309             },
310             z: 10
311           }
312         ],
313         yAxis: {
314           splitLine: {
315             show: false,
316             lineStyle: {
317               color: "#dfdfdf",
318               width: 1,
319               type: "dashed"
320             }
321           },
322           axisLine: {
323             show: false
324           },
325           axisTick: {
326             show: false
327           },
328           axisLabel: {
329             textStyle: {
330               color: "#999"
331             }
332           }
333         },
334         series: [
335           {
336             name: "历史值",
337             type: "bar",
338             barWidth: 6,
339             data: this.DataWaterRealTotalEfficiencynum15,
340             zlevel: 99,
341             itemStyle: {
342               normal: {
343                 color: "#a9b2bf"
344               }
345             }
346           },
347           {
348             type: "bar",
349             stack: "标记",
350             barWidth: 6,
351             data: this.Datamarkred15,
352             zlevel: 199,
353             itemStyle: {
354               normal: {
355                 color: "red"
356               }
357             },
358             tooltip: {
359               show: false
360             }
361           },
362           {
363             type: "bar",
364             stack: "标记",
365             barWidth: 6,
366             data: this.Datamarkred15top,
367             zlevel: 199,
368             itemStyle: {
369               normal: {
370                 color: "red"
371               }
372             },
373             tooltip: {
374               show: false
375             }
376           },
377 
378 
379 
380 
381           {
382             type: "bar",
383             stack: "总量",
384             barWidth: 6,
385             itemStyle: {
386               normal: {
387                 color: "rgba(229,235,236,0)"
388               }
389             },
390             zlevel: 1333, // Make series be overlap
391             /*  barGap: '-100%',  */ data: this
392               .DataWaterForcastTotalEfficiencynum15
393           },
394           {
395             name: "预测值",
396             type: "bar",
397             barWidth: 6,
398             stack: "总量",
399             itemStyle: {
400               normal: {
401                 color: "#0060ff"
402               }
403             },
404             zlevel: 1333,
405             data: this.Datanum15
406           },
407           {
408             type: "bar",
409             barWidth: 6,
410             itemStyle: {
411               normal: {
412                 color: "#e5ebec"
413               }
414             },
415             barGap: "-100%",
416             data: this.DataMaxDatanum15
417           }
418         ]
419       });
420     }
421   },
422   beforeDestroy() {
423     clearInterval(this.bjstimer5);
424     this.bjstimer5 = null;
425   }
426 };
427 </script>
428 <style  scoped>
429 #main5 {
430   width: 820px;
431   height: 134px;
432   margin-left: 20px;
433 
434 
435 
436 
437   /*   border: 1px red solid; */
438 }
439 </style>

 


 
今天先到这,有时间在续写......



 
 
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
Echarts树图定制详解

本文讲的是如何定制Echarts的tree图。主要包括下载、全局变量名修改、左键菜单添加、右键菜单添加、内容缩放、文本过滤高亮等。 一 说明 Echarts中提供了tree图,但实际项目中,该tree图并不...

osc_ebxflgjk
2018/11/13
5
0
「干货」用 Vue + Echarts 打造你的专属可视化界面(上)

前言 在近期的项目中,有大量处理可视化数据的需求。说起这个,相信很多同学跟我一样,都会想到用 Echarts 来实现。没错,Echarts 拥有高度可定制化的配置,以及非常详尽的开发文档,并且它的...

Micherwa
2019/10/25
0
0
web端生成的带有echarts图表的html页面,嵌入在(javaFx)webview中显示错位问题

web项目需要嵌入到手机APP的webview里面以及 windows客户端应用(JavaFx)的webview里面,这个时候就出现了问题。 echarts渲染的时候根据浏览器不同的内核显示是有区别的。 项目里面的echarts...

osc_575sntwo
2019/07/29
8
0
echarts 自定义配置带单位的 tooltip 提示框方法 和 圆环数据 tooltip 过长超出屏幕

-------tip1-------- 在 tooltip 里边配置:拼接字符串; tooltip : { trigger: 'axis', formatter:function(params) {      var relVal = params[0].name; for (var i = 0, l = params......

osc_kb400h6y
2019/03/13
22
0
ECharts 2.2.0 发布,移动优化

#ECharts 2.2.0#发布,累计近50项反馈修复和升级,大量移动设备性能和用户体验优化。基于2.2.0,ECharts第一个官方分支版本ECharts Mobile(ECharts-m)1.0.0发布,让数据在指尖上舞动,扫码...

Kener-林峰
2015/01/30
9.2K
24

没有更多内容

加载失败,请刷新页面

加载更多

dict.items()和dict.iteritems()有什么区别?

问题: Are there any applicable differences between dict.items() and dict.iteritems() ? dict.items()和dict.iteritems()之间是否有适用的区别? From the Python docs: 从Python文档中......

法国红酒甜
42分钟前
20
0
R中“ =”和“ <-”赋值运算符有什么区别?

问题: What are the differences between the assignment operators = and <- in R? R中赋值运算符=和<-之间有什么区别? I know that operators are slightly different, as this example ......

fyin1314
今天
20
0
之间的区别 和

问题: I'm learning Spring 3 and I don't seem to grasp the functionality behind <context:annotation-config> and <context:component-scan> . 我正在学习Spring 3,并且似乎不太了解<......

javail
今天
15
0
业内首款,百度工业视觉智能平台全新亮相

本文作者:y****n 业内首款全国产化工业视觉智能平台——百度工业视觉智能平台亮相中国机器视觉展(Vision China),该平台所具有的核心AI能力完全自主可控,在质检、巡检等场景中具有高效、...

百度开发者中心
昨天
7
0
我们如何制作xkcd样式图? - How can we make xkcd style graphs?

问题: Apparently, folk have figured out how to make xkcd style graphs in Mathematica and in LaTeX . 显然,民间已经想出了如何在Mathematica和LaTeX中制作xkcd风格的图形。 Can we d......

富含淀粉
今天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部