antv g2字型陰影 antv g2 notes

2021-10-12 13:39:35 字數 1970 閱讀 9405

1. 全域性配置

// 渲染方式用svg,預設是canvas,用svg可以有更好的相容性和畫素顯示

g2.global.renderer = 'svg';

2. 面積圖過渡背景色,修改直線圖顏色

// 比如2個country,year和value 修改預設的背景色為過渡色

chart.areastack().position('year*value').

color('country', ['l(90) 0:rgba(254,82,100,0.4) 1:rgba(254,82,100,0);',

'l(90) 0:rgba(255,240,6,0.4) 1:rgba(255,240,6,0)' ]);

// 修改兩條折線的顏色

chart.linestack().position('year*value').

color('country', ['#fe5264', '#fff006']).size(2);

3. 乙個圖表有多個chart

// 新建多個view ,view的方法和chart一樣的,可以疊加view

// 折線圖

const view1 = chart.view()

view1.source(data1)

view1.line().position('month*value').

color('type', ['#ffa900', '#fe5264']).shape('smooth'); // @mark 定義不同顏色line chart

// 柱狀圖

const view2 = chart.view()

view2.source(data2)

view2.interval().position('month*value')

.color('month', ['l(270) 0:#007bc7 1:#00dffd']); // @mark 柱狀圖漸變

4. 修改x軸或者y軸

// 這個軸不顯示 ,通常是多個view時,某個view的軸不顯示

chart.axis('month', false)

// 修改這個軸的字顏色 修改圖表的預設虛線

view3.axis('value', {

// label 就是刻度的文字

label: {

textstyle: {

fill: 'rgba(255,255,255,0.7)'

grid: {

type: 'line',

linestyle: {

stroke: 'rgba(255,255,255,0.3)',

linewidth: 1, // 網格線的粗細

linedash: [4, 0]

5. 多個view公用乙個刻度

// 自定義了value軸 最大值和最小值 ,那麼所有的view公用這個刻度

chart.scale('value', {

min: math.min(...gaps) - 1,

max: math.max(...nums) + 1

6.自定義legend

// legend 就是下邊的小圖例

chart.legend({

custom: true,

clickable: false,

items: [{

value: '實體',

marker: {

symbol: 'square',

fill: '#1890ff',

radius: 5

value: '房貸',

marker: {

symbol: 'square',

fill: '#8c8c8c',

radius: 5

value: '往年同期房貸比例',

marker: {

symbol: 'square',

fill: '#4bff39',

radius: 5

HTML教程 2 字型

超文字中的標籤 剛剛接觸超文字,遇到的最大的障礙就是一些用 和 括起來的句子,我們稱它為標籤,是用來分割和標記文字的元素,以形成文字的布局 文字的格式及五彩繽紛的畫面。單標籤 某些標記稱為 單標籤 因為它只需單獨使用就能完整地表達意思,這類標記的語法是 標籤名稱 最常用的單標籤是 它表示換行。雙標籤...

05 字型標籤

粗體粗體creation of webpage creation of webpage creation of webpage creation of webpage creation of webpage creation of webpage creation of webpage creati...

CSS學習3(字型)

這是最亂的地方,幾乎所有的字型都有多種名字。同種字型的不同風格 斜體,加粗等等 也有不同的名字,為了解決這個問題,css使用font family表示乙個系列的字型,包括這種字型的各個風格。設定時,你可以指定字型系列,也可以指定特定的字型。字型可以設定多個,使用者 會依次查詢,直到找到第乙個可用的為...