EasyV可视化引擎5.3版本已全面上线。 此次EasyV集成推出了ECharts组件。 使用您想要使用的图表来制作您想要的可视化效果。
01
关于ECharts
ECharts是一个基于JavaScript的数据可视化图表库，提供直观、生动、交互式、可定制的数据可视化图表。 ECharts作为一个开源的可视化图表库，提供了多种图表方法。
“开发者对可视化产品的期望不再是简单的图表创建工具，而是在交互、性能、数据处理等方面有了更多的中间要求。” ——ECharts官方
EasyV×ECharts将为产品提供日益丰富的素材库，为用户提供更加个性化的选择，节省开发者更多的代码编写时间，真正实现低代码视觉效果的构建。
02
使用电子图表
基于ECharts组件v1.0.0（当前版本指v5.2.1 ECharts库）
组件说明：
ECharts组件位于组件-->第三方组件栏中。
ECharts 是使用最广泛的开源图表库之一。 EasyV集成ECharts图表库，提高产品开放性，扩展官方图表组件的功能。
以下将“ECharts组件”简称为“EC组件”，以区别“ECharts组件”的概念。
EC组件本身是一个标准的EasyV组件，是一个可以在EasyV平台上运行ECharts图表库的容器。 任何合法的ECharts代码都可以写入组件配置项，同时继承EasyV官方组件配置访问数据和配置交互。
效果演示：
这是操作视频-------------
样式初始化：
代码输入框本身就是一个JavaScript代码环境，输入框中输入的代码最终会作为一个函数被调用echarts java 封装，而该函数必须返回一个ECharts实例。 一般会调用echarts.init()方法来创建实例，初始化相关的操作可以写在这里。 该函数在“配置项”函数之前执行。
该函数的方法参数如下：
该函数本身是一个异步函数，可以返回Promise实现异步操作，并且可以支持异步创建ECharts实例。 例如：
这是要插入的代码----------------
样式配置项：
默认情况下，组件会补充配置项书写描述的注释。 评论较长，可以进入全屏模式查看和编辑。
代码输入框本身就是一个JavaScript代码环境echarts java 封装，输入框中的代码最终会作为函数体来调用函数，函数有以下方法参数：
代码中必须向 option 传递一个合法的 ECharts 配置项对象参数，以提示组件将配置项传递给 ECharts。
风格资源：
ECharts图表有时依赖外部资源，例如图像和json文件。 一般来说，可以通过在“初始化”和“配置项”的代码输入框中调用socket来获取资源。 引用的资源socket必须连接EasyV平台的网络环境，并且支持跨域。 EC组件还提供了上传EasyV平台资源并在代码中引用的方法。
ID：输入资源的唯一标识，可以在上面提到的RES资源对象（如RES.img）上引用，获取资源的url。
文件：可以上传任何格式的文件资源，大小限制为150MB。
数据：
EasyV组件的各种数据源的数据经过过滤和数组映射后，都通过DATA变量在“配置项”的代码输入框中使用。
注意：在数据面板中访问数据时，请确认所选ECharts图表所需的数据格式。
相互作用：
可以在“配置项”的代码中调用相关函数来发送退回邮件。 上面的relative()函数就是RelativeFunction的类型，RelativeFunction的类型声明如下：
这是代码------------
relative()本身是基于EasyV组件的props.onRelative()函数进行封装的，可以直接基于该函数开发反弹（参见EasyV组件反弹开发文档）。
这是一个例子：
这是代码--------
在示例中，写入了“点击折线”的反弹类型。 通过ECharts提供的监听方法，在回调函数中调用relative()，并确定类型将要发送的数据写入out对象中。
视频号｜@EasyV 数字孪生可视化
知乎头条小红书｜@EasyV 数字孪生可视化
搜索“易知微官网”申请EasyV免费试用
背景
这几天在做一个电力系统软件，需要概述BarSimple。 解决了这个问题后，我写了第一篇关于C#封装Echarts的文章：
该图详细介绍了C#封装Echarts为自定义控件的过程，封装了Echarts的xAxis、yAxis、系列和选项结构体。
简单酒吧
以后这个软件系统需要绘制“堆积条形图”。 解决这个问题后，我写了第二篇关于C#封装Echarts的文章：
该图扩展了上面的代码，减少了tooltip、legend、grid等结构的封装。
堆积条形图
明天总结的是如何通过离散点拟合出平滑的函数曲线。
平滑折线图
技术分析
首先我们对比一下百度提供的“BarSimple”和“SmoothedLineChart”示例代码
BarSimple 的代码
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
SmoothedLineChart 的代码
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}]
};
通过对比两段代码，你会发现主要的区别在于series属性上。
直方图类型：'bar'，折线图类型：'line'，如果想让其平滑echarts重新加载数据echarts重新加载数据，需要设置 smooth:true。
由于我们已经封装了Echarts的xAxis、yAxis和series属性，所以只需要扩展SeriesItem结构即可满足需求。
代码
扩展SeriesItem结构：
public class SeriesItem
{
///
/// 每个系列通过 type 决定自己的图表类型。
///
public string type { get; set; } = "line";
///
/// 是否平滑曲线显示。
///
public bool smooth { get; set; } = false;
///
/// 系列中的数据内容数组
///
public List data { get; set; }
}
总结
展开后，我们针对上述案例的客户端代码如下：
加载 x 轴数据
private List
加载要显示的数据
private List GetSeriesData()
{
List result = new List();
SeriesItem item = new SeriesItem
{
type = "line",
data = new List
{
820, 932, 901, 934, 1290, 1330, 1320
},
smooth = true,
};
result.Add(item);
return result;
}
配置Echarts的option属性绘制平滑曲线
private void Form1_Load(object sender, EventArgs e)
{
Option option = new Option
{
xAxis = new XAxis
{
type = "category",
data = GetXAxisData()
},
yAxis = new YAxis
{
type = "value",
},
series = GetSeriesData()
};
echarts1.InitialECharts(option);
}
运行结果如下：
运算结果
我们来看看展开代码后的具体应用。
平滑曲线
好吧，我们明天就到这里吧！ 希望我们一起学到的东西对您有用！ 再见！
目前，LSGO软件技术团队正在招募新人。 对我们感兴趣的朋友可以参考这张图：如何加入LSGO软件技术团队？ ，您可以通过解码HuffmanCode获得我的微信ID，欢迎联系我并成为团队成员。
相关图片及文字：
