當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

echarts2.2.7入门

發(fā)布時間：2024/1/23 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 echarts2.2.7入门小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1 從echarts官網(wǎng)下載源碼

2 解壓源碼后，文件夾如下

3 將echarts-2.2.7\echarts-2.2.7\build\dist 的dist目錄下的js拷貝導(dǎo)入myeclipse工程目錄中

4 jsp代碼

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>My JSP 'lineChart.jsp' starting page</title><script type="text/javascript" src="<%=basePath %>js/echarts/echarts.js"></script></head><body><div id="main" style="width: 600px;height:400px;"></div></body><script type="text/javascript">// 路徑配置require.config({paths: {echarts: '<%=basePath %>js/echarts'}});// 使用require(['echarts','echarts/chart/line' // 使用柱狀圖就加載bar模塊，按需加載],function (ec) {// 基于準(zhǔn)備好的dom，初始化echarts圖表var myChart = ec.init(document.getElementById('main')); var option = {title : {text: '未來一周氣溫變化'},tooltip : {trigger: 'axis'},legend: {data:['最低氣溫']},toolbox: {show : true,feature : {saveAsImage : {show: true}}},calculable : true,xAxis : [{type : 'category',boundaryGap : false,data : ['周一','周二','周三','周四','周五','周六','周日']}],yAxis : [{type : 'value',axisLabel : {formatter: '{value} °C'}}],series : [{name:'最低氣溫',type:'line',data:[1, -2, 2, 5, 3, 2, 0]/* markPoint : {data : [{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}]}markLine : {data : [{type : 'average', name : '平均值'}]}*/ }] };// 為echarts對象加載數(shù)據(jù) myChart.setOption(option); });</script></html>

5 效果圖

總結(jié)

以上是生活随笔為你收集整理的echarts2.2.7入门的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

入门