ECharts折线图
功能概述
折线图主要用来展示数据项随着时间推移的趋势或变化。
ECharts 折线图插件与内置的折线图组件不同，它可以通过开放的自定义属性定制出更丰富的视觉效果，下图是部分示例：
示例文件包：可下载后直接导入系统参考查看。
添加ECharts折线图
单击可视化插件按钮展开插件列表，然后在 ECharts 插件中将折线插件拖拽至编辑区，即可添加一个 ECharts 折线图插件。
数据绑定
添加图表后，数据绑定面板会自动打开，在数据绑定面板中选择数据集或数据模型。
示例中我们使用的是一个数据集。
将数据集或模型中的字段拖拽到组件的各个绑定区域完成数据绑定，在左侧编辑区可见组件已经按照绑定的字段进行了绘制。
数据绑定区域 | 说明 |
|---|---|
数值 | 绑定数值类字段，可绑定一个或多个字段。 如果已经在系列区域绑定了字段，则数值区域将无法绑定多个字段。 |
分类 | 绑定组件的分析维度，可绑定一个字段。 |
系列 | 绑定组件分析的系列，扩展分类纬度，可绑定一个字段。 如果数值中已绑定多个字段，则不可绑定系列。 |
提示标签 | 提示标签是指当鼠标移至图形时，会出现相应的提示信息。使用方法详见鼠标提示标签。 |
钻取 | 设置组件数据钻取路径，详见数据钻取。 |
数据处理
ECahrts 插件与内置图表类似都可一进行数据处理，如对数据进行聚合运算，修改数据的显示格式和单位等等，使其更符合使用场景的需要。
数据处理详细操作介绍请参考数据处理。
数据探索与分析
ECahrts 插件同样支持丰富的数据探索分析能力，可为您的数据可视化分析过程提供强有力的支撑。
比如为组件添加过滤器、排名筛选、切换类型、添加参考线等等。
有关具体操作的介绍，请参考数据探索与分析中对应的介绍。
基本属性外观设置
在编辑区右侧选择属性设置或者双击该图表，打开属性设置面板可进行图表外观属性的设置。
绝大部分的属性设置项目与内置图表一致，请参考单个组件外观与属性设置。本文中主要举例介绍不同的属性设置项。
切换图表类型
可以切换至面积图和堆叠面积图。
显示最大最小标注
打开显示标注开关后，可进一步设置是否显示最大/最小标注，标注颜色（默认跟随折线显示）以及标注字体。
显示缩放轴
显示缩放轴： 开启后将在图表中显示缩放轴。
缩放轴尺寸： 设置缩放轴的宽度。
缩放轴默认长度： 设置预览图表时缩放轴默认显示的长度，也就决定了默认显示的数据数量。
缩放轴颜色： 设置缩放轴的颜色。
启用滚动缩放： 是否开启鼠标滚轮控制缩放轴功能。开启后，预览图表时无需拖动缩放轴，使用鼠标滚动即可进行缩放。
提示标签坐标轴指示器
用于开启鼠标提示时对应的坐标数据和指示线，开启后可进一步设置指示器类型、直线类型/颜色/宽度。
自定义属性
ECahrts 插件与普通内置图表最大的不同点是可以自定义属性，使用 JS 代码进行深度定制。
自定义属性窗口编写区可直接编写JS代码，具体配置项与 ECharts 一致，请您参考 ECharts 官网 https://echarts.apache.org/zh/option.html#title。
窗口右上角的查看配置项按钮可查看产品图表中默认的配置项，当与定制内容重复时，以定制内容优先。
示例
例如使用JS 代码自定义属性修改了折线图的显示样式，使其分段显示不同的颜色。预览效果如下：
具体代码如下，供您参考。
option.series[0].smooth = true
option.visualMap = {
top: 50,
right: 10,
pieces: [
{
gt: 50000,
lte: 100000,
color: '#93CE07'
},
{
gt: 100000,
lte: 150000,
color: '#FBDB0F'
},
{
gt: 150000,
lte: 200000,
color: '#FC7D02'
},
{
gt: 200000,
lte: 250000,
color: '#FD0100'
}
],
outOfRange: {
color: '#999'
}
}
option.series[0].markLine = {
silent: true,
lineStyle: {
color: '#333'
},
data: [
{
yAxis: 50000
},
{
yAxis: 100000
},
{
yAxis: 150000
},
{
yAxis: 200000
},
{
yAxis: 250000
}
]
}
option.legend.show = false
return option