通用Echarts
更新时间：2023-04-18
概述
支持不同类型Echarts图表的展示。
特有静态属性
通用Echarts可视元件有一个特有配置项，即Echarts需要接收的option配置项，它是一个js的对象。通过调整配置项属性，即可在物可视中展示各种丰富多彩的Echarts图表。
注意：配置项面板中仅支持输入合法的静态js对象作为option值，不支持输入其他变量、函数或API的调用。
在代码编辑器中可以对配置项进行修改，修改无误后点击上方运行按钮，即可将配置应用于图表中。
示例1，我们将配置项改为时间序列面积图：
{
tooltip: {
trigger: 'axis',
},
title: {
left: 'center',
text: 'Large Area Chart',
},
xAxis: {
type: 'time',
boundaryGap: false,
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
},
series: [
{
name: 'Fake Data',
type: 'line',
smooth: true,
symbol: 'none',
areaStyle: {},
data: [
[1681281247079, 36],
[1681281248079, 97],
[1681281249079, 84],
[1681281250079, 71],
[1681281251079, 7],
[1681281252079, 46],
[1681281253079, 67],
[1681281254079, 0],
[1681281255079, 2],
[1681281256079, 55],
[1681281257079, 68],
[1681281258079, 97],
[1681281259079, 98],
[1681281260079, 85],
[1681281261079, 12],
],
},
],
}运行后，图表如下所示：
示例2：极坐标系下的堆叠柱状图
配置项调整如下：
{
color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
angleAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
radiusAxis: {},
polar: {},
series: [
{
type: 'bar',
data: [1, 2, 3, 4, 3, 5, 1],
coordinateSystem: 'polar',
name: 'A',
stack: 'a',
emphasis: {
focus: 'series',
},
},
{
type: 'bar',
data: [2, 4, 6, 1, 3, 2, 1],
coordinateSystem: 'polar',
name: 'B',
stack: 'a',
emphasis: {
focus: 'series',
},
},
{
type: 'bar',
data: [1, 2, 3, 4, 1, 2, 5],
coordinateSystem: 'polar',
name: 'C',
stack: 'a',
emphasis: {
focus: 'series',
},
},
],
legend: {
show: true,
data: ['A', 'B', 'C'],
},
}展示效果如下：
示例3：3D柱状图
配置项如下：
{
tooltip: {},
visualMap: {
max: 20,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026',
],
},
},
xAxis3D: {
type: 'category',
data: [
'12a',
'1a',
'2a',
'3a',
'4a',
'5a',
'6a',
'7a',
'8a',
'9a',
'10a',
'11a',
'12p',
'1p',
'2p',
'3p',
'4p',
'5p',
'6p',
'7p',
'8p',
'9p',
'10p',
'11p',
],
},
yAxis3D: {
type: 'category',
data: ['Saturday', 'Friday', 'Thursday', 'Wednesday', 'Tuesday', 'Monday', 'Sunday'],
},
zAxis3D: {
type: 'value',
},
grid3D: {
boxWidth: 200,
boxDepth: 80,
viewControl: {},
light: {
main: {
intensity: 1.2,
shadow: true,
},
ambient: {
intensity: 0.3,
},
},
},
series: [
{
type: 'bar3D',
data: [
{
value: [0, 0, 5],
},
{
value: [15, 0, 3],
},
{
value: [20, 0, 3],
},
{
value: [10, 1, 5],
},
{
value: [13, 1, 6],
},
{
value: [17, 1, 7],
},
{
value: [19, 1, 12],
},
{
value: [20, 1, 5],
},
{
value: [23, 1, 2],
},
{
value: [12, 2, 1],
},
{
value: [17, 2, 5],
},
{
value: [22, 2, 2],
},
{
value: [0, 3, 7],
},
{
value: [14, 3, 13],
},
{
value: [15, 3, 12],
},
{
value: [8, 3, 1],
},
{
value: [12, 3, 7],
},
{
value: [13, 3, 14],
},
{
value: [16, 3, 9],
},
{
value: [19, 3, 10],
},
{
value: [23, 3, 1],
},
{
value: [10, 4, 4],
},
{
value: [11, 4, 4],
},
{
value: [12, 4, 2],
},
{
value: [13, 4, 4],
},
{
value: [15, 4, 14],
},
{
value: [18, 4, 8],
},
{
value: [19, 4, 5],
},
{
value: [0, 5, 2],
},
{
value: [1, 5, 1],
},
{
value: [8, 5, 2],
},
{
value: [13, 5, 10],
},
{
value: [14, 5, 5],
},
{
value: [16, 5, 11],
},
{
value: [17, 5, 6],
},
{
value: [21, 5, 4],
},
{
value: [22, 5, 2],
},
{
value: [10, 6, 1],
},
{
value: [12, 6, 2],
},
{
value: [13, 6, 1],
},
{
value: [14, 6, 3],
},
{
value: [20, 6, 1],
},
{
value: [21, 6, 2],
},
{
value: [22, 6, 2],
},
{
value: [23, 6, 6],
},
],
shading: 'lambert',
label: {
fontSize: 16,
borderWidth: 1,
},
emphasis: {
label: {
fontSize: 20,
color: '#900',
},
itemStyle: {
color: '#900',
},
},
},
],
}展示效果如下：
数据绑定
数据绑定，是连接『可视化仪表盘』与『数据表』的窗口。数据配置Tab中可供选择的数据表，是已在数据表Tab中创建好的二维数据表。数据表的创建过程可参考仪表盘数据表处理 及 典型实践文档。
数据表绑定
配置项可以通过数据表绑定将动态数据注入到option中返回，从而实现图表数据的动态展示。
在数据表绑定中，左侧选择创建好的二维数据表，右侧对属性值进行处理。鼠标移动到❓上，提示框对transform函数的参数值进行了详细展示。
示例
接下来我们以折线图为例，描述数据绑定的过程。
步骤1：创建一个动态的仿真数据
步骤2：数据绑定
在数据表绑定中选择刚才创建的echarts数据表，在右侧代码编辑器中修改transform函数：
function transform(data, header) {
function getCol(idx) {
return data.map(function (item) {
return item[idx];
});
}
var option = {
"xAxis": {
"type": "category",
"data": getCol(1)
},
"yAxis": {
"type": "value"
},
"series": [{
"data": getCol(0),
"type": "line"
}]
};
return option;
}确定后即绑定数据成功。
步骤3：运行预览
点击运行仪表盘，预览动态效果：
