echart实例对象的方法

一、setOption

可以调用多次,多次之间不是覆盖关系,而是相互整合的;所以在第一次之后的setOption,只需要考虑变化的部分

二、resize

图表自适应使用,一般结合window对象的resize事件使用

//window.onresize = function(){
//    mchart.resize()
//}
window.onresize = mchart.resize

三、on/off

绑定或者解绑事件(鼠标事件、echarts事件)处理函数

//鼠标事件
mchart.on('click',function(arg){...})
//echarts事件(legendselectedchanged,datazoom)
mchart.on('datazoom',function(arg){...})
//解绑click事件
mchart.off('click')

四、dispatchAction

通过js代码模拟用户的行为,如(高亮图形,显示tooltip等)

mchart.dispatchAction({
    type:'showTip',
    seriesIndex:0,
    dataIndex:2
})

五、clear

清空实例后,可以再次setOption,能再次出现图形

六、dispose

销毁实例,不能再次setOption

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面我给您提供一个简单的 Servlet 和 ECharts 词云实例,供您参考: 1. 首先,在 Java Web 项目引入 ECharts 的相关 JavaScript 和 CSS 文件,可以在 JSP 页面引入,例如: ```html <head> <meta charset="UTF-8"> <title>Servlet ECharts Word Cloud</title> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js"></script> </head> <body> <div id="wordcloud" style="width: 100%; height: 500px;"></div> <script src="wordcloud.js"></script> </body> ``` 这里使用了 ECharts 的 CDN 引入了 echarts.min.js 文件,同时在页面定义了一个 div 容器,用于显示词云图表。另外,还引入了一个名为 wordcloud.js 的 JavaScript 文件,用于生成词云图表。 2. 接着,在 Servlet 处理数据,可以使用以下代码从数据库获取数据,并将其存储到 request 对象: ```java protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // 从数据库获取数据,这里仅作示例,实际情况可能需要根据具体需求进行调整 List<String> words = new ArrayList<>(); words.add("Java"); words.add("Python"); words.add("JavaScript"); words.add("HTML"); words.add("CSS"); words.add("Servlet"); words.add("JSP"); words.add("ECharts"); // 将数据存储到 request 对象 request.setAttribute("words", words); // 转发到 JSP 页面 request.getRequestDispatcher("wordcloud.jsp").forward(request, response); } ``` 这里使用了 doGet() 方法获取数据,并将数据存储到名为 "words" 的属性,然后将请求转发到 wordcloud.jsp 页面。 3. 最后,在 wordcloud.js 文件使用 ECharts 生成词云,可以使用以下代码: ```javascript var chart = echarts.init(document.getElementById('wordcloud')); // 从 request 对象获取数据 var words = '${requestScope.words}'; // 构造词云数据 var data = []; for (var i = 0; i < words.length; i++) { data.push({ name: words[i], value: Math.random() * 100 }); } // 定义词云配置项 var option = { series: [{ type: 'wordCloud', shape: 'circle', gridSize: 20, sizeRange: [12, 50], rotationRange: [-90, 90], textStyle: { normal: { color: function() { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } } }, data: data }] }; // 使用配置项生成词云图表 chart.setOption(option); ``` 这里使用了 echarts.init() 方法初始化了 ECharts 实例,并从 request 对象获取了数据。然后根据数据构造了词云数据,并定义了词云的配置项。最后,使用 setOption() 方法生成了词云图表。 希望以上实例能够对您有所帮助。如果您有其他问题或需要进一步的帮助,可以随时向我提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值