Echarts數(shù)據(jù)可視化series-scatter散點(diǎn)圖全解:

mytextStyle={
    color:"#333",               //文字顏色
    fontStyle:"normal",         //italic斜體  oblique傾斜
    fontWeight:"normal",        //文字粗細(xì)bold   bolder   lighter  100 | 200 | 300 | 400...
    fontFamily:"sans-serif",    //字體系列
    fontSize:18,                  //字體大小
};
mylineStyle={
    color:"#333",               //顏色负蠕,'rgb(128, 128, 128)','rgba(128, 128, 128, 0.5)',支持線性漸變鳞尔,徑向漸變缓艳,紋理填充
    shadowColor:"red",          //陰影顏色
    shadowOffsetX:0,            //陰影水平方向上的偏移距離。
    shadowOffsetY:0,            //陰影垂直方向上的偏移距離
    shadowBlur:10,              //圖形陰影的模糊大小井誉。
    type:"solid",               //坐標(biāo)軸線線的類型抡句,solid,dashed拱镐,dotted
    width:1,                    //坐標(biāo)軸線線寬
    opacity:1,                  //圖形透明度艘款。支持從 0 到 1 的數(shù)字,為 0 時(shí)不繪制該圖形
};
myareaStyle={
    color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔區(qū)域顏色沃琅。分隔區(qū)域會(huì)按數(shù)組中顏色的順序依次循環(huán)設(shè)置顏色哗咆。默認(rèn)是一個(gè)深淺的間隔色。
    shadowColor:"red",          //陰影顏色
    shadowOffsetX:0,            //陰影水平方向上的偏移距離益眉。
    shadowOffsetY:0,            //陰影垂直方向上的偏移距離
    shadowBlur:10,              //圖形陰影的模糊大小晌柬。
    opacity:1,                  //圖形透明度。支持從 0 到 1 的數(shù)字郭脂,為 0 時(shí)不繪制該圖形
};
myitemStyle={
    color:"red",                 //顏色
    borderColor:"#000",         //邊框顏色
    borderWidth:0,              //柱條的描邊寬度年碘,默認(rèn)不描邊。
    borderType:"solid",         //柱條的描邊類型展鸡,默認(rèn)為實(shí)線屿衅,支持 'dashed', 'dotted'。
    barBorderRadius:0,          //柱形邊框圓角半徑莹弊,單位px涤久,支持傳入數(shù)組分別指定柱形4個(gè)圓角半徑。
    shadowBlur:10,              //圖形陰影的模糊大小忍弛。
    shadowColor:"#000",         //陰影顏色
    shadowOffsetX:0,            //陰影水平方向上的偏移距離响迂。
    shadowOffsetY:0,            //陰影垂直方向上的偏移距離。
    opacity:1,                  //圖形透明度细疚。支持從 0 到 1 的數(shù)字蔗彤,為 0 時(shí)不繪制該圖形。
};
mylabel={
    show:false,                  //是否顯示標(biāo)簽。
    position:"inside",          //標(biāo)簽的位置然遏。// 絕對(duì)的像素值[10, 10],// 相對(duì)的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
    offset:[30, 40],             //是否對(duì)文字進(jìn)行偏移贫途。默認(rèn)不偏移。例如:[30, 40] 表示文字在橫向上偏移 30啦鸣,縱向上偏移 40潮饱。
    formatter:': {c}',       //標(biāo)簽內(nèi)容格式器诫给。模板變量有 {a}、啦扬中狂、{c},分別表示系列名扑毡,數(shù)據(jù)名胃榕,數(shù)據(jù)值。
    textStyle:mytextStyle
};
mypoint={
    symbol:"pin",               //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    symbolSize:50,              //標(biāo)記的大小瞄摊,可以設(shè)置成諸如 10 這樣單一的數(shù)字勋又,也可以用數(shù)組分開(kāi)表示寬和高,例如 [20, 10] 表示標(biāo)記寬為20换帜,高為10楔壤。
    symbolRotate:0,             //標(biāo)記的旋轉(zhuǎn)角度。注意在 markLine 中當(dāng) symbol 為 'arrow' 時(shí)會(huì)忽略 symbolRotate 強(qiáng)制設(shè)置為切線的角度惯驼。
    symbolOffset:[0,0],         //標(biāo)記相對(duì)于原本位置的偏移蹲嚣。默認(rèn)情況下,標(biāo)記會(huì)居中置放在數(shù)據(jù)對(duì)應(yīng)的位置
    silent:false,               //圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件祟牲,默認(rèn)為 false隙畜,即響應(yīng)和觸發(fā)鼠標(biāo)事件。
    label:{
        normal:mylabel,
        emphasis:mylabel
    },
    itemStyle:{
        normal:myitemStyle,
        emphasis:myitemStyle
    }
};
myline={
    symbol:["pin","circle"],    //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    symbolSize:50,              //標(biāo)記的大小说贝,可以設(shè)置成諸如 10 這樣單一的數(shù)字议惰,也可以用數(shù)組分開(kāi)表示寬和高,例如 [20, 10] 表示標(biāo)記寬為20乡恕,高為10言询。
    precision:2,                //標(biāo)線數(shù)值的精度,在顯示平均值線的時(shí)候有用几颜。
    silent:false,               //圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件倍试,默認(rèn)為 false,即響應(yīng)和觸發(fā)鼠標(biāo)事件蛋哭。
    label:{
        normal:mylabel,
        emphasis:mylabel
    },
    lineStyle:{
        normal:mylineStyle,
        emphasis:mylineStyle
    }
};
myarea={
    silent:false,               //圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件县习,默認(rèn)為 false,即響應(yīng)和觸發(fā)鼠標(biāo)事件。
    label:{
        normal:mylabel,
        emphasis:mylabel
    },
    itemStyle:{
        normal:myitemStyle,
        emphasis:myitemStyle
    }
};
series=[
{
    type:"scatter",             //散點(diǎn)圖
    zlevel:0,                   //柱狀圖所有圖形的 zlevel 值躁愿。
    z:2,                         //柱狀圖組件的所有圖形的z值叛本。控制圖形的前后順序彤钟。z值小的圖形會(huì)被z值大的圖形覆蓋来候。
    silent:false,               //圖形是否不響應(yīng)和觸發(fā)鼠標(biāo)事件,默認(rèn)為 false逸雹,即響應(yīng)和觸發(fā)鼠標(biāo)事件营搅。
    name:"數(shù)據(jù)名稱",             //系列名稱,用于tooltip的顯示梆砸,legend 的圖例篩選转质,在 setOption 更新數(shù)據(jù)和配置項(xiàng)時(shí)用于指定對(duì)應(yīng)的系列。
    legendHoverLink:true,       //是否啟用圖例 hover 時(shí)的聯(lián)動(dòng)高亮帖世。
    hoverAnimation:true,        //是否開(kāi)啟鼠標(biāo) hover 的提示動(dòng)畫(huà)效果休蟹。
    coordinateSystem:"geo",     //'cartesian2d'使用二維的直角坐標(biāo)系。'geo'使用地理坐標(biāo)系
    xAxisIndex:0,                //使用的 x 軸的 index日矫,在單個(gè)圖表實(shí)例中存在多個(gè) x 軸的時(shí)候有用赂弓。
    yAxisIndex:0,                //使用的 y 軸的 index,在單個(gè)圖表實(shí)例中存在多個(gè) y軸的時(shí)候有用哪轿。
    polarIndex:0,                //使用的極坐標(biāo)系的 index盈魁,在單個(gè)圖表實(shí)例中存在多個(gè)極坐標(biāo)系的時(shí)候有用。
    geoIndex:0,                  //使用的地理坐標(biāo)系的 index缔逛,在單個(gè)圖表實(shí)例中存在多個(gè)地理坐標(biāo)系的時(shí)候有用备埃。
    calendarIndex:0,            //使用的日歷坐標(biāo)系的 index,在單個(gè)圖表實(shí)例中存在多個(gè)日歷坐標(biāo)系的時(shí)候有用褐奴。
    symbol:"pin",               //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    symbolSize:50,              //標(biāo)記的大小按脚,可以設(shè)置成諸如 10 這樣單一的數(shù)字,也可以用數(shù)組分開(kāi)表示寬和高敦冬,例如 [20, 10] 表示標(biāo)記寬為20辅搬,高為10。
    symbolRotate:0,             //標(biāo)記的旋轉(zhuǎn)角度脖旱。注意在 markLine 中當(dāng) symbol 為 'arrow' 時(shí)會(huì)忽略 symbolRotate 強(qiáng)制設(shè)置為切線的角度堪遂。
    symbolOffset:[0,0],         //標(biāo)記相對(duì)于原本位置的偏移。默認(rèn)情況下萌庆,標(biāo)記會(huì)居中置放在數(shù)據(jù)對(duì)應(yīng)的位置
    large:false,                //是否開(kāi)啟大規(guī)模散點(diǎn)圖的優(yōu)化溶褪,在數(shù)據(jù)圖形特別多的時(shí)候(>=5k)可以開(kāi)啟。開(kāi)啟后配合 largeThreshold 在數(shù)據(jù)量大于指定閾值的時(shí)候?qū)L制進(jìn)行優(yōu)化践险。缺點(diǎn):優(yōu)化后不能自定義設(shè)置單個(gè)數(shù)據(jù)項(xiàng)的樣式猿妈。
    largeThreshold:2000,        //開(kāi)啟繪制優(yōu)化的閾值吹菱。
    cursor:"pointer",           //鼠標(biāo)懸浮時(shí)在圖形元素上時(shí)鼠標(biāo)的樣式是什么。同 CSS 的 cursor彭则。
    label:{                      //圖形上的文本標(biāo)簽鳍刷,可用于說(shuō)明圖形的一些數(shù)據(jù)信息,比如值俯抖,名稱等输瓜,
        normal:mylabel,
        emphasis:mylabel
    },
    itemStyle:{                 //圖形樣式,normal 是圖形在默認(rèn)狀態(tài)下的樣式芬萍;emphasis 是圖形在高亮狀態(tài)下的樣式尤揣,比如在鼠標(biāo)懸浮或者圖例聯(lián)動(dòng)高亮?xí)r。
        normal:myitemStyle,
        emphasis:myitemStyle,
    },
    encode: {                    //可以定義 data 的哪個(gè)維度被編碼成什么
        x: [3, 1, 5],             // 表示維度 3柬祠、1芹缔、5 映射到 x 軸。
        y: 2,                     // 表示維度 2 映射到 y 軸瓶盛。
        tooltip: [3, 2, 4],      // 表示維度 3、2示罗、4 會(huì)在 tooltip 中顯示惩猫。
        label: 3                 // 表示 label 使用維度 3。
    },
    data: [                      //每一列稱為一個(gè)『維度』蚜点。維度下標(biāo)從0開(kāi)始
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
        [12, 44, 55, 66, 2],
        [23, 6, 16, 23, 1],
    ],
    //markPoint:同bar
    //markLine:同bar
    //markArea:同bar
    tooltip:tooltip  //index.js
},

];

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末轧房,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子绍绘,更是在濱河造成了極大的恐慌奶镶,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,548評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件陪拘,死亡現(xiàn)場(chǎng)離奇詭異厂镇,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)左刽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,497評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門捺信,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人欠痴,你說(shuō)我怎么就攤上這事迄靠。” “怎么了喇辽?”我有些...
    開(kāi)封第一講書(shū)人閱讀 167,990評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵掌挚,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我菩咨,道長(zhǎng)吠式,這世上最難降的妖魔是什么陡厘? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,618評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮奇徒,結(jié)果婚禮上雏亚,老公的妹妹穿的比我還像新娘。我一直安慰自己摩钙,他們只是感情好罢低,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,618評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著胖笛,像睡著了一般网持。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上长踊,一...
    開(kāi)封第一講書(shū)人閱讀 52,246評(píng)論 1 308
  • 那天功舀,我揣著相機(jī)與錄音,去河邊找鬼身弊。 笑死辟汰,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的阱佛。 我是一名探鬼主播帖汞,決...
    沈念sama閱讀 40,819評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼凑术!你這毒婦竟也來(lái)了翩蘸?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,725評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤淮逊,失蹤者是張志新(化名)和其女友劉穎催首,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體泄鹏,經(jīng)...
    沈念sama閱讀 46,268評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡郎任,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,356評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了命满。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片涝滴。...
    茶點(diǎn)故事閱讀 40,488評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖胶台,靈堂內(nèi)的尸體忽然破棺而出歼疮,到底是詐尸還是另有隱情,我是刑警寧澤诈唬,帶...
    沈念sama閱讀 36,181評(píng)論 5 350
  • 正文 年R本政府宣布韩脏,位于F島的核電站,受9級(jí)特大地震影響铸磅,放射性物質(zhì)發(fā)生泄漏赡矢。R本人自食惡果不足惜杭朱,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,862評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望吹散。 院中可真熱鬧弧械,春花似錦、人聲如沸空民。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,331評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)界轩。三九已至画饥,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間浊猾,已是汗流浹背抖甘。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,445評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留葫慎,地道東北人衔彻。 一個(gè)月前我還...
    沈念sama閱讀 48,897評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像偷办,于是被迫代替她去往敵國(guó)和親米奸。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,500評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容