成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

echart3圖表的一些基本配置

LeexMuller / 505人閱讀

摘要：最近有機(jī)會(huì)做了一個(gè)小的數(shù)據(jù)展示頁(yè)面，用到了的曲線圖，整個(gè)開(kāi)發(fā)使用過(guò)程倒還順利。就是在最后配置圖表的折騰了蠻久，真心覺(jué)得的配置文檔不夠好。。。鼠標(biāo)移動(dòng)到地圖標(biāo)點(diǎn)上的顏色先記錄這么多，以后遇到了再追加。。。

最近有機(jī)會(huì)做了一個(gè)小的數(shù)據(jù)展示頁(yè)面，用到了echart3的曲線圖，整個(gè)開(kāi)發(fā)使用過(guò)程倒還順利。
就是在最后配置圖表的折騰了蠻久，真心覺(jué)得echart的配置文檔不夠好。。。

下面就以line-stack為例來(lái)說(shuō)說(shuō)一些配置項(xiàng)的修改！
線條的顏色

全局修改，簡(jiǎn)單粗暴

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

逐條修改，各自為營(yíng)

series : [
    {
        name:"郵件營(yíng)銷",
        type:"line",
        stack: "總量",
        data:[120, 132, 101, 134, 90, 230, 210],
        lineStyle: {normal: {color: "yellow"}}
    },
    {
        name:"聯(lián)盟廣告",
        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:"直接訪問(wèn)",
        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軸坐標(biāo)邊框的顏色 
xAxis : [
    {
        axisLine: {
            lineStyle: {color: "blue"}
        }
    }
]

x軸坐標(biāo)文字的樣式 
 xAxis : [
    {
        axisLabel : {
            show : true,
            textStyle : {
                color : "#f0f",
                align : "left",
                fontSize: 16
            }
        }
    }
]

y軸坐標(biāo)邊框的顏色 
yAxis : [
    {
        type : "value",
        axisLine: {
            lineStyle: {color: "green"}
        },
    }
]

y軸坐標(biāo)文字的風(fēng)格 
yAxis : [
    {
        type : "value",
        axisLabel : {
            show : true,
            textStyle : {
                color : "#0ff",
                align : "right",
                fontSize: 16
            }
        }
    }
]

去掉x/y軸網(wǎng)格線 
 xAxis : [
    {
        type : "category",
        boundaryGap : false,
        data : ["周一","周二","周三","周四","周五","周六","周日"],
        //看這里
        splitLine:{
            show:false
        }
    }
],
yAxis : [
    {
        type : "value",
        //看這里
        splitLine:{
            show:false
        }
    }
]

隱藏圖例說(shuō)明legend 
legend: {
    //看這里
    show: false,
    data:["郵件營(yíng)銷","聯(lián)盟廣告","視頻廣告","直接訪問(wèn)","搜索引擎"]
}

隱藏保存為圖片圖標(biāo)saveAsImage 
toolbox: {
    feature: {
        saveAsImage: {
            show: false
        }
    }
}

還有幾個(gè)effectScatter-map圖的配置
地圖上tooltip的顯示格式 
tooltip : {
    trigger: "item",
    //回調(diào)函數(shù)更加靈活
    formatter: function (params) {
        return params.seriesName + params.value[3] + " " + params.name + "：" + params.value[4];
    }
    //字符竄格式化方便點(diǎn)，不是很靈活。。。
    //formatter: "{a} ：{c}"
},

鼠標(biāo)移動(dòng)到地圖標(biāo)點(diǎn)上的顏色 
itemStyle: {
    normal: {
        color: "#f4e925",
        shadowBlur: 10,
        shadowColor: "#333"
    },
    emphasis: {color: "red"}
}

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87712.html

相關(guān)文章

  • 對(duì)web數(shù)據(jù)可視化的一些理解

    摘要：本人也做過(guò)一些數(shù)據(jù)可視化相關(guān)的產(chǎn)品，下面聊聊對(duì)數(shù)據(jù)可視化的一些思考。這也是數(shù)據(jù)可視化最麻煩的一直，一般我們借助的地圖，或者百度地圖，高德地圖等來(lái)開(kāi)發(fā)，其實(shí)百度地圖也出了個(gè)地圖可視化的庫(kù)，展示效果沒(méi)有好。。。。 最近幾年隨著大數(shù)據(jù)的興起，以及瀏覽器性能的提升，數(shù)據(jù)可視化成為了一個(gè)熱點(diǎn)，前端也冒出來(lái)了很多數(shù)據(jù)可視化的崗位。本人也做過(guò)一些數(shù)據(jù)可視化相關(guān)的產(chǎn)品，下面聊聊對(duì)數(shù)據(jù)可視化的一些思考。...

    andong777 評(píng)論0 收藏0

  • 對(duì)web數(shù)據(jù)可視化的一些理解

    摘要：本人也做過(guò)一些數(shù)據(jù)可視化相關(guān)的產(chǎn)品，下面聊聊對(duì)數(shù)據(jù)可視化的一些思考。這也是數(shù)據(jù)可視化最麻煩的一直，一般我們借助的地圖，或者百度地圖，高德地圖等來(lái)開(kāi)發(fā)，其實(shí)百度地圖也出了個(gè)地圖可視化的庫(kù)，展示效果沒(méi)有好。。。。 最近幾年隨著大數(shù)據(jù)的興起，以及瀏覽器性能的提升，數(shù)據(jù)可視化成為了一個(gè)熱點(diǎn)，前端也冒出來(lái)了很多數(shù)據(jù)可視化的崗位。本人也做過(guò)一些數(shù)據(jù)可視化相關(guān)的產(chǎn)品，下面聊聊對(duì)數(shù)據(jù)可視化的一些思考。...

    gotham 評(píng)論0 收藏0

  • 百度地圖 osm地圖 leaflet echarts webapck的組合使用時(shí)的踩坑記錄

    摘要：百度地圖創(chuàng)建標(biāo)簽進(jìn)行加載使用百度地圖需要百度地圖添加擴(kuò)展，用于讓百度地圖支持地圖可能會(huì)遇見(jiàn)兩個(gè)問(wèn)題地圖圖片錯(cuò)位忘記加載中使用的一個(gè)主要問(wèn)題是默認(rèn)圖標(biāo)的加載問(wèn)題，詳見(jiàn)另外也可以考慮使用動(dòng)態(tài)創(chuàng)建標(biāo)簽的方法，類似百度地圖加載百度地圖因?yàn)楸旧碇С值? webpack+百度地圖 創(chuàng)建 script標(biāo)簽進(jìn)行加載 export function MP(ak){ return new Prom...

    G9YH 評(píng)論0 收藏0

  • 2018年最佳JavaScript數(shù)據(jù)可視化和圖表庫(kù)

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

    terasum 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

LeexMuller

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<