Echarts自定義資料檢視樣式（表格樣式）

阿新 • • 發佈：2019-01-16

用過echarts的同胞們都知道，自帶的資料檢視是怎樣的。在真正做專案時，肯定需要我們自己來寫一個相對美觀的資料檢視。下面以表格樣式的資料檢視為例，來實現一個自己的資料檢視。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="js/echarts.js"></script>
    <style>
        table {
            cellspacing:0 ;
            *border-collapse: collapse; /* IE7 and lower */
            border-spacing: 0;
            width: 100%;
        }
        .bordered tr:hover {
            background: #fbf8e9;
            -o-transition: all 0.1s ease-in-out;
            -webkit-transition: all 0.1s ease-in-out;
            -moz-transition: all 0.1s ease-in-out;
            -ms-transition: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
        }

        .bordered th {
            padding: 7px;
            text-align: center;
            cellspacing:0;
        }

        .bordered td{
            padding: 7px;
            text-align: center;
            cellspacing:0;
        }


        .bordered th {

             background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
             background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
             background-image:    -moz-linear-gradient(top, #ebf3fc, #dce9f9);
             background-image:     -ms-linear-gradient(top, #ebf3fc, #dce9f9);
             background-image:      -o-linear-gradient(top, #ebf3fc, #dce9f9);
             background-image:         linear-gradient(top, #ebf3fc, #dce9f9);
        }
        .bordered td:first-child, .bordered th:first-child {
            border-left: none;
        }



        .bordered  tr:nth-of-type(2n){background:#FFFFFF;cursor: pointer;}
        .bordered  tr:nth-of-type(2n+1){background:#F7FAFC;cursor: pointer;}

        .bordered  tbody tr:hover{  background: #fbf8e9;
            -o-transition: all 0.1s ease-in-out;
            -webkit-transition: all 0.1s ease-in-out;
            -moz-transition: all 0.1s ease-in-out;
            -ms-transition: all 0.1s ease-in-out;
            transition: all 0.1s ease-in-out;
        }


    </style>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 1000px;height:600px;"></div>
<script type="text/javascript">
    // 基於準備好的dom，初始化echarts例項
    var myChart = echarts.init(document.getElementById('main'));
    //以下為測試資料，實際開發中肯定要從後臺獲取。
    //x軸月份
    var months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
    //單位陣列
    var dwArr = [23,27,28,30,34,36,39,41,45,46,56,60];
    //職工陣列
    var zgArr = [1500,1700,1750,1800,1850,1900,1910,1941,1980,2000,2100,2200];
    //金額陣列
    var jeArr = [3500,3600,4200,4800,5500,6500,4900,3500,5400,5500,6500,7000];
    var colors = ['#FD2446','#248EFD','#C916F2','#6669B1'];//自定義一個顏色陣列，多系時會按照順序使用自己定義的顏色陣列，若不定義則使用預設的顏色陣列

    // 指定圖表的配置項和資料
    var option = {
        color:colors,
        title: {
            text: 'ECharts 入門示例'
        },
        tooltip: {},
        legend: {
            data:['銷量']
        },
        xAxis: {
            data: months
        },
        yAxis: {},
        toolbox:{
            show:true,
            orient: 'horizontal',
            showTitle: true,
            feature:{
                magicType: {
                    type: ['line', 'bar']
                },
                dataView:{
                    show: true,
                    title: '某地區單位人數金額統計',
                    readOnly:false,
                    optionToContent: function(opt) {
                        var colName = "序號";
                        var typeName = "月份";
                        var dataview = opt.toolbox[0].feature.dataView;  //獲取dataview
                        var table = '<div style="position:absolute;top: 5px;left: 0px;right: 0px;line-height: 1.4em;text-align:center;font-size:14px;">'+dataview.title+'</div>'
                        table += getTable(opt,colName,typeName);
                        return table;
                    }
                },
                saveAsImage:{
                    type:'png',
                    show:true,
                    title:'儲存為圖片',
                },
                restore:{show:true}
            }
        },
        series: [{
            name:'單位數',
            type:'bar',
            barMaxWidth:'20%',
            label:{
                normal:{
                    show:true,
                    position:'top'
                }
            },
            data:dwArr
        },
            {
                name:'職工數',
                type:'bar',
                barMaxWidth:'20%',
                label:{
                    normal:{
                        show:true,
                        position:'top'
                    }
                },
                data:zgArr
            },
            {
                name:'平均工資',
                type:'bar',
                barMaxWidth:'20%',
                label:{
                    normal:{
                        show:true,
                        position:'top'
                    }
                },
                data:jeArr
            }]
    };
    function getTable(opt,colName,typeName){
        var axisData = opt.xAxis[0].data;//獲取圖形的data陣列
        var series = opt.series;//獲取series
        var num = 0;//記錄序號
        var sum = new Array();//獲取合計陣列（根據對應的係數生成相應數量的sum）
        for(var i=0; i<series.length; i++){
            sum[i] = 0;
        }
        var table = '<table class="bordered"><thead><tr>'
            + '<th>'+colName+'</th>'
            + '<th>'+typeName+'</th>';
        for(var i=0; i<series.length;i++){
            table += '<th>'+series[i].name+'</th>'
        }
        table += '</tr></thead><tbody>';
        for (var i = 0, l = axisData.length; i < l; i++) {
            num += 1;
            for(var n=0;n<series.length;n++){
                if(series[n].data[i]){
                    sum[n] += Number(series[n].data[i]);
                }else{
                    sum[n] += Number(0);
                }

            }
            table += '<tr>'
                + '<td>' + num + '</td>'
                + '<td>' + axisData[i] + '</td>';
            for(var j=0; j<series.length;j++){
                if(series[j].data[i]){
                    table += '<td>' + series[j].data[i] + '</td>';
                }else{
                    table += '<td>' + 0 + '</td>';
                }

            }
            table += '</tr>';
        }
        //最後一行加上合計
        table += '<tr>'+ '<td>' + (num+1) + '</td>' + '<td>合計</td>';
        for(var n=0;n<series.length;n++){
            if(String(sum[n]).indexOf(".")>-1)
                table += '<td>' + (Number(sum[n])).toFixed(2)  + '</td>';
            else
                table += '<td>' + Number(sum[n])  + '</td>';
        }
        table += '</tr></tbody></table>';
        return table;
    }
    // 使用剛指定的配置項和資料顯示圖表。
    myChart.setOption(option);
</script>
</body>
</html>

下面是效果圖：

點選資料檢視後的圖：

Echarts自定義資料檢視樣式（表格樣式）

用過echarts的同胞們都知道，自帶的資料檢視是怎樣的。在真正做專案時，肯定需要我們自己來寫一個相對美觀的資料檢視。下面以表格樣式的資料檢視為例，來實現一個自己的資料檢視。 <!DOCTYPE html> <html> <head>

3. CKeditor+ckfinder ---CKFinder原始碼修改上傳自定義資料夾名（以時間年月YYYYMM為例）

1 準備請自行參考第2文章此處就不做過多解釋了 ^_^ 2. CKeditor+ckfinder ---CKFinder原始碼修改自定義上傳檔名，連結如下修改上傳檔名 2 查詢官網資料連結如下

資料結構---自定義單向連結串列（Java實現）

單向連結串列是指每一個節點記憶體在一個指向下一個節點的指標，java中就是節點存在指向下一個節點的物件引用下面是Node節點類 public class Node { private Object object; private Node next;

SpringMVC（十二）自定義異常處理器 HandlerExceptionResolver（接口）

pin org ota admin pack property framework ase exception 自定義異常處理器和系統異常處理器的提升版可以實現相同的功能，但是使用的方法不同，自定義異常處理器可以不用在配置文件中配置name多東西，只需要一個異常處理器就可以

Odoo 自定義Widgets 基礎教程（章節1）

大家好，此次，我們主要講解 Odoo 中的Widgets。網上、論壇裡很多提及Widget的文章，但很少說Odoo自定義Widget 是如何實現的，這一直是大家所苦惱的地方。本章，將對Odoo中的Widget 進行基礎講解。首先， Widget【掛件】產生的目的，是為了方便後端開發人員在不熟悉Ja

自定義輪播圖（banner圖）

public class MyBannerActivity extends AppCompatActivity { private String[] picUrl = { "https://img.huxiucdn.com/article/c

自定義View繪製流程（面試專用）

（自己整理的比較亂，但這麼說沒問題的！）自定義view是幹嘛的呢？當我們不滿足於Android提供的原生控制元件和佈局時，就應該考慮到自定義view。自定義View分為兩大塊。自定義控制元件和自定義容器自定義View必須重寫兩個構造方法第一個

隨筆（八）自定義redis快取註解（基於springboot）

前言：最近專案開發中需要使用redis快取為資料庫降壓。由於在構建系統時沒有使用快取，後期加入快取的時候不想對業務程式碼上新增，造成程式碼入侵，所有封裝了一套自定義快取類，處理快取。開發環境： win10+Intelli

【Android】_自定義Adapter_學生註冊（無資料庫）

本文是完善前一篇學生註冊文章(https://blog.csdn.net/cungudafa/article/details/84780652)中:對`自定義ListView`增加`介面卡Adapter`實現對每個學生個體進行再編輯和刪除操作。

spring-security 個性化用戶認證流程——自定義登錄頁面（可配置）

ron 進行狀態 row 錯誤 this 力度 override all 1.定義自己的登錄頁面我們需要根據自己的業務系統構建自己的登錄頁面以及登錄成功、失敗處理在spring security提供給我的登錄頁面中，只有用戶名、密碼框，而自帶的登錄成功頁面是空白頁面（可以

Android 自定義view --圓形百分比（進度條）

注：本文由於是在學習過程中寫的，存在大量問題(overdraw onDraw new物件)，請讀者們不要被誤導！！解決辦法見後面的部落格。起因最近公司專案有需求需要用到輕量級圖表如下

一步一步帶你實現自定義圓形進度條（詳解）

每次看到別人做出炫酷的都會想，這個應該很難吧？這是心理上先入為主的就這麼認為了，其實實現很簡單，下面一步一步的詳細剖析自定義圓形進度條的步驟。首先看效果圖：篇幅有點長，耐心看完肯定get新技能。看每一個檢視都包含了些什麼。最

自定義物件去重（Set篇）

當需要給集合去重時，實現的方式有很多。這裡介紹使用Set去重（兩種方式）需求：給多個Student物件去重 public class Student { private int id; private String name; public Student() {

Android：實際運用Zxing整合二維碼掃描及自定義掃碼介面（demo原始碼）

二維碼掃描，各大主流App必不可少的功能，而且google已將輪子替我們造好，直接拿來使用即可。以下是教學如何將Zxing開源庫整合到自己專案中，並且自定義掃碼介面，後期可根據自己的業務需求進行修改，最後補充了一點由此延伸的學習技能點。一. 整合Zing

遮蔽瀏覽器右鍵選單功能，自定義右鍵選單（相容IE8）

做了個自定義右鍵選單的功能，和獲取選中文字內容相關，一起記錄一下。網上查閱嘗試了很多方式，選擇了一個較為簡潔的方式實現，程式碼很少，進行細節調整後發現存在IE8相容性問題，又查閱資料後進行了優化，目前可以完美相容IE8，但注意jQuery版本必須1.7+，我

android自定義環形統計圖（帶動畫）

一、測試截圖二、實現原理 package com.freedomanlib; import java.util.Timer; import java.util.TimerTask; import android.annotation.SuppressLint;

網路程式設計---乙太網頭 IP頭 ARP包結構體封裝及常用自定義網路轉換函式（已測試）

以下的結構體在實際工程中經過了測試是可以的，自定義函式也經過了測試，到目前為止沒有出現問題。 // --------------------------------------------- // TCP/IP基礎結構體和通用函式 // ---------

destoon 自定義新模組模組（手機模組）

前面我們講過了destoon 怎樣自定義一個新的模組，現在讓我談談怎樣定義一個手機模組換句話說就是新模組的網頁內容可以有手機版準備工作 1、destoon下載地址：http://www.destoon.com/download/ 2、下載並安裝完成， 3、後臺使用者名稱：

Java中實現自定義的註解處理器（Annotation Processor）

在之前的《簡單實現ButterKnife的註解功能》中，使用了執行時的註解實現了通過編寫註解繫結View與xml。由於執行時註解需要在Activity初始化中進行繫結操作，呼叫了大量反射相關程式碼，在介面複雜的情況下，使用這種方法就會嚴重影響Activity初始

自定義View學習一（圓形頭像）

前言系統為我們提供的控制元件是有限的，當我們想要在有限的螢幕上顯示更豐富多彩的內容，我們往往需要自定義控制元件。作為一個android初學者，我對android的自定義View也不是很熟悉。這段時間剛好無事，就先從我們平常使用的圓形頭像開始練起吧。我們要

Echarts自定義資料檢視樣式（表格樣式）

相關推薦