2. 程式人生 > >基於Echarts的資料動態展示的效果實現

基於Echarts的資料動態展示的效果實現

阿新 • • 發佈：2019-02-04 
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/4/9 0009
  Time: 下午 4:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>資料動態變換的echarts圖</title>

 
</head>
<body>
    <div id="main" style="height:400px"></div>
<!-- ECharts單檔案引入 -->
<script src="/assets/js/modules/log/echarts-2.2.7/build/dist/echarts.js" type="text/javascript"></script>
    <script>
var dataMap = {};
function dataFormatter(obj) {
            var 
 
pList = ['北京','天津','河北','山西','內蒙古','遼寧','吉林','黑龍江','上海','江蘇','浙江','安徽','福建','江西','山東','河南','湖北','湖南','廣東','廣西','海南','重慶','四川','貴州','雲南','西藏','陝西','甘肅','青海','寧夏','新疆'];
var temp;
for (var year = 2002; year <= 2011; year++) {
                var max = 0;
var sum = 0;
temp = obj[year];
for (var i = 0, l = temp.length
 
; i < l; i++) {
                    max = Math.max(max, temp[i]);
sum += temp[i];
obj[year][i] = {
                        name : pList[i],
value : temp[i]
                    }
                }
                obj[year + 'max'] = Math.floor(max / 100) * 100;
obj[year + 'sum'] = sum;
obj[year + 'average'] = sum/temp.length;
}
            return obj;
}

        dataMap.dataGDP = dataFormatter({
            //max : 60000,
2011:[16251.93,11307.28,24515.76,11237.55,14359.88,22226.7,10568.83,12582,19195.69,49110.27,32318.85,15300.65,17560.18,11702.82,45361.85,26931.03,19632.26,19669.56,53210.28,11720.87,2522.66,10011.37,21026.68,5701.84,8893.12,605.83,12512.3,5020.37,1670.44,2102.21,6610.05],
2010:[14113.58,9224.46,20394.26,9200.86,11672,18457.27,8667.58,10368.6,17165.98,41425.48,27722.31,12359.33,14737.12,9451.26,39169.92,23092.36,15967.61,16037.96,46013.06,9569.85,2064.5,7925.58,17185.48,4602.16,7224.18,507.46,10123.48,4120.75,1350.43,1689.65,5437.47],
2009:[12153.03,7521.85,17235.48,7358.31,9740.25,15212.49,7278.75,8587,15046.45,34457.3,22990.35,10062.82,12236.53,7655.18,33896.65,19480.46,12961.1,13059.69,39482.56,7759.16,1654.21,6530.01,14151.28,3912.68,6169.75,441.36,8169.8,3387.56,1081.27,1353.31,4277.05],
2008:[11115,6719.01,16011.97,7315.4,8496.2,13668.58,6426.1,8314.37,14069.87,30981.98,21462.69,8851.66,10823.01,6971.05,30933.28,18018.53,11328.92,11555,36796.71,7021,1503.06,5793.66,12601.23,3561.56,5692.12,394.85,7314.58,3166.82,1018.62,1203.92,4183.21],
2007:[9846.81,5252.76,13607.32,6024.45,6423.18,11164.3,5284.69,7104,12494.01,26018.48,18753.73,7360.92,9248.53,5800.25,25776.91,15012.46,9333.4,9439.6,31777.01,5823.41,1254.17,4676.13,10562.39,2884.11,4772.52,341.43,5757.29,2703.98,797.35,919.11,3523.16],
2006:[8117.78,4462.74,11467.6,4878.61,4944.25,9304.52,4275.12,6211.8,10572.24,21742.05,15718.47,6112.5,7583.85,4820.53,21900.19,12362.79,7617.47,7688.67,26587.76,4746.16,1065.67,3907.23,8690.24,2338.98,3988.14,290.76,4743.61,2277.35,648.5,725.9,3045.26],
2005:[6969.52,3905.64,10012.11,4230.53,3905.03,8047.26,3620.27,5513.7,9247.66,18598.69,13417.68,5350.17,6554.69,4056.76,18366.87,10587.42,6590.19,6596.1,22557.37,3984.1,918.75,3467.72,7385.1,2005.42,3462.73,248.8,3933.72,1933.98,543.32,612.61,2604.19],
2004:[6033.21,3110.97,8477.63,3571.37,3041.07,6672,3122.01,4750.6,8072.83,15003.6,11648.7,4759.3,5763.35,3456.7,15021.84,8553.79,5633.24,5641.94,18864.62,3433.5,819.66,3034.58,6379.63,1677.8,3081.91,220.34,3175.58,1688.49,466.1,537.11,2209.09],
2003:[5007.21,2578.03,6921.29,2855.23,2388.38,6002.54,2662.08,4057.4,6694.23,12442.87,9705.02,3923.11,4983.67,2807.41,12078.15,6867.7,4757.45,4659.99,15844.64,2821.11,713.96,2555.72,5333.09,1426.34,2556.02,185.09,2587.72,1399.83,390.2,445.36,1886.35],
2002:[4315,2150.76,6018.28,2324.8,1940.94,5458.22,2348.54,3637.2,5741.03,10606.85,8003.67,3519.72,4467.55,2450.48,10275.5,6035.48,4212.82,4151.54,13502.42,2523.73,642.73,2232.86,4725.01,1243.43,2312.82,162.04,2253.39,1232.03,340.65,377.16,1612.6]
        });
dataMap.dataPI = dataFormatter({
            //max : 4000,
2011:[136.27,159.72,2905.73,641.42,1306.3,1915.57,1277.44,1701.5,124.94,3064.78,1583.04,2015.31,1612.24,1391.07,3973.85,3512.24,2569.3,2768.03,2665.2,2047.23,659.23,844.52,2983.51,726.22,1411.01,74.47,1220.9,678.75,155.08,184.14,1139.03],
2010:[124.36,145.58,2562.81,554.48,1095.28,1631.08,1050.15,1302.9,114.15,2540.1,1360.56,1729.02,1363.67,1206.98,3588.28,3258.09,2147,2325.5,2286.98,1675.06,539.83,685.38,2482.89,625.03,1108.38,68.72,988.45,599.28,134.92,159.29,1078.63],
2009:[118.29,128.85,2207.34,477.59,929.6,1414.9,980.57,1154.33,113.82,2261.86,1163.08,1495.45,1182.74,1098.66,3226.64,2769.05,1795.9,1969.69,2010.27,1458.49,462.19,606.8,2240.61,550.27,1067.6,63.88,789.64,497.05,107.4,127.25,759.74],
2008:[112.83,122.58,2034.59,313.58,907.95,1302.02,916.72,1088.94,111.8,2100.11,1095.96,1418.09,1158.17,1060.38,3002.65,2658.78,1780,1892.4,1973.05,1453.75,436.04,575.4,2216.15,539.19,1020.56,60.62,753.72,462.27,105.57,118.94,691.07],
2007:[101.26,110.19,1804.72,311.97,762.1,1133.42,783.8,915.38,101.84,1816.31,986.02,1200.18,1002.11,905.77,2509.14,2217.66,1378,1626.48,1695.57,1241.35,361.07,482.39,2032,446.38,837.35,54.89,592.63,387.55,83.41,97.89,628.72],
2006:[88.8,103.35,1461.81,276.77,634.94,939.43,672.76,750.14,93.81,1545.05,925.1,1011.03,865.98,786.14,2138.9,1916.74,1140.41,1272.2,1532.17,1032.47,323.48,386.38,1595.48,382.06,724.4,50.9,484.81,334,67.55,79.54,527.8],
2005:[88.68,112.38,1400,262.42,589.56,882.41,625.61,684.6,90.26,1461.51,892.83,966.5,827.36,727.37,1963.51,1892.01,1082.13,1100.65,1428.27,912.5,300.75,463.4,1481.14,368.94,661.69,48.04,435.77,308.06,65.34,72.07,509.99],
2004:[87.36,105.28,1370.43,276.3,522.8,798.43,568.69,605.79,83.45,1367.58,814.1,950.5,786.84,664.5,1778.45,1649.29,1020.09,1022.45,1248.59,817.88,278.76,428.05,1379.93,334.5,607.75,44.3,387.88,286.78,60.7,65.33,461.26],
2003:[84.11,89.91,1064.05,215.19,420.1,615.8,488.23,504.8,81.02,1162.45,717.85,749.4,692.94,560,1480.67,1198.7,798.35,886.47,1072.91,658.78,244.29,339.06,1128.61,298.69,494.6,40.7,302.66,237.91,48.47,55.63,412.9],
2002:[82.44,84.21,956.84,197.8,374.69,590.2,446.17,474.2,79.68,1110.44,685.2,783.66,664.78,535.98,1390,1288.36,707,847.25,1015.08,601.99,222.89,317.87,1047.95,281.1,463.44,39.75,282.21,215.51,47.31,52.95,305]
        });
dataMap.dataSI = dataFormatter({
            //max : 26600,
2011:[3752.48,5928.32,13126.86,6635.26,8037.69,12152.15,5611.48,5962.41,7927.89,25203.28,16555.58,8309.38,9069.2,6390.55,24017.11,15427.08,9815.94,9361.99,26447.38,5675.32,714.5,5543.04,11029.13,2194.33,3780.32,208.79,6935.59,2377.83,975.18,1056.15,3225.9],
2010:[3388.38,4840.23,10707.68,5234,6367.69,9976.82,4506.31,5025.15,7218.32,21753.93,14297.93,6436.62,7522.83,5122.88,21238.49,13226.38,7767.24,7343.19,23014.53,4511.68,571,4359.12,8672.18,1800.06,3223.49,163.92,5446.1,1984.97,744.63,827.91,2592.15],
2009:[2855.55,3987.84,8959.83,3993.8,5114,7906.34,3541.92,4060.72,6001.78,18566.37,11908.49,4905.22,6005.3,3919.45,18901.83,11010.5,6038.08,5687.19,19419.7,3381.54,443.43,3448.77,6711.87,1476.62,2582.53,136.63,4236.42,1527.24,575.33,662.32,1929.59],

            
  

           

              
              

            

            
相關推薦

			   
            
            
            
 

    


    
    
基於Echarts的資料動態展示的效果實現

     
 
                <%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/4/9 0009
  Time: 下午 4:09
  To change this template use File | Setti 



  
 

    


    
    
卡片列表項緩緩往下展示 效果實現

     
 不久前在某運動APP上看到一個卡片緩緩往下展示的效果，感覺這動畫還可以 
似乎專案中也有類似的卡片列表，列表的展示是直接顯示出來的，加上動效之後應該更有活力，便照著樣子實現了一下 
  
 
  
這種效果，核心點就是添加了個CSS動畫，主要控制了四個屬性 
先看HTML結構部分 
 
  



  
 

    


    
    
echarts 地圖 動態 展示 結合css+js

     
 
                
echarts地圖展示功能很強大，官網上靜態展示的例子很多了，動態的資料少，研究了下，我目前實現的通過ajax從伺服器獲取資料動態展示地圖。另外，我們有時候希望在地圖之上做些自定義的東西，比如：通知框，或者其他的東西，我們可以通過css圖層的方式在地圖之上實現。我實現的效果 



  
 

    


    
    
基於echarts實現實時資料傳輸效果

     
  
 
 效果圖： 
  
 程式碼片段： 
 const targetCoord = [1000, 140]
const curveness = 0.2
const linesData = []
const categories = [{
    name: '流入中',
    itemStyle: {
 



  
 

    


    
    
解決使用echarts做動態資料餅圖展示中data如何傳值的問題

     
  
  
  
 ** 
 解決使用echarts做動態資料餅圖展示中data如何傳值的問題 
 ** 
  如圖，將所查出的資料以餅圖形式展示 下面是頁面data的傳值方法  這是data，請忽略data裡的那些值。那是用來測試用的，  首先將從資料庫查出的資料裝到兩個list裡面，再通過json傳到前臺。 



  
 

    


    
    
Echarts + Web實現大屏展示效果（一）

     
 
                一、效果展示



二、資源下載

1、圖片資源下載        點選這裡

2、js+css 檔案資源下載  點選這裡

三、Demo實現

1、文件結構如下圖所示：



2、Demo.html 程式碼

<!DOCTYPE html>
<html l 



  
 

    


    
    
JS實現動態圖片展示效果

     
 
                http://www.111cn.cn/boke/blog/show.php?uid=kp12345&id=28&fid=13691效果挺不錯的，呵<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "ht 



  
 

    


    
    
【mpvue】實現echarts圖表動態載入資料

     
 
                功能描述

使用mpvue框架開發微信小程式。目的效果為小程式中顯示一個折線圖，當點選切換按鈕時，切換圖表。

實現步驟

1.查詢mpvue官方文件關於echarts的實現方式------靜態載入圖表，只加載一次



2.實現動態載入圖表（能夠根據需求多次繪製圖表）

思 



  
 

    


    
    
ECharts餅圖從後臺動態獲取資料並展示

     
 
                
$.post( url, {'id' : gridStationSeq  },function(result) {if (result != null) {var label=[];var data = JSON.parse(result);var arr=[];alert 



  
 

    


    
    
基於Flex 4.6實現 Picture Slide （圖片滑動展示效果）

     
 
                
之前專案中有用到這種效果，圖片幻燈顯示，一般來說JS實現的較多，Flex的話，貌似之前有找到過Flex3的實現方案，so 我就借鑑一下咯
當然根據實際應用情況，將程式碼升級到Flex4，然後又根據自己的應用需要增加了些控制效果。
閒話不多說，先上程式碼
PictureSli 



  
 

    


    
    
iOS_利用IBInspectable與IB_DESIGNABLE實現自定義類在Storyboad並動態展示設定效果

     
 
                
今天無意get到一個新的開發技能（蘋果自帶的SDK有提供），可以讓自定義的View在Storyboad或者Xib看到自己在自定義View.h新增的自定義屬性，並且對屬性進行引數賦值後動態重新整理檢視效果。
先囉嗦一下，自己在get這個技能之前經常需要將自定義View在Xib 



  
 

    


    
    
（3）基於Echarts外掛的多維資料視覺化設計和實現

     
 
							
							
							說完了內部擴充套件和新增介面，接著就是外部的介面了。 
外部的介面主要對原始資料進行一系列的計算、變換、包裝，然後放入option各個引數中。 
createChart介面：



/**
   * 通過Echarts的setOption介面建立echarts多 



  
 

    


    
    
vue 中使用vue-echarts-v3編寫chart柱狀圖，動態展示資料

     
 
                
效果如下
需求：
1、縱座標為數字，並且動態變化
2、柱狀圖頂部展示內容
3、滑鼠移動到柱狀圖展示內容
4、圖表要根據查詢結果動態展示
開始：
<!-- 郵件推送圖示分析 -->
<template>  
    <div>    
   



  
 

    


    
    
通過百度echarts實現資料圖表展示功能

     
 
                

現在我們在工作中，在開發中都會或多或少的用到圖表統計資料顯示給使用者。通過圖表可以很直觀的，直接的將資料呈現出來。這裡我就介紹說一下利用百度開源的echarts圖表技術實現的具體功能。

1、對於不太理解echarts是個怎樣技術的開發者來說，可以到echarts 



  
 

    


    
    
AngularJs使用ng-repeat實現資料迴圈展示的效果

     
 
								
								            
						
                一般情況下，後端給前端傳輸資料，前端都是用foreach來迴圈輸出，現在使用AngularJs也能實現類似的功能，方法如下：01<!doctype html>02<html lang= 



  
 

    


    
    
基於JS正則實現模板資料動態渲染

     
 最近業務上需要動態渲染模板資料，好久沒寫前端程式碼了，有點生疏，將思路簡單寫下來，防老：
一、業務需求：


前端後端定義好模板以及變數名，儲存資料庫


訂單資料是前端根據支付結果獲取的，最終渲染完的資料模板需要呼叫印表機打印出來


模板相對商家來說比較固定，但是每個商家需要的模板都有可能不一樣，所以需要 



  
 

    


    
    
vue+echarts+datav大屏資料展示及實現中國地圖省市縣下鑽

     
 隨著前端技術的飛速發展，大資料時代的來臨，我們在開發專案時越來越多的客戶會要求我們做一個數據展示的大屏，可以直觀的展示使用者想要的資料，同時炫酷的介面也會深受客戶的喜歡。
大屏展示其實就是一堆的圖表能夠讓人一目瞭然地看到該系統下的一些基本資料資訊的彙總，也會有一些實時資料重新整理，資訊預警之類的。筆者在之前也 



  
 

    


    
    
Shine.js實現動態陰影效果

     
 b2c   ava   .net   fun   text   動態   cti   element   gravity   

Shine.js 是一個用於實現美麗陰影的 JS 庫。
特性
  1、可動態旋轉光的位置，投影出不同的陰影效果　　
  2、可定制的陰影，　　
  3、沒有庫依賴關系,AMD兼容使 



  
 

    


    
    
jq實現動態粒子效果

     
 tex   ret   padding   粒子   proto   scrip   rip   []   3D   在線上看到別人做的動態粒子，哇，太炫了，我也來試一試。
<!DOCTYPE html><html>	<head>		<meta charset="UT 



  
 

    


    
    
PHP開發中基於layUI的三級聯動效果如何實現

     
 ice   type   idt   tex   oct   port   inf   eal   如何實現   　　後臺開發常常用到layUI框架，這樣才能讓整個頁面效果看起來美觀大方，然而有時候一些原生的效果放到layUI框架上是無法使用的，比如最近遇到了省市縣三級聯動的select效果。不同於之前的，l