我的位置：首页 › 数据可视化平台- 酷屏 › 酷屏-心得体验 › 酷屏自定义小组件-echarts柱状图实例分享 ...

酷屏自定义小组件-echarts柱状图实例分享

复制链接 | 收藏本帖

1743

: 前端小姐姐小试身手Lv3

发表于2020-10-28 11:07

楼主

本帖最后由前端小姐姐于 2020-10-28 11:10 编辑

酷屏自定义小组件-echarts柱状图效果如下：

右侧基础属性里的项都是可以改变，还有取数也是可变的。下边就来详细介绍下这个实例：
这个实例里的源代码和css都是默认的，主要是定义了js，去改变基础属性和取数。下边将所有的js都贴出来看看：
/*
* 初始化方法
*
* @params cwidget 组件对象
* @params vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
* @params storagedata 组件自己需要存储的值，字符串格式
* @params events 事件，用户在右边属性上设置的事件, json格式：{'evt1': function(){...}, 'evt2':function(){....}}
* @params resources 资源及权限校验，json格式：{'resids': ['EBI$12$xxx$1$xxx.rpttpl','EBI$12$xxx$1$xxx.coolrpt'], 'pms': [true, false]}
*/
var chart=null, color=null, title=null;
function init(cwidget, vardata, events, storagedata, resources){
var basedom = cwidget.basedom;
debugger;
//1、得到取数的变量
var initdatax =eval(vardata.xdata);
var initdatay =eval(vardata.ydata);
//2.引入外部js
if(!window["echarts4"]){
         EUI.include("vfs/root/products/ebi/sys/coolrpt/coolresource/js/echarts.js");
   }
//3初始化charts对象
chart = echarts4.init(basedom);
//4.实现getValue,初始化属性面板属性值
getValue(cwidget);
//5.写getoption方法用来给chart传对象
var opt=getOption(initdatax,initdatay);
//6.调用chart的setOption
chart.setOption(opt);
//渲染option（官网option示例）
function getOption(initdatax,initdatay){
      option = {
         title: {
            text: cwidget.getProperty("caption")
         },
         tooltip: {},
         legend: {
            data:[title]
         },
         xAxis: {
            data: initdatax
         },
         yAxis: {},
         itemStyle: {
            color: color
         },
         series: [{
            name: title,
            type: 'bar',
            data: initdatay

      };
      return option;
}

if(cwidget.isresultview){
      //只在结果界面的时候执行，例如只想在结果界面绑定click事件
}
}

/**
* 定义了自定义属性时，必须实现该方法，方法名为setProperty
* 当在属性面板上修改属性后，会调用该方法
* @param key  属性名
* @param value  属性值
* @param cwidget  组件对象
* @returns
*/
function setProperty(key, value, cwidget) {
   //7.颜色属性设置，实现setProperty
var opt=chart.getOption();
if (key === 'color') {
//修改属性xxx时，触发的事
      opt.itemStyle.color = value;
}
if (key === 'title') {
      opt.legend[0].data = value;
      opt.series[0].name = value;
}

chart.setOption(opt);
}

/**
* 刷新操作，数据改变时，调用该方法，重新渲染数据
* @param cwidget 组件对象
* @param vardata 取数定义中定义的变量，json格式：{'var1':'xxx'}
* @param storagedata  组件自己需要存储的值，字符串格式
* @returns
*/
function refreshDatas(cwidget, vardata, storagedata){
   //8.联动刷新数据，实现refreshDatas()
var basedom = cwidget.basedom;
var opt=chart.getOption();
var initdatax =eval(vardata.xdata);
var initdatay =eval(vardata.ydata);
opt.xAxis[0].data=initdatax;
opt.series[0].data=initdatay;
chart.setOption(opt);
}

/**
* 组件大小改变时执行
* @param cwidget 组件对象
* @returns
*/
function resize(cwidget){
//9.实现自适应resize
chart.resize();
}

/**
* 获取组件的参数值
* @param cwidget 组件对象
* @returns
*/
function getValue(cwidget){
   color = cwidget.getProperty("color");
   title = cwidget.getProperty("title");
}

/**
* 获取组件的参数名称
* @param cwidget 组件对象
* @returns
*/
function getParamName(cwidget){

}

/*
* 销毁操作,销毁自己相关的东西
*/
function dispose(cwidget){
   //10.实现销毁dispose
chart.dispose();
chart = null;
color = null;
title = null;
}

js里的注释了步骤，可以仔细看看代码~

1、基础属性里改变的是名称caption（对应左上角大标题）、颜色color（对应柱状和顶部中间矩形的颜色）、柱状代表的值title（对应顶部中间矩形代表的值）