升级Echarts v5.6，增强坐标轴设置
This commit is contained in:
parent
c2557d06ad
commit
7c986646f7
|
|
@ -35,42 +35,18 @@ public class UserStatController : ReadOnlyEntityController<UserStat>
|
|||
var chart = AddChart(list2, _.Date, null, [_.Logins, _.OAuths, _.MaxOnline, _.Actives, _.ActivesT7, _.ActivesT30, _.News, _.NewsT7, _.NewsT30], SeriesTypes.Line);
|
||||
chart.SetY(["用户数", "总数", "时长"], "value", [null, null, "{value}秒"]);
|
||||
|
||||
// 绘制平均线和最大最小值
|
||||
//var sr = chart.Series[0];
|
||||
//sr.MarkLine(true);
|
||||
//sr.MarkPoint(true, true);
|
||||
|
||||
var line = chart.AddLine(list2, _.Total, null, true);
|
||||
line.YAxisIndex = 1;
|
||||
|
||||
var line3 = chart.AddLine(list2, _.OnlineTime, null, true);
|
||||
line3.YAxisIndex = 2;
|
||||
|
||||
//AddChart(list2, _.Date, "用户数", [_.Logins, _.OAuths, _.MaxOnline, _.Actives, _.ActivesT7, _.ActivesT30, _.News, _.NewsT7, _.NewsT30], SeriesTypes.Line);
|
||||
|
||||
//var chart = new ECharts
|
||||
//{
|
||||
// Height = 400,
|
||||
//};
|
||||
//chart.SetX(list2, _.Date);
|
||||
////chart.SetY("数值");
|
||||
//chart.YAxis = new[] {
|
||||
// new { name = "数值", type = "value" },
|
||||
// new { name = "总数", type = "value" }
|
||||
//};
|
||||
//chart.AddDataZoom();
|
||||
|
||||
//var line = chart.AddLine(list2, _.Total, null, true);
|
||||
//line["yAxisIndex"] = 1;
|
||||
|
||||
//chart.Add(list2, _.Logins);
|
||||
//chart.Add(list2, _.OAuths);
|
||||
//chart.Add(list2, _.MaxOnline);
|
||||
//chart.Add(list2, _.Actives);
|
||||
//chart.Add(list2, _.ActivesT7);
|
||||
//chart.Add(list2, _.ActivesT30);
|
||||
//chart.Add(list2, _.News);
|
||||
//chart.Add(list2, _.NewsT7);
|
||||
//chart.Add(list2, _.NewsT30);
|
||||
////chart.Add(list2, _.OnlineTime);
|
||||
//chart.SetTooltip();
|
||||
|
||||
//ViewBag.Charts = new[] { chart };
|
||||
line3.MarkLine(true);
|
||||
line3.MarkPoint(true, true);
|
||||
}
|
||||
|
||||
return list;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
using System.Web.Script.Serialization;
|
||||
using System.Xml.Linq;
|
||||
using System.Collections;
|
||||
using System.Web.Script.Serialization;
|
||||
using NewLife.Collections;
|
||||
using NewLife.Cube.Charts.Models;
|
||||
using NewLife.Cube.ViewModels;
|
||||
using NewLife.Data;
|
||||
using NewLife.Reflection;
|
||||
using NewLife.Security;
|
||||
using NewLife.Serialization;
|
||||
using NewLife.Web;
|
||||
using XCode.Configuration;
|
||||
|
||||
namespace NewLife.Cube.Charts;
|
||||
|
|
@ -37,17 +37,20 @@ public class ECharts : IExtend
|
|||
public ChartTitle Title { get; set; }
|
||||
|
||||
/// <summary>提示</summary>
|
||||
public Object Tooltip { get; set; } = new Object();
|
||||
public Tooltip Tooltip { get; set; }
|
||||
|
||||
/// <summary>图例组件。</summary>
|
||||
/// <remarks>图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。</remarks>
|
||||
public Object Legend { get; set; }
|
||||
|
||||
/// <summary>X轴</summary>
|
||||
public Object XAxis { get; set; }
|
||||
public IList<XAxis> XAxis { get; set; } = [];
|
||||
|
||||
/// <summary>Y轴</summary>
|
||||
public Object YAxis { get; set; }
|
||||
public IList<YAxis> YAxis { get; set; } = [];
|
||||
|
||||
/// <summary>工具箱</summary>
|
||||
public Toolbox Toolbox { get; set; }
|
||||
|
||||
/// <summary>数据缩放</summary>
|
||||
public DataZoom[] DataZoom { get; set; }
|
||||
|
|
@ -81,10 +84,10 @@ public class ECharts : IExtend
|
|||
/// <param name="selector">构建X轴的委托</param>
|
||||
public void SetX<T>(IList<T> list, String name, Func<T, String> selector = null) where T : class, IModel
|
||||
{
|
||||
XAxis = new
|
||||
XAxis.Add(new XAxis
|
||||
{
|
||||
data = list.Select(e => selector == null ? e[name] + "" : selector(e)).ToArray()
|
||||
};
|
||||
Data = list.Select(e => selector == null ? e[name] + "" : selector(e)).ToArray()
|
||||
});
|
||||
_xField = name;
|
||||
}
|
||||
|
||||
|
|
@ -95,10 +98,12 @@ public class ECharts : IExtend
|
|||
/// <param name="selector">构建X轴的委托</param>
|
||||
public void SetX4Time<T>(IList<T> list, String name, Func<T, String> selector = null) where T : class, IModel
|
||||
{
|
||||
XAxis = new
|
||||
var axis = new XAxis
|
||||
{
|
||||
type = "time",
|
||||
Type = "time",
|
||||
};
|
||||
//if (name.EndsWithIgnoreCase("Date")) axis.AxisLabel = new { formatter = "{yyyy}-{MM}-{dd}" };
|
||||
XAxis.Add(axis);
|
||||
_timeField = name;
|
||||
_xField = name;
|
||||
|
||||
|
|
@ -149,7 +154,7 @@ public class ECharts : IExtend
|
|||
/// time 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
|
||||
/// log 对数轴。适用于对数数据。
|
||||
/// </param>
|
||||
public void SetY(String name, String type = "value") => YAxis = new { name, type };
|
||||
public void SetY(String name, String type = "value") => YAxis.Add(new YAxis { Name = name, Type = type });
|
||||
|
||||
/// <summary>设置Y轴</summary>
|
||||
/// <param name="name"></param>
|
||||
|
|
@ -161,7 +166,7 @@ public class ECharts : IExtend
|
|||
/// log 对数轴。适用于对数数据。
|
||||
/// </param>
|
||||
/// <param name="formatter"></param>
|
||||
public void SetY(String name, String type, String formatter) => YAxis = new { name, type, axisLabel = new { formatter } };
|
||||
public void SetY(String name, String type, String formatter) => YAxis.Add(new YAxis { Name = name, Type = type, AxisLabel = new { formatter } });
|
||||
|
||||
/// <summary>设置多个Y轴</summary>
|
||||
/// <param name="names"></param>
|
||||
|
|
@ -177,23 +182,23 @@ public class ECharts : IExtend
|
|||
{
|
||||
//YAxis = names.Select(e => new { name = e, type }).ToArray();
|
||||
|
||||
var list = new List<Object>();
|
||||
var list = new List<YAxis>();
|
||||
for (var i = 0; i < names.Length; i++)
|
||||
{
|
||||
var formatter = formatters != null && formatters.Length > i ? formatters[i] : null;
|
||||
if (i == 0)
|
||||
list.Add(new { name = names[i], type, axisLabel = new { formatter } });
|
||||
list.Add(new YAxis { Name = names[i], Type = type, AxisLabel = new { formatter } });
|
||||
else if (i == 1)
|
||||
list.Add(new { name = names[i], type, position = "right", axisLabel = new { formatter } });
|
||||
list.Add(new YAxis { Name = names[i], Type = type, Position = "right", AxisLabel = new { formatter } });
|
||||
else
|
||||
list.Add(new { name = names[i], type, position = "right", offset = 40 * (i - 1), axisLine = new { show = true }, axisLabel = new { formatter } });
|
||||
list.Add(new YAxis { Name = names[i], Type = type, Position = "right", Offset = 40 * (i - 1), AxisLine = new { show = true }, AxisLabel = new { formatter } });
|
||||
}
|
||||
|
||||
// 多Y轴时，右边偏移加大
|
||||
var n = names.Length - 1;
|
||||
if (n > 0) Grid.Right *= n;
|
||||
|
||||
YAxis = list.ToArray();
|
||||
YAxis = list;
|
||||
}
|
||||
|
||||
/// <summary>设置工具栏</summary>
|
||||
|
|
@ -207,10 +212,10 @@ public class ECharts : IExtend
|
|||
/// <param name="backgroundColor"></param>
|
||||
public void SetTooltip(String trigger = "axis", String axisPointerType = "cross", String backgroundColor = "#6a7985")
|
||||
{
|
||||
Tooltip = new
|
||||
Tooltip = new Tooltip
|
||||
{
|
||||
trigger,
|
||||
axisPointer = new
|
||||
Trigger = trigger,
|
||||
AxisPointer = new
|
||||
{
|
||||
type = axisPointerType,
|
||||
label = new
|
||||
|
|
@ -582,7 +587,7 @@ public class ECharts : IExtend
|
|||
|
||||
// 提示
|
||||
var tooltip = Tooltip;
|
||||
if (tooltip != null) dic[nameof(tooltip)] = tooltip;
|
||||
if (tooltip != null) dic[nameof(tooltip)] = GetJsonObject(tooltip);
|
||||
|
||||
// 提示
|
||||
var legend = Legend;
|
||||
|
|
@ -610,21 +615,25 @@ public class ECharts : IExtend
|
|||
dic[nameof(grid)] = grid;
|
||||
}
|
||||
|
||||
// 工具箱
|
||||
var toolbox = Toolbox;
|
||||
if (toolbox != null) dic[nameof(toolbox)] = GetJsonObject(toolbox);
|
||||
|
||||
// X轴
|
||||
var xAxis = XAxis;
|
||||
if (xAxis != null)
|
||||
{
|
||||
if (xAxis is String str)
|
||||
xAxis = new { data = new[] { str } };
|
||||
else if (xAxis is String[] ss)
|
||||
xAxis = new { data = ss };
|
||||
//if (xAxis is String str)
|
||||
// xAxis = new { data = new[] { str } };
|
||||
//else if (xAxis is String[] ss)
|
||||
// xAxis = new { data = ss };
|
||||
|
||||
dic[nameof(xAxis)] = xAxis;
|
||||
dic[nameof(xAxis)] = GetJsonObject(xAxis);
|
||||
}
|
||||
|
||||
// Y轴
|
||||
var yAxis = YAxis;
|
||||
if (yAxis != null) dic[nameof(yAxis)] = yAxis;
|
||||
if (yAxis != null) dic[nameof(yAxis)] = GetJsonObject(yAxis);
|
||||
|
||||
var dataZoom = DataZoom;
|
||||
if (dataZoom != null) dic[nameof(dataZoom)] = dataZoom;
|
||||
|
|
@ -644,5 +653,36 @@ public class ECharts : IExtend
|
|||
return dic.ToJson(false, true, true);
|
||||
#endif
|
||||
}
|
||||
|
||||
/// <summary>获取Json对象，去掉空成员</summary>
|
||||
/// <param name="obj"></param>
|
||||
/// <returns></returns>
|
||||
private Object GetJsonObject(Object obj)
|
||||
{
|
||||
if (obj == null) return obj;
|
||||
|
||||
var type = obj.GetType();
|
||||
if (type.GetTypeCode() != TypeCode.Object) return obj;
|
||||
|
||||
if (obj is IList list)
|
||||
{
|
||||
var rs = new List<Object>();
|
||||
foreach (var item in list)
|
||||
{
|
||||
var val = GetJsonObject(item);
|
||||
if (val != null) rs.Add(val);
|
||||
}
|
||||
return rs;
|
||||
}
|
||||
|
||||
var dic = new Dictionary<String, Object>();
|
||||
foreach (var pi in type.GetProperties())
|
||||
{
|
||||
var val = pi.GetValue(obj);
|
||||
if (val != null) dic[pi.Name] = val;
|
||||
}
|
||||
|
||||
return dic;
|
||||
}
|
||||
#endregion
|
||||
}
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
|
||||
namespace NewLife.Cube.Charts;
|
||||
|
||||
/// <summary>工具栏</summary>
|
||||
/// <remark>
|
||||
/// 内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
|
||||
/// 如下示例：
|
||||
/// </remark>
|
||||
public class Toolbox
|
||||
{
|
||||
/// <summary>组件 ID</summary>
|
||||
/// <remark>默认不指定。指定则可用于在 option 或者 API 中引用组件。</remark>
|
||||
public String Id { get; set; }
|
||||
|
||||
/// <summary>是否显示工具栏组件</summary>
|
||||
public Boolean? Show { get; set; }
|
||||
|
||||
/// <summary>工具栏 icon 的布局朝向</summary>
|
||||
/// <remark>
|
||||
/// 可选：
|
||||
/// 'horizontal'
|
||||
/// 'vertical'
|
||||
/// </remark>
|
||||
public String Orient { get; set; }
|
||||
|
||||
/// <summary>工具栏 icon 的大小</summary>
|
||||
public Double? ItemSize { get; set; }
|
||||
|
||||
/// <summary>工具栏 icon 每项之间的间隔</summary>
|
||||
/// <remark>横向布局时为水平间隔，纵向布局时为纵向间隔。</remark>
|
||||
public Double? ItemGap { get; set; }
|
||||
|
||||
/// <summary>是否在鼠标 hover 的时候显示每个工具 icon 的标题。</summary>
|
||||
public Boolean? ShowTitle { get; set; }
|
||||
|
||||
/// <summary>各工具配置项</summary>
|
||||
/// <remark>
|
||||
/// 除了各个内置的工具按钮外，还可以自定义工具按钮。
|
||||
/// 注意，自定义的工具名字，只能以 my 开头，例如下例中的 myTool1，myTool2：
|
||||
/// {
|
||||
/// toolbox: {
|
||||
/// feature: {
|
||||
/// myTool1: {
|
||||
/// show: true,
|
||||
/// title: '自定义扩展方法1',
|
||||
/// icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
|
||||
/// onclick: function (){
|
||||
/// alert('myToolHandler1')
|
||||
/// }
|
||||
/// },
|
||||
/// myTool2: {
|
||||
/// show: true,
|
||||
/// title: '自定义扩展方法',
|
||||
/// icon: 'image://https://echarts.apache.org/zh/images/favicon.png',
|
||||
/// onclick: function (){
|
||||
/// alert('myToolHandler2')
|
||||
/// }
|
||||
/// }
|
||||
/// }
|
||||
/// }
|
||||
/// }
|
||||
/// </remark>
|
||||
public Object Feature { get; set; }
|
||||
|
||||
/// <summary>公用的 icon 样式设置</summary>
|
||||
/// <remark>由于 icon 的文本信息只在 icon hover 时候才显示，所以文字相关的配置项请在 emphasis 下设置。</remark>
|
||||
public Object IconStyle { get; set; }
|
||||
|
||||
public Object Emphasis { get; set; }
|
||||
|
||||
/// <summary>所有图形的 zlevel 值</summary>
|
||||
/// <remark>
|
||||
/// zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
|
||||
/// zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
|
||||
/// </remark>
|
||||
public Double? Zlevel { get; set; }
|
||||
|
||||
/// <summary>组件的所有图形的z值</summary>
|
||||
/// <remark>
|
||||
/// 控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
|
||||
/// z相比zlevel优先级更低，而且不会创建新的 Canvas。
|
||||
/// </remark>
|
||||
public Double? Z { get; set; }
|
||||
|
||||
/// <summary>工具栏组件离容器左侧的距离</summary>
|
||||
/// <remark>
|
||||
/// left 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
|
||||
/// 如果 left 的值为 'left', 'center', 'right'，组件会根据相应的位置自动对齐。
|
||||
/// </remark>
|
||||
public Object Left { get; set; }
|
||||
|
||||
/// <summary>工具栏组件离容器上侧的距离</summary>
|
||||
/// <remark>
|
||||
/// top 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'top', 'middle', 'bottom'。
|
||||
/// 如果 top 的值为 'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐。
|
||||
/// </remark>
|
||||
public Object Top { get; set; }
|
||||
|
||||
/// <summary>工具栏组件离容器右侧的距离</summary>
|
||||
/// <remark>
|
||||
/// right 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
|
||||
/// 默认自适应。
|
||||
/// </remark>
|
||||
public Object Right { get; set; }
|
||||
|
||||
/// <summary>工具栏组件离容器下侧的距离</summary>
|
||||
/// <remark>
|
||||
/// bottom 的值可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比。
|
||||
/// 默认自适应。
|
||||
/// </remark>
|
||||
public Object Bottom { get; set; }
|
||||
|
||||
/// <summary>工具栏组件的宽度</summary>
|
||||
/// <remark>默认自适应。</remark>
|
||||
public Object Width { get; set; }
|
||||
|
||||
/// <summary>工具栏组件的高度</summary>
|
||||
/// <remark>默认自适应。</remark>
|
||||
public Object Height { get; set; }
|
||||
|
||||
/// <summary>工具箱的 tooltip 配置，配置项同 tooltip</summary>
|
||||
/// <remark>
|
||||
/// 默认不显示，可以在需要特殊定制文字样式（尤其是想用自定义 CSS 控制文字样式）的时候开启 tooltip，如下示例：
|
||||
/// option = {
|
||||
/// tooltip: {
|
||||
/// show: true // 必须引入 tooltip 组件
|
||||
/// },
|
||||
/// toolbox: {
|
||||
/// show: true,
|
||||
/// showTitle: false, // 隐藏默认文字，否则两者位置会重叠
|
||||
/// feature: {
|
||||
/// saveAsImage: {
|
||||
/// show: true,
|
||||
/// title: 'Save As Image'
|
||||
/// },
|
||||
/// dataView: {
|
||||
/// show: true,
|
||||
/// title: 'Data View'
|
||||
/// },
|
||||
/// },
|
||||
/// tooltip: { // 和 option.tooltip 的配置项相同
|
||||
/// show: true,
|
||||
/// formatter: function (param) {
|
||||
/// return '<div>' + param.title + '</div>'; // 自定义的 DOM 结构
|
||||
/// },
|
||||
/// backgroundColor: '#222',
|
||||
/// textStyle: {
|
||||
/// fontSize: 12,
|
||||
/// },
|
||||
/// extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 自定义的 CSS 样式
|
||||
/// }
|
||||
/// },
|
||||
/// ...
|
||||
/// }
|
||||
/// </remark>
|
||||
public Tooltip Tooltip { get; set; }
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,417 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
|
||||
namespace NewLife.Cube.Charts;
|
||||
|
||||
/// <summary>提示框组件</summary>
|
||||
/// <remark>
|
||||
/// 提示框组件的通用介绍：
|
||||
/// 提示框组件可以设置在多种地方：
|
||||
/// 可以设置在全局，即 tooltip
|
||||
/// 可以设置在坐标系中，即 grid.tooltip、polar.tooltip、single.tooltip
|
||||
/// 可以设置在系列中，即 series.tooltip
|
||||
/// 可以设置在系列的每个数据项中，即 series.data.tooltip
|
||||
/// </remark>
|
||||
public class Tooltip
|
||||
{
|
||||
/// <summary>是否显示提示框组件</summary>
|
||||
/// <remark>包括提示框浮层和 axisPointer。</remark>
|
||||
public Boolean? Show { get; set; }
|
||||
|
||||
/// <summary>触发类型</summary>
|
||||
/// <remark>
|
||||
/// 可选：
|
||||
/// 'item'
|
||||
/// 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
|
||||
/// 'axis'
|
||||
/// 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
|
||||
/// 在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
|
||||
/// 'none'
|
||||
/// 什么都不触发。
|
||||
/// </remark>
|
||||
public String Trigger { get; set; }
|
||||
|
||||
/// <summary>坐标轴指示器配置项</summary>
|
||||
/// <remark>
|
||||
/// tooltip.axisPointer 是配置坐标轴指示器的快捷方式。实际上坐标轴指示器的全部功能，都可以通过轴上的 axisPointer 配置项完成（例如 xAxis.axisPointer 或 angleAxis.axisPointer）。但是使用 tooltip.axisPointer 在简单场景下会更方便一些。
|
||||
/// 注意： tooltip.axisPointer 中诸配置项的优先级低于轴上的 axisPointer 的配置项。
|
||||
/// 坐标轴指示器是指示坐标轴当前刻度的工具。
|
||||
/// 如下例，鼠标悬浮到图上，可以出现标线和刻度文本。
|
||||
/// 上例中，使用了 axisPointer.link 来关联不同的坐标系中的 axisPointer。
|
||||
/// 坐标轴指示器也有适合触屏的交互方式，如下：
|
||||
/// 坐标轴指示器在多轴的场景能起到辅助作用：
|
||||
///
|
||||
/// 注意：
|
||||
/// 一般来说，axisPointer 的具体配置项会配置在各个轴中（如 xAxis.axisPointer）或者 tooltip 中（如 tooltip.axisPointer）。
|
||||
/// 但是这几个选项只能配置在全局的 axisPointer 中：axisPointer.triggerOn、axisPointer.link。
|
||||
/// 如何显示 axisPointer：
|
||||
/// 直角坐标系 grid、极坐标系 polar、单轴坐标系 single 中的每个轴都自己的 axisPointer。
|
||||
/// 他们的 axisPointer 默认不显示。有两种方法可以让他们显示：
|
||||
/// 设置轴上的 axisPointer.show（例如 xAxis.axisPointer.show）为 true，则显示此轴的 axisPointer。
|
||||
/// 设置 tooltip.trigger 设置为 'axis' 或者 tooltip.axisPointer.type 设置为 'cross'，则此时坐标系会自动选择显示哪个轴的 axisPointer，也可以使用 tooltip.axisPointer.axis 改变这种选择。注意，轴上如果设置了 axisPointer，会覆盖此设置。
|
||||
/// 如何显示 axisPointer 的 label：
|
||||
/// axisPointer 的 label 默认不显示（也就是默认只显示指示线），除非：
|
||||
/// 设置轴上的 axisPointer.label.show（例如 xAxis.axisPointer.label.show）为 true，则显示此轴的 axisPointer 的 label。
|
||||
/// 设置 tooltip.axisPointer.type 为 'cross' 时会自动显示 axisPointer 的 label。
|
||||
/// 关于触屏的 axisPointer 的设置
|
||||
/// 设置轴上的 axisPointer.handle.show（例如 xAxis.axisPointer.handle.show 为 true 则会显示出此 axisPointer 的拖拽按钮。（polar 坐标系暂不支持此功能）。
|
||||
/// 注意：
|
||||
/// 如果发现此时 tooltip 效果不良好，可设置 tooltip.triggerOn 为 'none'（于是效果为：手指按住按钮则显示 tooltip，松开按钮则隐藏 tooltip），或者 tooltip.alwaysShowContent 为 true（效果为 tooltip 一直显示）。
|
||||
/// 参见例子。
|
||||
/// 自动吸附到数据（snap）
|
||||
/// 对于数值轴、时间轴，如果开启了 snap，则 axisPointer 会自动吸附到最近的点上。
|
||||
/// </remark>
|
||||
public Object AxisPointer { get; set; }
|
||||
|
||||
/// <summary>是否显示提示框浮层，默认显示</summary>
|
||||
/// <remark>只需tooltip触发事件或显示axisPointer而不需要显示内容时可配置该项为false。</remark>
|
||||
public Boolean? ShowContent { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 是否永远显示提示框内容，默认情况下在移出可触发提示框区域后 一定时间 后隐藏，设置为 true 可以保证一直显示提示框内容。
|
||||
/// 该属性为 ECharts 3.0 中新加。
|
||||
/// </remark>
|
||||
public Boolean? AlwaysShowContent { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 提示框触发的条件，可选：
|
||||
/// 'mousemove'
|
||||
/// 鼠标移动时触发。
|
||||
/// 'click'
|
||||
/// 鼠标点击时触发。
|
||||
/// 'mousemove|click'
|
||||
/// 同时鼠标移动和点击时触发。
|
||||
/// 'none'
|
||||
/// 不在 'mousemove' 或 'click' 时触发，用户可以通过 action.tooltip.showTip 和 action.tooltip.hideTip 来手动触发和隐藏。也可以通过 axisPointer.handle 来触发或隐藏。
|
||||
/// 该属性为 ECharts 3.0 中新加。
|
||||
/// </remark>
|
||||
public String TriggerOn { get; set; }
|
||||
|
||||
/// <summary>浮层显示的延迟，单位为 ms，默认没有延迟，也不建议设置</summary>
|
||||
/// <remark>在 triggerOn 为 'mousemove' 时有效。</remark>
|
||||
public Double? ShowDelay { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>浮层隐藏的延迟，单位为 ms，在 alwaysShowContent 为 true 的时候无效。</remark>
|
||||
public Double? HideDelay { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。</remark>
|
||||
public Boolean? Enterable { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>浮层的渲染模式，默认以 'html 即额外的 DOM 节点展示 tooltip；此外还可以设置为 'richText' 表示以富文本的形式渲染，渲染的结果在图表对应的 Canvas 中，这对于一些没有 DOM 的环境（如微信小程序）有更好的支持。</remark>
|
||||
public String RenderMode { get; set; }
|
||||
|
||||
/// <summary>是否将 tooltip 框限制在图表的区域内</summary>
|
||||
/// <remark>当图表外层的 dom 被设置为 'overflow: hidden'，或者移动端窄屏，导致 tooltip 超出外界被截断时，此配置比较有用。</remark>
|
||||
public Boolean? Confine { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v4.7.0 开始支持
|
||||
/// （自 v5.5.0 已废弃，请使用 appendTo。）
|
||||
/// 是否将 tooltip 的 DOM 节点添加为 HTML 的 <body> 的子节点。只有当 renderMode 为 'html' 是有意义的。
|
||||
/// 默认值是 false。false 表示，tooltip 的 DOM 节点会被添加为本图表的 DOM container 的一个子孙节点。但是这种方式导致，如果本图表的 DOM container 的祖先节点有设置 overflow: hidden，那么当 tooltip 超出 container 范围使可能被截断。这个问题一定程度上可以用 tooltip.confine 来解决，但是不一定能解决所有场景。
|
||||
/// 所以这里我们提供了 appendToBody: true 来解决这件事。这也是常见的解决此类问题的一种方式。但是 true 并不定为默认值，因为要避免 break change，尤其是一些对于 tooltip 深入定制的使用。并且也避免一些未知的 bad case。
|
||||
/// 注：CSS transform 的场景，这也可以使用。
|
||||
/// </remark>
|
||||
public Boolean? AppendToBody { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v5.5.0 开始支持
|
||||
/// 将 tooltip 的 DOM 节点添加到哪个节点下。只有当 renderMode 为 'html' 是有意义的。
|
||||
/// 默认值是 null，表示 tooltip 的 DOM 节点会被添加为本图表的 DOM container 的一个子孙节点。但是这种方式导致，如果本图表的 DOM container 的祖先节点有设置 overflow: hidden，那么当 tooltip 超出 container 范围使可能被截断。这个问题一定程度上可以用 tooltip.confine 来解决，但是不一定能解决所有场景。
|
||||
/// 对于这样的场景，可以指定 appendTo。当其为 Function 形式时，接口形如
|
||||
/// (chartContainer: HTMLElement) => HTMLElement | undefined | null
|
||||
/// 即返回 tooltip 的 DOM 节点应该添加到哪个节点下。返回 undefined 或 null 表示采用上述的默认逻辑。返回 HTMLElement 表示添加到该节点下。
|
||||
/// 注：CSS transform 的场景，这也可以使用。
|
||||
/// </remark>
|
||||
public String AppendTo { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v5.0.0 开始支持
|
||||
/// 指定 tooltip 的 DOM 节点的 CSS 类。（只在 html 模式下生效）。
|
||||
/// Example:
|
||||
/// className: 'echarts-tooltip echarts-tooltip-dark'
|
||||
/// </remark>
|
||||
public String ClassName { get; set; }
|
||||
|
||||
/// <summary>提示框浮层的移动动画过渡时间，单位是 s，设置为 0 的时候会紧跟着鼠标移动。</summary>
|
||||
public Double? TransitionDuration { get; set; }
|
||||
|
||||
/// <summary>提示框浮层的位置，默认不设置时位置会跟随鼠标的位置</summary>
|
||||
/// <remark>
|
||||
/// 可选：
|
||||
/// Array
|
||||
/// 通过数组表示提示框浮层的位置，支持数字设置绝对位置，百分比设置相对位置。
|
||||
/// 示例:
|
||||
/// // 绝对位置，相对于容器左侧 10px, 上侧 10 px
|
||||
/// position: [10, 10]
|
||||
/// // 相对位置，放置在容器正中间
|
||||
/// position: ['50%', '50%']
|
||||
/// Function
|
||||
/// 回调函数，格式如下：
|
||||
/// (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array
|
||||
/// 参数：
|
||||
/// point: 鼠标位置，如 [20, 40]。
|
||||
/// params: 同 formatter 的参数相同。
|
||||
/// dom: tooltip 的 dom 对象。
|
||||
/// rect: 只有鼠标在图形上时有效，是一个用x, y, width, height四个属性表达的图形包围盒。
|
||||
/// size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。
|
||||
/// 返回值：
|
||||
/// 可以是一个表示 tooltip 位置的数组，数组值可以是绝对的像素值，也可以是相 百分比。
|
||||
/// 也可以是一个对象，如：{left: 10, top: 30}，或者 {right: '20%', bottom: 40}。
|
||||
/// 如下示例：
|
||||
/// position: function (point, params, dom, rect, size) {
|
||||
/// // 固定在顶部
|
||||
/// return [point[0], '10%'];
|
||||
/// }
|
||||
/// 或者：
|
||||
/// position: function (pos, params, dom, rect, size) {
|
||||
/// // 鼠标在左侧时 tooltip 显示到右侧，鼠标在右侧时 tooltip 显示到左侧。
|
||||
/// var obj = {top: 60};
|
||||
/// obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
|
||||
/// return obj;
|
||||
/// }
|
||||
///
|
||||
/// 'inside'
|
||||
/// 鼠标所在图形的内部中心位置，只在 trigger 为'item'的时候有效。
|
||||
/// 'top'
|
||||
/// 鼠标所在图形上侧，只在 trigger 为'item'的时候有效。
|
||||
/// 'left'
|
||||
/// 鼠标所在图形左侧，只在 trigger 为'item'的时候有效。
|
||||
/// 'right'
|
||||
/// 鼠标所在图形右侧，只在 trigger 为'item'的时候有效。
|
||||
/// 'bottom'
|
||||
/// 鼠标所在图形底侧，只在 trigger 为'item'的时候有效。
|
||||
/// </remark>
|
||||
public Object Position { get; set; }
|
||||
|
||||
/// <summary>提示框浮层内容格式器，支持字符串模板和回调函数两种形式</summary>
|
||||
/// <remark>
|
||||
/// 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}'
|
||||
/// 2. 回调函数
|
||||
/// 回调函数格式：
|
||||
/// (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]
|
||||
/// 支持返回 HTML 字符串或者创建的 DOM 实例。
|
||||
/// 第一个参数 params 是 formatter 需要的数据集。格式如下：
|
||||
/// {
|
||||
/// componentType: 'series',
|
||||
/// // 系列类型
|
||||
/// seriesType: string,
|
||||
/// // 系列在传入的 option.series 中的 index
|
||||
/// seriesIndex: number,
|
||||
/// // 系列名称
|
||||
/// seriesName: string,
|
||||
/// // 数据名，类目名
|
||||
/// name: string,
|
||||
/// // 数据在传入的 data 数组中的 index
|
||||
/// dataIndex: number,
|
||||
/// // 传入的原始数据项
|
||||
/// data: Object,
|
||||
/// // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
|
||||
/// value: number|Array|Object,
|
||||
/// // 坐标轴 encode 映射信息，
|
||||
/// // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
|
||||
/// // value 必然为数组，不会为 null/undefined，表示 dimension index 。
|
||||
/// // 其内容如：
|
||||
/// // {
|
||||
/// // x: [2] // dimension index 为 2 的数据映射到 x 轴
|
||||
/// // y: [0] // dimension index 为 0 的数据映射到 y 轴
|
||||
/// // }
|
||||
/// encode: Object,
|
||||
/// // 维度名列表
|
||||
/// dimensionNames: Array<String>,
|
||||
/// // 数据的维度 index，如 0 或 1 或 2 ...
|
||||
/// // 仅在雷达图中使用。
|
||||
/// dimensionIndex: number,
|
||||
/// // 数据图形的颜色
|
||||
/// color: string,
|
||||
/// // 饼图/漏斗图的百分比
|
||||
/// percent: number,
|
||||
/// // 旭日图中当前节点的祖先节点（包括自身）
|
||||
/// treePathInfo: Array,
|
||||
/// // 树图/矩形树图中当前节点的祖先节点（包括自身）
|
||||
/// treeAncestors: Array,
|
||||
/// // 坐标轴标签文本是否溢出隐藏，可以使用此函数判断是否需要弹出提示框
|
||||
/// isTruncated: Function,
|
||||
/// // 当前坐标轴标签刻度索引
|
||||
/// tickIndex: number
|
||||
/// }
|
||||
/// 注：encode 和 dimensionNames 的使用方式，例如：
|
||||
/// 如果数据为：
|
||||
/// dataset: {
|
||||
/// source: [
|
||||
/// ['Matcha Latte', 43.3, 85.8, 93.7],
|
||||
/// ['Milk Tea', 83.1, 73.4, 55.1],
|
||||
/// ['Cheese Cocoa', 86.4, 65.2, 82.5],
|
||||
/// ['Walnut Brownie', 72.4, 53.9, 39.1]
|
||||
/// ]
|
||||
/// }
|
||||
/// 则可这样得到 y 轴对应的 value：
|
||||
/// params.value[params.encode.y[0]]
|
||||
/// 如果数据为：
|
||||
/// dataset: {
|
||||
/// dimensions: ['product', '2015', '2016', '2017'],
|
||||
/// source: [
|
||||
/// {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
|
||||
/// {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
|
||||
/// {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
|
||||
/// {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
|
||||
/// ]
|
||||
/// }
|
||||
/// 则可这样得到 y 轴对应的 value：
|
||||
/// params.value[params.dimensionNames[params.encode.y[0]]]
|
||||
/// 在 trigger 为 'axis' 的时候，或者 tooltip 被 axisPointer 触发的时候，params 是多个系列的数据数组。其中每项内容格式同上，并且，
|
||||
/// {
|
||||
/// componentType: 'series',
|
||||
/// // 系列类型
|
||||
/// seriesType: string,
|
||||
/// // 系列在传入的 option.series 中的 index
|
||||
/// seriesIndex: number,
|
||||
/// // 系列名称
|
||||
/// seriesName: string,
|
||||
/// // 数据名，类目名
|
||||
/// name: string,
|
||||
/// // 数据在传入的 data 数组中的 index
|
||||
/// dataIndex: number,
|
||||
/// // 传入的原始数据项
|
||||
/// data: Object,
|
||||
/// // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）
|
||||
/// value: number|Array|Object,
|
||||
/// // 坐标轴 encode 映射信息，
|
||||
/// // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）
|
||||
/// // value 必然为数组，不会为 null/undefined，表示 dimension index 。
|
||||
/// // 其内容如：
|
||||
/// // {
|
||||
/// // x: [2] // dimension index 为 2 的数据映射到 x 轴
|
||||
/// // y: [0] // dimension index 为 0 的数据映射到 y 轴
|
||||
/// // }
|
||||
/// encode: Object,
|
||||
/// // 维度名列表
|
||||
/// dimensionNames: Array<String>,
|
||||
/// // 数据的维度 index，如 0 或 1 或 2 ...
|
||||
/// // 仅在雷达图中使用。
|
||||
/// dimensionIndex: number,
|
||||
/// // 数据图形的颜色
|
||||
/// color: string
|
||||
/// }
|
||||
/// 注：encode 和 dimensionNames 的使用方式，例如：
|
||||
/// 如果数据为：
|
||||
/// dataset: {
|
||||
/// source: [
|
||||
/// ['Matcha Latte', 43.3, 85.8, 93.7],
|
||||
/// ['Milk Tea', 83.1, 73.4, 55.1],
|
||||
/// ['Cheese Cocoa', 86.4, 65.2, 82.5],
|
||||
/// ['Walnut Brownie', 72.4, 53.9, 39.1]
|
||||
/// ]
|
||||
/// }
|
||||
/// 则可这样得到 y 轴对应的 value：
|
||||
/// params.value[params.encode.y[0]]
|
||||
/// 如果数据为：
|
||||
/// dataset: {
|
||||
/// dimensions: ['product', '2015', '2016', '2017'],
|
||||
/// source: [
|
||||
/// {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
|
||||
/// {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
|
||||
/// {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
|
||||
/// {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
|
||||
/// ]
|
||||
/// }
|
||||
/// 则可这样得到 y 轴对应的 value：
|
||||
/// params.value[params.dimensionNames[params.encode.y[0]]]
|
||||
/// 第二个参数 ticket 是异步回调标识，配合第三个参数 callback 使用。
|
||||
/// 第三个参数 callback 是异步回调，在提示框浮层内容是异步获取的时候，可以通过 callback 传入上述的 ticket 和 html 更新提示框浮层内容。
|
||||
/// 示例：
|
||||
/// formatter: function (params, ticket, callback) {
|
||||
/// $.get('detail?name=' + params.name, function (content) {
|
||||
/// callback(ticket, toHTML(content));
|
||||
/// });
|
||||
/// return 'Loading';
|
||||
/// }
|
||||
/// </remark>
|
||||
public String Formatter { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v5.3.0 开始支持
|
||||
/// tooltip 中数值显示部分的格式化回调函数。
|
||||
/// 回调函数格式：
|
||||
/// (value: number | string, dataIndex: number) => string
|
||||
/// 自 v5.5.0 版本起提供 dataIndex。
|
||||
/// 示例：
|
||||
/// // 添加 $ 前缀
|
||||
/// valueFormatter: (value) => '$' + value.toFixed(2)
|
||||
/// </remark>
|
||||
public String ValueFormatter { get; set; }
|
||||
|
||||
/// <summary>提示框浮层的背景颜色</summary>
|
||||
public String BackgroundColor { get; set; }
|
||||
|
||||
/// <summary>提示框浮层的边框颜色</summary>
|
||||
public String BorderColor { get; set; }
|
||||
|
||||
/// <summary>提示框浮层的边框宽</summary>
|
||||
public Double? BorderWidth { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。
|
||||
/// 使用示例：
|
||||
/// // 设置内边距为 5
|
||||
/// padding: 5
|
||||
/// // 设置上下的内边距为 5，左右的内边距为 10
|
||||
/// padding: [5, 10]
|
||||
/// // 分别设置四个方向的内边距
|
||||
/// padding: [
|
||||
/// 5, // 上
|
||||
/// 10, // 右
|
||||
/// 5, // 下
|
||||
/// 10, // 左
|
||||
/// ]
|
||||
/// </remark>
|
||||
public Object Padding { get; set; }
|
||||
|
||||
/// <summary>提示框浮层的文本样式</summary>
|
||||
public Object TextStyle { get; set; }
|
||||
|
||||
/// <summary>额外附加到浮层的 css 样式</summary>
|
||||
/// <remark>
|
||||
/// 如下为浮层添加阴影的示例：
|
||||
/// extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
|
||||
/// </remark>
|
||||
public String ExtraCssText { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v5.0.0 开始支持
|
||||
/// 多系列提示框浮层排列顺序。默认值为 'seriesAsc'
|
||||
/// 提示框排列顺序可选值:
|
||||
/// 'seriesAsc'
|
||||
/// 根据系列声明, 升序排列。
|
||||
/// 'seriesDesc'
|
||||
/// 根据系列声明, 降序排列。
|
||||
/// 'valueAsc'
|
||||
/// 根据数据值, 升序排列。
|
||||
/// 'valueDesc'
|
||||
/// 根据数据值, 降序排列。
|
||||
/// </remark>
|
||||
public String Order { get; set; }
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,319 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
|
||||
namespace NewLife.Cube.Charts;
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>直角坐标系 grid 中的 x 轴，一般情况下单个 grid 组件最多只能放上下两个 x 轴，多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠。</remark>
|
||||
public class XAxis
|
||||
{
|
||||
/// <summary>组件 ID</summary>
|
||||
/// <remark>默认不指定。指定则可用于在 option 或者 API 中引用组件。</remark>
|
||||
public String Id { get; set; }
|
||||
|
||||
/// <summary>是否显示 x 轴</summary>
|
||||
public Boolean? Show { get; set; }
|
||||
|
||||
/// <summary>x 轴所在的 grid 的索引，默认位于第一个 grid</summary>
|
||||
public Double? GridIndex { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v5.3.0 开始支持
|
||||
/// 在多个 x 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效。
|
||||
/// </remark>
|
||||
public Boolean? AlignTicks { get; set; }
|
||||
|
||||
/// <summary>x 轴的位置</summary>
|
||||
/// <remark>
|
||||
/// 可选：
|
||||
/// 'top'
|
||||
/// 'bottom'
|
||||
/// 默认 grid 中的第一个 x 轴在 grid 的下方（'bottom'），第二个 x 轴视第一个 x 轴的位置放在另一侧。注：若未将 xAxis.axisLine.onZero 设为 false , 则该项无法生效
|
||||
/// </remark>
|
||||
public String Position { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>X 轴相对于默认位置的偏移，在相同的 position 上有多个 X 轴的时候有用。注：若未将 xAxis.axisLine.onZero 设为 false , 则该项无法生效</remark>
|
||||
public Double? Offset { get; set; }
|
||||
|
||||
/// <summary>坐标轴类型</summary>
|
||||
/// <remark>
|
||||
/// 可选：
|
||||
/// 'value'
|
||||
/// 数值轴，适用于连续数据。
|
||||
/// 'category'
|
||||
/// 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
|
||||
/// 'time'
|
||||
/// 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
|
||||
/// 'log'
|
||||
/// 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
|
||||
/// </remark>
|
||||
public String Type { get; set; }="category";
|
||||
|
||||
/// <summary>坐标轴名称</summary>
|
||||
public String Name { get; set; }
|
||||
|
||||
/// <summary>坐标轴名称显示位置</summary>
|
||||
/// <remark>
|
||||
/// 可选：
|
||||
/// 'start'
|
||||
/// 'middle' 或者 'center'
|
||||
/// 'end'
|
||||
/// </remark>
|
||||
public String NameLocation { get; set; }
|
||||
|
||||
/// <summary>坐标轴名称的文字样式</summary>
|
||||
public Object NameTextStyle { get; set; }
|
||||
|
||||
/// <summary>坐标轴名称与轴线之间的距离</summary>
|
||||
public Double? NameGap { get; set; }
|
||||
|
||||
/// <summary>坐标轴名字旋转，角度值</summary>
|
||||
public Double? NameRotate { get; set; }
|
||||
|
||||
/// <summary>坐标轴名字的截断</summary>
|
||||
public Object NameTruncate { get; set; }
|
||||
|
||||
/// <summary>是否是反向坐标轴</summary>
|
||||
public Boolean? Inverse { get; set; }
|
||||
|
||||
/// <summary>坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样</summary>
|
||||
/// <remark>
|
||||
/// 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
|
||||
/// 非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。
|
||||
/// 示例：
|
||||
/// boundaryGap: ['20%', '20%']
|
||||
/// </remark>
|
||||
public Object BoundaryGap { get; set; }
|
||||
|
||||
/// <summary>坐标轴刻度最小值</summary>
|
||||
/// <remark>
|
||||
/// 可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
|
||||
/// 不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
|
||||
/// 在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）。
|
||||
/// 当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：
|
||||
/// min: function (value) {
|
||||
/// return value.min - 20;
|
||||
/// }
|
||||
/// 其中 value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数可返回坐标轴的最小值，也可返回 null/undefined 来表示“自动计算最小值”（返回 null/undefined 从 v4.8.0 开始支持）。
|
||||
/// </remark>
|
||||
public Object Min { get; set; }
|
||||
|
||||
/// <summary>坐标轴刻度最大值</summary>
|
||||
/// <remark>
|
||||
/// 可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
|
||||
/// 不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
|
||||
/// 在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）。
|
||||
/// 当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：
|
||||
/// max: function (value) {
|
||||
/// return value.max - 20;
|
||||
/// }
|
||||
/// 其中 value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数可返回坐标轴的最大值，也可返回 null/undefined 来表示“自动计算最大值”（返回 null/undefined 从 v4.8.0 开始支持）。
|
||||
/// </remark>
|
||||
public Object Max { get; set; }
|
||||
|
||||
/// <summary>只在数值轴中（type: 'value'）有效</summary>
|
||||
/// <remark>
|
||||
/// 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
|
||||
/// 在设置 min 和 max 之后该配置项无效。
|
||||
/// </remark>
|
||||
public Boolean? Scale { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
|
||||
/// 在类目轴中无效。
|
||||
/// </remark>
|
||||
public Double? SplitNumber { get; set; }
|
||||
|
||||
/// <summary>自动计算的坐标轴最小间隔大小</summary>
|
||||
/// <remark>
|
||||
/// 例如可以设置成1保证坐标轴分割刻度显示成整数。
|
||||
/// {
|
||||
/// minInterval: 1
|
||||
/// }
|
||||
/// 只在数值轴或时间轴中（type: 'value' 或 'time'）有效。
|
||||
/// </remark>
|
||||
public Double? MinInterval { get; set; }
|
||||
|
||||
/// <summary>自动计算的坐标轴最大间隔大小</summary>
|
||||
/// <remark>
|
||||
/// 例如，在时间轴（（type: 'time'））可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。
|
||||
/// {
|
||||
/// maxInterval: 3600 * 24 * 1000
|
||||
/// }
|
||||
/// 只在数值轴或时间轴中（type: 'value' 或 'time'）有效。
|
||||
/// </remark>
|
||||
public Double? MaxInterval { get; set; }
|
||||
|
||||
/// <summary>强制设置坐标轴分割间隔</summary>
|
||||
/// <remark>
|
||||
/// 因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用。
|
||||
/// 无法在类目轴中使用。在时间轴（type: 'time'）中需要传时间戳，在对数轴（type: 'log'）中需要传指数值。
|
||||
/// </remark>
|
||||
public Double? Interval { get; set; }
|
||||
|
||||
/// <summary>对数轴的底数，只在对数轴中（type: 'log'）有效</summary>
|
||||
public Double? LogBase { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v5.5.1 开始支持
|
||||
/// 用于指定轴的起始值。
|
||||
/// </remark>
|
||||
public Double? StartValue { get; set; }
|
||||
|
||||
/// <summary>坐标轴是否是静态无法交互</summary>
|
||||
public Boolean? Silent { get; set; }
|
||||
|
||||
/// <summary>坐标轴的标签是否响应和触发鼠标事件，默认不响应</summary>
|
||||
/// <remark>
|
||||
/// 事件参数如下：
|
||||
/// {
|
||||
/// // 组件类型，xAxis, yAxis, radiusAxis, angleAxis
|
||||
/// // 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
|
||||
/// componentType: string,
|
||||
/// // 未格式化过的刻度值, 点击刻度标签有效
|
||||
/// value: '',
|
||||
/// // 坐标轴名称, 点击坐标轴名称有效
|
||||
/// name: ''
|
||||
/// }
|
||||
/// </remark>
|
||||
public Boolean? TriggerEvent { get; set; }
|
||||
|
||||
/// <summary>坐标轴轴线相关设置</summary>
|
||||
public Object AxisLine { get; set; }
|
||||
|
||||
/// <summary>坐标轴刻度相关设置</summary>
|
||||
public Object AxisTick { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v4.6.0 开始支持
|
||||
/// 坐标轴次刻度线相关设置。
|
||||
/// 注意：次刻度线无法在类目轴（type: 'category'）中使用。
|
||||
/// 示例：
|
||||
/// 1) 函数绘图中使用次刻度线
|
||||
/// 2) 在对数轴中使用次刻度线
|
||||
/// </remark>
|
||||
public Object MinorTick { get; set; }
|
||||
|
||||
/// <summary>坐标轴刻度标签的相关设置</summary>
|
||||
public Object AxisLabel { get; set; }
|
||||
|
||||
/// <summary>坐标轴在 grid 区域中的分隔线</summary>
|
||||
public Object SplitLine { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v4.6.0 开始支持
|
||||
/// 坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线 minorTick
|
||||
/// </remark>
|
||||
public Object MinorSplitLine { get; set; }
|
||||
|
||||
/// <summary>坐标轴在 grid 区域中的分隔区域，默认不显示</summary>
|
||||
public Object SplitArea { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 类目数据，在类目轴（type: 'category'）中有效。
|
||||
/// 如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
|
||||
/// 如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。
|
||||
/// 示例：
|
||||
/// // 所有类目名称列表
|
||||
/// data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
/// // 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
|
||||
/// data: [{
|
||||
/// value: '周一',
|
||||
/// // 突出周一
|
||||
/// textStyle: {
|
||||
/// fontSize: 20,
|
||||
/// color: 'red'
|
||||
/// }
|
||||
/// }, '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
/// </remark>
|
||||
public Object[] Data { get; set; }
|
||||
|
||||
/// <summary>坐标轴指示器配置项</summary>
|
||||
public Object AxisPointer { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v5.6.0 开始支持
|
||||
/// 坐标轴 tooltip 设置，注意需设置 triggerEvent 为 true 并启用全局 option.tooltip 组件。
|
||||
/// </remark>
|
||||
public Object Tooltip { get; set; }
|
||||
|
||||
/// <summary>是否开启动画</summary>
|
||||
public Boolean? Animation { get; set; }
|
||||
|
||||
/// <summary>是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。</summary>
|
||||
public Double? AnimationThreshold { get; set; }
|
||||
|
||||
/// <summary>初始动画的时长</summary>
|
||||
/// <remark>
|
||||
/// 支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：
|
||||
/// animationDuration: function (idx) {
|
||||
/// // 越往后的数据时长越大
|
||||
/// return idx * 100;
|
||||
/// }
|
||||
/// </remark>
|
||||
public Object AnimationDuration { get; set; }
|
||||
|
||||
/// <summary>初始动画的缓动效果</summary>
|
||||
/// <remark>不同的缓动效果可以参考 缓动示例。</remark>
|
||||
public String AnimationEasing { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
|
||||
/// 如下示例：
|
||||
/// animationDelay: function (idx) {
|
||||
/// // 越往后的数据延迟越大
|
||||
/// return idx * 100;
|
||||
/// }
|
||||
/// 也可以看该示例
|
||||
/// </remark>
|
||||
public Object AnimationDelay { get; set; }
|
||||
|
||||
/// <summary>数据更新动画的时长</summary>
|
||||
/// <remark>
|
||||
/// 支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：
|
||||
/// animationDurationUpdate: function (idx) {
|
||||
/// // 越往后的数据时长越大
|
||||
/// return idx * 100;
|
||||
/// }
|
||||
/// </remark>
|
||||
public Object AnimationDurationUpdate { get; set; }
|
||||
|
||||
/// <summary>数据更新动画的缓动效果</summary>
|
||||
public String AnimationEasingUpdate { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
|
||||
/// 如下示例：
|
||||
/// animationDelayUpdate: function (idx) {
|
||||
/// // 越往后的数据延迟越大
|
||||
/// return idx * 100;
|
||||
/// }
|
||||
/// 也可以看该示例
|
||||
/// </remark>
|
||||
public Object AnimationDelayUpdate { get; set; }
|
||||
|
||||
/// <summary>X 轴所有图形的 zlevel 值</summary>
|
||||
/// <remark>
|
||||
/// zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
|
||||
/// zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
|
||||
/// </remark>
|
||||
public Double? Zlevel { get; set; }
|
||||
|
||||
/// <summary>X 轴组件的所有图形的z值</summary>
|
||||
/// <remark>
|
||||
/// 控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
|
||||
/// z相比zlevel优先级更低，而且不会创建新的 Canvas。
|
||||
/// </remark>
|
||||
public Double? Z { get; set; }
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,322 @@
|
|||
using System;
|
||||
using System.Collections.Generic;
|
||||
|
||||
namespace NewLife.Cube.Charts;
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>直角坐标系 grid 中的 y 轴，一般情况下单个 grid 组件最多只能放左右两个 y 轴，多于两个 y 轴需要通过配置 offset 属性防止同个位置多个 Y 轴的重叠。</remark>
|
||||
public class YAxis
|
||||
{
|
||||
/// <summary>组件 ID</summary>
|
||||
/// <remark>默认不指定。指定则可用于在 option 或者 API 中引用组件。</remark>
|
||||
public String Id { get; set; }
|
||||
|
||||
/// <summary>是否显示 y 轴</summary>
|
||||
public Boolean? Show { get; set; }
|
||||
|
||||
/// <summary>y 轴所在的 grid 的索引，默认位于第一个 grid</summary>
|
||||
public Double? GridIndex { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v5.3.0 开始支持
|
||||
/// 在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效。
|
||||
/// </remark>
|
||||
public Boolean? AlignTicks { get; set; }
|
||||
|
||||
/// <summary>y 轴的位置</summary>
|
||||
/// <remark>
|
||||
/// 可选：
|
||||
/// 'left'
|
||||
/// 'right'
|
||||
/// 默认 grid 中的第一个 y 轴在 grid 的左侧（'left'），第二个 y 轴视第一个 y 轴的位置放在另一侧。注：若未将 yAxis.axisLine.onZero 设为 false , 则该项无法生效
|
||||
/// </remark>
|
||||
public String Position { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// Y 轴相对于默认位置的偏移，在相同的 position 上有多个 Y 轴的时候有用。注：若未将 yAxis.axisLine.onZero 设为 false , 则该项无法生效
|
||||
/// 需要配合其他配置项共同实现动态排序柱状图效果，具体参见动态排序柱状图教程。
|
||||
/// </remark>
|
||||
public Double? Offset { get; set; }
|
||||
|
||||
/// <summary>坐标轴类型</summary>
|
||||
/// <remark>
|
||||
/// 可选：
|
||||
/// 'value'
|
||||
/// 数值轴，适用于连续数据。
|
||||
/// 'category'
|
||||
/// 类目轴，适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 yAxis.data 设置类目数据。
|
||||
/// 'time'
|
||||
/// 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
|
||||
/// 'log'
|
||||
/// 对数轴。适用于对数数据。对数轴下的堆积柱状图或堆积折线图可能带来很大的视觉误差，并且在一定情况下可能存在非预期效果，应避免使用。
|
||||
/// </remark>
|
||||
public String Type { get; set; }="value";
|
||||
|
||||
/// <summary>坐标轴名称</summary>
|
||||
public String Name { get; set; }
|
||||
|
||||
/// <summary>坐标轴名称显示位置</summary>
|
||||
/// <remark>
|
||||
/// 可选：
|
||||
/// 'start'
|
||||
/// 'middle' 或者 'center'
|
||||
/// 'end'
|
||||
/// </remark>
|
||||
public String NameLocation { get; set; }
|
||||
|
||||
/// <summary>坐标轴名称的文字样式</summary>
|
||||
public Object NameTextStyle { get; set; }
|
||||
|
||||
/// <summary>坐标轴名称与轴线之间的距离</summary>
|
||||
public Double? NameGap { get; set; }
|
||||
|
||||
/// <summary>坐标轴名字旋转，角度值</summary>
|
||||
public Double? NameRotate { get; set; }
|
||||
|
||||
/// <summary>坐标轴名字的截断</summary>
|
||||
public Object NameTruncate { get; set; }
|
||||
|
||||
/// <summary>是否是反向坐标轴</summary>
|
||||
public Boolean? Inverse { get; set; }
|
||||
|
||||
/// <summary>坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样</summary>
|
||||
/// <remark>
|
||||
/// 类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。
|
||||
/// 非类目轴，包括时间，数值，对数轴，boundaryGap是一个两个值的数组，分别表示数据最小值和最大值的延伸范围，可以直接设置数值或者相对的百分比，在设置 min 和 max 后无效。
|
||||
/// 示例：
|
||||
/// boundaryGap: ['20%', '20%']
|
||||
/// </remark>
|
||||
public Object BoundaryGap { get; set; }
|
||||
|
||||
/// <summary>坐标轴刻度最小值</summary>
|
||||
/// <remark>
|
||||
/// 可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
|
||||
/// 不设置时会自动计算最小值保证坐标轴刻度的均匀分布。
|
||||
/// 在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）。
|
||||
/// 当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：
|
||||
/// min: function (value) {
|
||||
/// return value.min - 20;
|
||||
/// }
|
||||
/// 其中 value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数可返回坐标轴的最小值，也可返回 null/undefined 来表示“自动计算最小值”（返回 null/undefined 从 v4.8.0 开始支持）。
|
||||
/// </remark>
|
||||
public Object Min { get; set; }
|
||||
|
||||
/// <summary>坐标轴刻度最大值</summary>
|
||||
/// <remark>
|
||||
/// 可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
|
||||
/// 不设置时会自动计算最大值保证坐标轴刻度的均匀分布。
|
||||
/// 在类目轴中，也可以设置为类目的序数（如类目轴 data: ['类A', '类B', '类C'] 中，序数 2 表示 '类C'。也可以设置为负数，如 -3）。
|
||||
/// 当设置成 function 形式时，可以根据计算得出的数据最大最小值设定坐标轴的最小值。如：
|
||||
/// max: function (value) {
|
||||
/// return value.max - 20;
|
||||
/// }
|
||||
/// 其中 value 是一个包含 min 和 max 的对象，分别表示数据的最大最小值，这个函数可返回坐标轴的最大值，也可返回 null/undefined 来表示“自动计算最大值”（返回 null/undefined 从 v4.8.0 开始支持）。
|
||||
/// </remark>
|
||||
public Object Max { get; set; }
|
||||
|
||||
/// <summary>只在数值轴中（type: 'value'）有效</summary>
|
||||
/// <remark>
|
||||
/// 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
|
||||
/// 在设置 min 和 max 之后该配置项无效。
|
||||
/// </remark>
|
||||
public Boolean? Scale { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 坐标轴的分割段数，需要注意的是这个分割段数只是个预估值，最后实际显示的段数会在这个基础上根据分割后坐标轴刻度显示的易读程度作调整。
|
||||
/// 在类目轴中无效。
|
||||
/// </remark>
|
||||
public Double? SplitNumber { get; set; }
|
||||
|
||||
/// <summary>自动计算的坐标轴最小间隔大小</summary>
|
||||
/// <remark>
|
||||
/// 例如可以设置成1保证坐标轴分割刻度显示成整数。
|
||||
/// {
|
||||
/// minInterval: 1
|
||||
/// }
|
||||
/// 只在数值轴或时间轴中（type: 'value' 或 'time'）有效。
|
||||
/// </remark>
|
||||
public Double? MinInterval { get; set; }
|
||||
|
||||
/// <summary>自动计算的坐标轴最大间隔大小</summary>
|
||||
/// <remark>
|
||||
/// 例如，在时间轴（（type: 'time'））可以设置成 3600 * 24 * 1000 保证坐标轴分割刻度最大为一天。
|
||||
/// {
|
||||
/// maxInterval: 3600 * 24 * 1000
|
||||
/// }
|
||||
/// 只在数值轴或时间轴中（type: 'value' 或 'time'）有效。
|
||||
/// </remark>
|
||||
public Double? MaxInterval { get; set; }
|
||||
|
||||
/// <summary>强制设置坐标轴分割间隔</summary>
|
||||
/// <remark>
|
||||
/// 因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用。
|
||||
/// 无法在类目轴中使用。在时间轴（type: 'time'）中需要传时间戳，在对数轴（type: 'log'）中需要传指数值。
|
||||
/// </remark>
|
||||
public Double? Interval { get; set; }
|
||||
|
||||
/// <summary>对数轴的底数，只在对数轴中（type: 'log'）有效</summary>
|
||||
public Double? LogBase { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v5.5.1 开始支持
|
||||
/// 用于指定轴的起始值。
|
||||
/// </remark>
|
||||
public Double? StartValue { get; set; }
|
||||
|
||||
/// <summary>坐标轴是否是静态无法交互</summary>
|
||||
public Boolean? Silent { get; set; }
|
||||
|
||||
/// <summary>坐标轴的标签是否响应和触发鼠标事件，默认不响应</summary>
|
||||
/// <remark>
|
||||
/// 事件参数如下：
|
||||
/// {
|
||||
/// // 组件类型，xAxis, yAxis, radiusAxis, angleAxis
|
||||
/// // 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
|
||||
/// componentType: string,
|
||||
/// // 未格式化过的刻度值, 点击刻度标签有效
|
||||
/// value: '',
|
||||
/// // 坐标轴名称, 点击坐标轴名称有效
|
||||
/// name: ''
|
||||
/// }
|
||||
/// </remark>
|
||||
public Boolean? TriggerEvent { get; set; }
|
||||
|
||||
/// <summary>坐标轴轴线相关设置</summary>
|
||||
public Object AxisLine { get; set; }
|
||||
|
||||
/// <summary>坐标轴刻度相关设置</summary>
|
||||
public Object AxisTick { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v4.6.0 开始支持
|
||||
/// 坐标轴次刻度线相关设置。
|
||||
/// 注意：次刻度线无法在类目轴（type: 'category'）中使用。
|
||||
/// 示例：
|
||||
/// 1) 函数绘图中使用次刻度线
|
||||
/// 2) 在对数轴中使用次刻度线
|
||||
/// </remark>
|
||||
public Object MinorTick { get; set; }
|
||||
|
||||
/// <summary>坐标轴刻度标签的相关设置</summary>
|
||||
public Object AxisLabel { get; set; }
|
||||
|
||||
/// <summary>坐标轴在 grid 区域中的分隔线</summary>
|
||||
public Object SplitLine { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v4.6.0 开始支持
|
||||
/// 坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线 minorTick
|
||||
/// </remark>
|
||||
public Object MinorSplitLine { get; set; }
|
||||
|
||||
/// <summary>坐标轴在 grid 区域中的分隔区域，默认不显示</summary>
|
||||
public Object SplitArea { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 类目数据，在类目轴（type: 'category'）中有效。
|
||||
/// 如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。
|
||||
/// 如果设置了 type 是 'category'，但没有设置 axis.data，则 axis.data 的内容会自动从 series.data 中获取，这会比较方便。不过注意，axis.data 指明的是 'category' 轴的取值范围。如果不指定而是从 series.data 中获取，那么只能获取到 series.data 中出现的值。比如说，假如 series.data 为空时，就什么也获取不到。
|
||||
/// 示例：
|
||||
/// // 所有类目名称列表
|
||||
/// data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
/// // 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
|
||||
/// data: [{
|
||||
/// value: '周一',
|
||||
/// // 突出周一
|
||||
/// textStyle: {
|
||||
/// fontSize: 20,
|
||||
/// color: 'red'
|
||||
/// }
|
||||
/// }, '周二', '周三', '周四', '周五', '周六', '周日']
|
||||
/// </remark>
|
||||
public Object[] Data { get; set; }
|
||||
|
||||
/// <summary>坐标轴指示器配置项</summary>
|
||||
public Object AxisPointer { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 从 v5.6.0 开始支持
|
||||
/// 坐标轴 tooltip 设置，注意需设置 triggerEvent 为 true 并启用全局 option.tooltip 组件。
|
||||
/// </remark>
|
||||
public Object Tooltip { get; set; }
|
||||
|
||||
/// <summary>是否开启动画</summary>
|
||||
public Boolean? Animation { get; set; }
|
||||
|
||||
/// <summary>是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。</summary>
|
||||
public Double? AnimationThreshold { get; set; }
|
||||
|
||||
/// <summary>初始动画的时长</summary>
|
||||
/// <remark>
|
||||
/// 支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：
|
||||
/// animationDuration: function (idx) {
|
||||
/// // 越往后的数据时长越大
|
||||
/// return idx * 100;
|
||||
/// }
|
||||
/// </remark>
|
||||
public Object AnimationDuration { get; set; }
|
||||
|
||||
/// <summary>初始动画的缓动效果</summary>
|
||||
/// <remark>不同的缓动效果可以参考 缓动示例。</remark>
|
||||
public String AnimationEasing { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。
|
||||
/// 如下示例：
|
||||
/// animationDelay: function (idx) {
|
||||
/// // 越往后的数据延迟越大
|
||||
/// return idx * 100;
|
||||
/// }
|
||||
/// 也可以看该示例
|
||||
/// </remark>
|
||||
public Object AnimationDelay { get; set; }
|
||||
|
||||
/// <summary>数据更新动画的时长</summary>
|
||||
/// <remark>
|
||||
/// 支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：
|
||||
/// animationDurationUpdate: function (idx) {
|
||||
/// // 越往后的数据时长越大
|
||||
/// return idx * 100;
|
||||
/// }
|
||||
/// </remark>
|
||||
public Object AnimationDurationUpdate { get; set; }
|
||||
|
||||
/// <summary>数据更新动画的缓动效果</summary>
|
||||
public String AnimationEasingUpdate { get; set; }
|
||||
|
||||
/// <summary></summary>
|
||||
/// <remark>
|
||||
/// 数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。
|
||||
/// 如下示例：
|
||||
/// animationDelayUpdate: function (idx) {
|
||||
/// // 越往后的数据延迟越大
|
||||
/// return idx * 100;
|
||||
/// }
|
||||
/// 也可以看该示例
|
||||
/// </remark>
|
||||
public Object AnimationDelayUpdate { get; set; }
|
||||
|
||||
/// <summary>Y 轴所有图形的 zlevel 值</summary>
|
||||
/// <remark>
|
||||
/// zlevel用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。
|
||||
/// zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。
|
||||
/// </remark>
|
||||
public Double? Zlevel { get; set; }
|
||||
|
||||
/// <summary>Y 轴组件的所有图形的z值</summary>
|
||||
/// <remark>
|
||||
/// 控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。
|
||||
/// z相比zlevel优先级更低，而且不会创建新的 Canvas。
|
||||
/// </remark>
|
||||
public Double? Z { get; set; }
|
||||
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue