Summary
The AIroot UISYS tool has strong module encapsulation capabilities and can easily integrate the capabilities of third-party plug-ins. You can upgrade existing plug-ins,
such as ECharts , according to the developer's ideas .
ECharts is a frequently used plug-in for data visualization in China. It is based on canvas rendering and is more streamlined than previous graphic controls.
Today we use AIroot UISYS to encapsulate ECharts as a label, and then directly introduce it into our HTML code.
1. Preparation
- We create a new directory, named MyTest , and then download the js package of Echarts and save it to the js folder of the current directory.
- New charts folder, which put ECharts.ui (if you want to introduce other Charts, for example HighChart so can be added)
- In the MyTest directory, create a new Index.ui as the home page.
The overall directory structure is as follows:
- Open the UISYS tool and publish the MyTest directory, as follows (My MyTest directory is placed under the E:/juswork/test/ directory, you can use your computer at will):
2. Implementation code
- The following is the implementation code of ECharts.ui :
<!-- charts/ECharts.ui -->
<div width="400" height="300">
<!-- 这里会替换为Echarts的内容 -->
</div>
<script>
import js/echarts.min.js;
private var myChart = null;
//默认获取宽度
private var _width from "width";
//默认获取高度
private var _height from "height";
function init(){
width = _width;
height = _height;
// 基于准备好的dom，初始化echarts实例
myChart = echarts.init(dom);
}
//设置ECharts的option属性，这是Echarts生成图的关键属性
public set option(value){
myChart.setOption(value);
}
//设置宽度
public set width(value){
dom.style.width = value + "px";
if(myChart){
myChart.resize();
}
}
//设置高度
public set height(value){
dom.style.height = value + "px";
if(myChart){
myChart.resize();
}
}
</script>
Friends who have experience in native development of ECharts, the above code actually realizes the initialization operation of ECharts.
The option method is the setter property of the ECharts.ui module. If you want to see the API description of this module, you can do as follows.
- You can visit http://127.0.0.1/index.doc
- Then check charts.Echarts,
which is the default analysis module capability of the UISYS tool, which can quickly generate module API documentation.
- Let's make a home page and name it Index.ui to test whether this Echarts.ui module is easy to use
<@pub/>
<div>
<charts.ECharts id="chart0" width="600" height="400" />
<charts.ECharts id="chart1" width="600" height="400" />
</div>
<script>
function init(){
chart0.option = {
title: {
text: 'Chart 0 Example'
},
tooltip: {
},
legend: {
data:['销量']
},
xAxis: {
data: ["A","B","C","D","E","F"]
},
yAxis: {
},
series: [{
name: 'Number',
type: 'line',
data: [5, 20, 36, 10, 10, 20]
}]
};
chart1.option = {
title: {
text: 'Chart 1 Example'
},
tooltip: {
},
legend: {
data:['销量']
},
xAxis: {
data: ["A","B","C","D","E","F"]
},
yAxis: {
},
series: [{
name: 'Number',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
}
</script>
- Finally, open the following website, if you see the following picture, it means that it is successful.
Easy to achieve.
This set of examples is very simple. If you consider the characteristics of the compatible framework, there is actually a lot to do.
Do you write plug-ins? I think UISYS is the closest to the original code and the amount of code is small. It is very good to use the native plug-in directly without thinking about it.