山海鲸可视化

ECharts组件开发

山海鲸支持对于 echarts 进行快速移植,具体方案如下:

1.添加 Echarts 组件

按住 Ctrl+f 调出搜索框,输入“echarts 二开”即可看到 ECharts 组件,点击即可添加至看板中
image.png

2.查看代码

切换到该组件的代码选项卡中,可以看到已经默认有一个二开的代码文件,点击编辑按钮可以查看文件内容
image.png

3.编写代码

根据您实际的需求修改代码并保存,保存后点击编辑按钮右侧的刷新按钮即可完成刷新,如替换成以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
class EchartsSample {
init() {
//通过调用绑定组件的getMountedInstance获取echartsInstance
const echarts = this.element.getMountedInstance();
//从官方例子中拷贝代码
const option = {
xAxis: {
type: "category",
boundaryGap: false,
},
yAxis: {
type: "value",
boundaryGap: [0, "30%"],
},
visualMap: {
type: "piecewise",
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [
{
gt: 1,
lt: 3,
color: "rgba(0, 0, 180, 0.4)",
},
{
gt: 5,
lt: 7,
color: "rgba(0, 0, 180, 0.4)",
},
],
},
series: [
{
type: "line",
smooth: 0.6,
symbol: "none",
lineStyle: {
color: "#5470C6",
width: 5,
},
markLine: {
symbol: ["none", "none"],
label: { show: false },
data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }],
},
areaStyle: {},
data: [
["2019-10-10", 200],
["2019-10-11", 560],
["2019-10-12", 750],
["2019-10-13", 580],
["2019-10-14", 250],
["2019-10-15", 300],
["2019-10-16", 450],
["2019-10-17", 300],
["2019-10-18", 100],
],
},
],
};
//调用setOption方法设置进去即可完成整个echarts的扩展编写
echarts.setOption(option);
}
}
export default EchartsSample;