echart3圖表的一些基本配置

LeexMuller 發布于2019-08-21 13:31 / 497人閱讀

摘要：最近有機會做了一個小的數據展示頁面，用到了的曲線圖，整個開發使用過程倒還順利。就是在最后配置圖表的折騰了蠻久，真心覺得的配置文檔不夠好。。。鼠標移動到地圖標點上的顏色先記錄這么多，以后遇到了再追加。。。

最近有機會做了一個小的數據展示頁面，用到了echart3的曲線圖，整個開發使用過程倒還順利。
就是在最后配置圖表的折騰了蠻久，真心覺得echart的配置文檔不夠好。。。

下面就以line-stack為例來說說一些配置項的修改！

線條的顏色

全局修改，簡單粗暴

itemStyle: {
    normal: {
        color: "#000"
    }
}

逐條修改，各自為營

series : [
    {
        name:"郵件營銷",
        type:"line",
        stack: "總量",
        data:[120, 132, 101, 134, 90, 230, 210],
        lineStyle: {normal: {color: "yellow"}}
    },
    {
        name:"聯盟廣告",
        type:"line",
        stack: "總量",
        data:[220, 182, 191, 234, 290, 330, 310],
        lineStyle: {normal: {color: "red"}}
    },
    {
        name:"視頻廣告",
        type:"line",
        stack: "總量",
        data:[150, 232, 201, 154, 190, 330, 410],
         lineStyle: {normal: {color: "blue"}}
    },
    {
        name:"直接訪問",
        type:"line",
        stack: "總量",
        data:[320, 332, 301, 334, 390, 330, 320],
        lineStyle: {normal: {color: "black"}}
    },
    {
        name:"搜索引擎",
        type:"line",
        stack: "總量",
        data:[820, 932, 901, 934, 1290, 1330, 1320],
        lineStyle: {normal: {color: "orange"}}
    }
]

x軸坐標邊框的顏色

xAxis : [
    {
        axisLine: {
            lineStyle: {color: "blue"}
        }
    }
]

x軸坐標文字的樣式

 xAxis : [
    {
        axisLabel : {
            show : true,
            textStyle : {
                color : "#f0f",
                align : "left",
                fontSize: 16
            }
        }
    }
]

y軸坐標邊框的顏色

yAxis : [
    {
        type : "value",
        axisLine: {
            lineStyle: {color: "green"}
        },
    }
]

y軸坐標文字的風格

yAxis : [
    {
        type : "value",
        axisLabel : {
            show : true,
            textStyle : {
                color : "#0ff",
                align : "right",
                fontSize: 16
            }
        }
    }
]

去掉x/y軸網格線

 xAxis : [
    {
        type : "category",
        boundaryGap : false,
        data : ["周一","周二","周三","周四","周五","周六","周日"],
        //看這里
        splitLine:{
            show:false
        }
    }
],
yAxis : [
    {
        type : "value",
        //看這里
        splitLine:{
            show:false
        }
    }
]

隱藏圖例說明legend

legend: {
    //看這里
    show: false,
    data:["郵件營銷","聯盟廣告","視頻廣告","直接訪問","搜索引擎"]
}

隱藏保存為圖片圖標saveAsImage

toolbox: {
    feature: {
        saveAsImage: {
            show: false
        }
    }
}

還有幾個effectScatter-map圖的配置

地圖上tooltip的顯示格式

tooltip : {
    trigger: "item",
    //回調函數更加靈活
    formatter: function (params) {
        return params.seriesName + params.value[3] + " " + params.name + "：" + params.value[4];
    }
    //字符竄格式化方便點，不是很靈活。。。
    //formatter: "{a} {b}：{c}"
},

鼠標移動到地圖標點上的顏色

itemStyle: {
    normal: {
        color: "#f4e925",
        shadowBlur: 10,
        shadowColor: "#333"
    },
    emphasis: {color: "red"}
}

先記錄這么多，以后遇到了再追加。。。

云服務器 GPU云服務器配置阿里云window服務器的一些坑 java的一些代碼深度學習的一些應用 php實用的一些代碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87712.html

對web數據可視化的一些理解

摘要：本人也做過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。這也是數據可視化最麻煩的一直，一般我們借助的地圖，或者百度地圖，高德地圖等來開發，其實百度地圖也出了個地圖可視化的庫，展示效果沒有好。。。。最近幾年隨著大數據的興起，以及瀏覽器性能的提升，數據可視化成為了一個熱點，前端也冒出來了很多數據可視化的崗位。本人也做過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。...

andong777 2019-08-20 16:28 評論0 收藏0
對web數據可視化的一些理解

摘要：本人也做過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。這也是數據可視化最麻煩的一直，一般我們借助的地圖，或者百度地圖，高德地圖等來開發，其實百度地圖也出了個地圖可視化的庫，展示效果沒有好。。。。最近幾年隨著大數據的興起，以及瀏覽器性能的提升，數據可視化成為了一個熱點，前端也冒出來了很多數據可視化的崗位。本人也做過一些數據可視化相關的產品，下面聊聊對數據可視化的一些思考。...

gotham 2019-08-01 16:48 評論0 收藏0
百度地圖 osm地圖 leaflet echarts webapck的組合使用時的踩坑記錄

摘要：百度地圖創建標簽進行加載使用百度地圖需要百度地圖添加擴展，用于讓百度地圖支持地圖可能會遇見兩個問題地圖圖片錯位忘記加載中使用的一個主要問題是默認圖標的加載問題，詳見另外也可以考慮使用動態創建標簽的方法，類似百度地圖加載百度地圖因為本身支持的 webpack+百度地圖創建 script標簽進行加載 export function MP(ak){ return new Prom...

G9YH 2019-08-23 15:31 評論0 收藏0
2018年最佳JavaScript數據可視化和圖表庫

摘要：它有什么圖表加粗文字如何使用這個圖表庫可以通過存儲庫下載或通過包管理器安裝。數據可以直接從文件加載到圖表中。它有什么圖表如何使用該庫可在包管理器和他們自己的內容傳送網絡中使用。該庫專為風格的數據可視化而設計，提供一系列高度可配置的圖表。現在有很多圖表庫，但哪一個最好用？這可能取決于許多因素，如業務需求，數據類型，圖表本身的目的等等。在本文中，每個JavaScript圖表庫將與一些關鍵...

terasum 2019-08-02 11:51 評論0 收藏0