ECharts responsiv

ECharts-Diagramme werden in einem DOM-Knoten (Container) angezeigt, dessen Breite und Höhe vom Benutzer festgelegt werden.

Manchmal möchten wir Diagramminhalte sowohl auf PCs als auch auf Mobilgeräten gut darstellen und so responsives Design erreichen. Um dieses Problem zu lösen, hat ECharts die Einstellungen für die Komponentenpositionierung verbessert und etwas Ähnliches wieCSS Media Query implementiert.adaptive Fähigkeit.

Positionierung und Layout von ECharts-Komponenten

Die meisten "Komponenten" und "Serien" folgen zwei Positionierungsmethoden.

left/right/top/bottom/width/height-Positionierungsmethode

Von diesen sechs Größen kann jede ein "absoluter Wert", ein "Prozentsatz" oder eine "Positionsbeschreibung" sein.

absoluter Wert

Die Einheit ist das Browser-Pixel (px), geschrieben in dernumberForm (ohne Einheiten). Zum Beispiel{left: 23, height: 400}。
percentage

Gibt an, welchen Prozentsatz der Höhe und Breite des DOM-Containers es einnimmt, unter Verwendung vonstringIn der Form geschrieben. Zum Beispiel{right: '30%', bottom: '40%'}。
Positionsbeschreibung
- Kann gesetzt werdenleft: 'center', zeigt horizontale Zentrierung an.
- Kann gesetzt werdentop: 'middle', zeigt vertikale Zentrierung an.

Die Konzepte dieser sechs Größen sind denen in CSS ähnlich:

left: Abstand vom linken Rand des DOM-Containers.
right: Abstand vom rechten Rand des DOM-Containers.
top: Abstand vom oberen Rand des DOM-Containers.
bottom: Abstand vom unteren Rand des DOM-Containers.
width: Breite.
height: Höhe.

Horizontal müssen von den drei Größen left, right und width nur zwei Werte haben, da zwei beliebige Größen die Position und Größe der Komponente bestimmen können. Zum Beispiel können left und right oder right und width die Position und Größe der Komponente bestimmen. Vertikal verhalten sich die drei Größen top, bottom und height ähnlich wie im horizontalen Fall und werden nicht wiederholt.

center / radius-Positionierungsmethode

center

ist ein Array, das angibt[x, y], wobei,x、yEs kann ein "absoluter Wert" oder ein "Prozentsatz" sein, mit derselben Bedeutung wie oben beschrieben.
radius

ist ein Array, das angibt[inner radius, outer radius]Die inneren und äußeren Radien können "absolute Werte" oder "Prozentwerte" sein, wobei die Bedeutungen dieselben sind wie oben beschrieben.

Prozent-Einstellungen sind sehr nützlich bei der Anpassung an die Containergröße.

Horizontal und vertikal

ECharts-Komponenten mit einer "langgestreckten Erscheinung" (wie legend, visualMap, dataZoom, timeline usw.) bieten meist eine Wahl zwischen "horizontalem Layout" und "vertikalem Layout". Beispielsweise kann auf einem hohen, schmalen Mobilbildschirm ein "vertikales Layout" geeignet sein; auf einem breiten PC-Bildschirm kann ein "horizontales Layout" geeignet sein.

Die Einstellung für horizontales/vertikales Layout befindet sich im Allgemeinen im orient- oder layout-Konfigurationselement von "component" oder "series", das auf 'horizontal' oder 'vertical' gesetzt wird.

Beispiel

Im folgenden Beispiel können wir versuchen, den Punkt in der unteren rechten Ecke zu ziehen; das Diagramm ändert sich mit der Bildschirmgröße, und die Legende und die Serien passen ihre Layoutpositionen und -methoden automatisch an.

Im Beispiel haben wir jQuery verwendet, um externe Daten zu laden. Bei der Verwendung müssen wir die jQuery-Bibliothek einbinden.

Beispiel

Selbst ausprobieren »

Um Media Query in option festzulegen, müssen Sie das folgende Format befolgen:

option = {
    baseOption: { // 这里是基本的『原子option』。
        title: {...},
        legend: {...},
        series: [{...}, {...}, ...],
        ...
    },
    media: [ // 这里定义了 media query 的逐条规则。
        {
            query: {...},   // 这里写规则。
            option: {       // 这里写此规则满足下的option.
                legend: {...},
                ...
            }
        },
        {
            query: {...},   // 第二个规则。
            option: {       // 第二个规则对应的option.
                legend: {...},
                ...
            }
        },
        {                   // 这条里没有写规则，表示『默认』，
            option: {       // 即所有规则都不满足时，采纳这个option.
                legend: {...},
                ...
            }
        }
    ]
};

Im obigen Beispiel sind baseOption und jede Option in media "atomare Optionen", d. h. gewöhnliche Optionen, die Definitionen von Komponenten und Serien enthalten. Die gesamte Option, die aus "atomaren Optionen" zusammengesetzt ist, wird als "zusammengesetzte Option" bezeichnet. baseOption wird immer verwendet; außerdem wird, wenn eine Abfragebedingung erfüllt ist, die entsprechende Option mit chart.mergeOption() zusammengeführt.

Abfrage

Jede Abfrage sieht folgendermaßen aus:

{
    minWidth: 200,
    maxHeight: 300,
    minAspectRatio: 1.3
}

Derzeit werden drei Eigenschaften unterstützt: width, height, aspectRatio. Jede Eigenschaft kann ein Präfix min oder max haben. Zum Beispiel bedeutet minWidth: 200 "Breite größer oder gleich 200px". Zwei Eigenschaften zusammen geschrieben bedeuten "und", zum Beispiel: {minWidth: 200, maxHeight: 300} bedeutet "Breite größer oder gleich 200px und Höhe kleiner oder gleich 300px".

option

Da die Option in media eine "atomare Option" ist, kann theoretisch jeder Konfigurationseintrag einer Option geschrieben werden. Aber im Allgemeinen schreiben wir nur diejenigen, die mit Layout und Positionierung zusammenhängen, zum Beispiel nehmen wir einen Teil der Abfrageoption aus dem obigen Beispiel:

media: [
    ...,
    {
        query: {
            maxAspectRatio: 1           // 当长宽比小于1时。
        },
        option: {
            legend: {                   // legend 放在底部中间。
                right: 'center',
                bottom: 0,
                orient: 'horizontal'    // legend 横向布局。
            },
            series: [                   // 两个饼图左右布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '70%']
                }
            ]
        }
    },
    {
        query: {
            maxWidth: 500               // 当容器宽度小于 500 时。
        },
        option: {
            legend: {
                right: 10,              // legend 放置在右侧中间。
                top: '15%',
                orient: 'vertical'      // 纵向布局。
            },
            series: [                   // 两个饼图上下布局。
                {
                    radius: [20, '50%'],
                    center: ['50%', '30%']
                },
                {
                    radius: [30, '50%'],
                    center: ['50%', '75%']
                }
            ]
        }
    },
    ...
]

Priorität, wenn mehrere Abfragen erfüllt sind

Beachten Sie, dass mehrere Abfragen gleichzeitig erfüllt sein können und alle über mergeOption zusammengeführt werden; die später definierten werden später zusammengeführt (d. h. haben höhere Priorität).

Standardabfrage

Wenn ein Element in media keine Abfrage hat, stellt es den "Standardwert" dar, d. h. diese Option wird verwendet, wenn keine der Regeln erfüllt ist.

Hinweise, wenn sich die Containergröße in Echtzeit ändert

In vielen Fällen muss der Container-DOM-Knoten seine Größe nicht beliebig durch Ziehen ändern, sondern es werden nur einige typische Größen je nach verschiedenen Geräten festgelegt.

Wenn der Container-DOM-Knoten jedoch seine Größe beliebig durch Ziehen ändern können muss, dann ist derzeit Folgendes zu beachten: Wenn ein Konfigurationselement in einer Abfrageoption vorkommt, muss es auch in den anderen Abfrageoptionen vorkommen, andernfalls kann es nicht in seinen ursprünglichen Zustand zurückkehren. (left/right/top/bottom/width/height unterliegen dieser Einschränkung nicht.)

Die media in der „zusammengesetzten Option“ unterstützt keine Zusammenführung.

Das heißt, wenn zum zweiten (oder dritten, vierten, fünften ...) Mal chart.setOption(rawOption) aufgerufen wird, und rawOption eine zusammengesetzte Option ist (d. h. eine media-Liste enthält), dann wird die neue rawOption.media-Liste nicht mit der alten media-Liste zusammengeführt, sondern einfach ersetzt. Allerdings wird rawOption.baseOption weiterhin normal mit der alten option zusammengeführt. Eigentlich gibt es nur wenige Szenarien, in denen eine „zusammengesetzte Option“ benötigt wird, um setOption mehrfach aufzurufen; die empfohlene Methode ist, bei Verwendung von mediaQuery nicht einmalig setOption mit einer „zusammengesetzten Option“ aufzurufen, sondern bei späteren setOption-Aufrufen nur eine „atomare Option“ zu verwenden, d. h. setOption nur zu benutzen, um baseOption zu ändern.

Im Folgenden haben wir jQuery verwendet, um externe Daten zu laden. Bei der Verwendung müssen wir die jQuery-Bibliothek einbinden. Dieses Beispiel ist mit einer Timeline kombiniert:

Beispiel

$.when(
$.getScript('https://www.example.com/static/js/timelineGDP.js'),
$.getScript('https://www.example.com/static/js/draggable.js')
).done(function () {

draggable.init(
$('div[_echarts_instance_]')[0],
myChart,
{
width: 700,
height: 630,
lockY: true,
throttle: 70
}
);

myChart.hideLoading();

var categoryData = [
'Peking','Tianjin','Hebei','Shanxi','Innere Mongolei','Liaoning','Jilin','Heilongjiang',
'Shanghai','Jiangsu','Zhejiang','Anhui','Fujian','Jiangxi','Shandong','Henan',
'Hubei','Hunan','Guangdong','Guangxi','Hainan','Chongqing','Sichuan','Guizhou',
'Yunnan','Tibet','Shaanxi','Gansu','Qinghai','Ningxia','Xinjiang'
];

option = {
baseOption: {
timeline: {
axisType: 'category',
autoPlay: true,
playInterval: 1000,
data: [
'2002-01-01', '2003-01-01', '2004-01-01',
'2005-01-01', '2006-01-01', '2007-01-01',
'2008-01-01', '2009-01-01', '2010-01-01',
'2011-01-01'
],
label: {
formatter : function(s) {
return (new Date(s)).getFullYear();
}
}
},
title: {
subtext: 'Media-Query-Beispiel'
},
tooltip: {
trigger:'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'value',
name: 'BIP (100 Millionen Yuan)',
max: 30000,
data: null
},
yAxis: {
type: 'category',
data: categoryData,
axisLabel: {interval: 0},
splitLine: {show: false}
},
legend: {
data: [Primärsektor, Sekundärsektor, Tertiärsektor, 'BIP', 'Finanzen', 'Immobilien'],
selected: {
'BIP': false, 'Finanzen': false, 'Immobilien': false
}
},
calculable : true,
series: [
{name: 'BIP', type: 'bar'},
{name: 'Finanzen', type: 'bar'},
{name: 'Immobilien', type: 'bar'},
{name: Primärsektor, type: 'bar'},
{name: Sekundärsektor, type: 'bar'},
{name: Tertiärsektor, type: 'bar'},
{name: 'BIP-Anteil', type: 'pie'}
]
},
media: [
{
option: {
legend: {
orient: 'horizontal',
left: 'right',
itemGap: 10
},
grid: {
left: '10%',
top: 80,
right: 90,
bottom: 100
},
xAxis: {
nameLocation: 'end',
nameGap: 10,
splitNumber: 5,
splitLine: {
show: true
}
},
timeline: {
orient: 'horizontal',
inverse: false,
left: '20%',
right: '20%',
bottom: 10,
height: 40
},
series: [
{name: 'BIP-Anteil', center: ['75%', '30%'], radius: '28%'}
]
}
},
{
query: {maxWidth: 670, minWidth: 550},
option: {
legend: {
orient: 'horizontal',
left: 200,
itemGap: 5
},
grid: {
left: '10%',
top: 80,
right: 90,
bottom: 100
},
xAxis: {
nameLocation: 'end',
nameGap: 10,
splitNumber: 5,
splitLine: {
show: true
}
},
timeline: {
orient: 'horizontal',
inverse: false,
left: '20%',
right: '20%',
bottom: 10,
height: 40
},
series: [
{name: 'BIP-Anteil', center: ['75%', '30%'], radius: '28%'}
]
}
},
{
query: {maxWidth: 550},
option: {
legend: {
orient: 'vertical',
left: 'right',
itemGap: 5
},
grid: {
left: 55,
top: '32%',
right: 100,
bottom: 50
},
xAxis: {
nameLocation: 'middle',
nameGap: 25,
splitNumber: 3
},
timeline: {
orient: 'vertical',
inverse: true,
right: 10,
top: 150,
bottom: 10,
width: 55
},
series: [
{name: 'BIP-Anteil', center: ['45%', '20%'], radius: '28%'}
]
}
}
],
options: [
{
title: {text: '2002 nationale makroökonomische Indikatoren'},
series: [
{data: dataMap.dataGDP['2002']},
{data: dataMap.dataFinancial['2002']},
{data: dataMap.dataEstate['2002']},
{data: dataMap.dataPI['2002']},
{data: dataMap.dataSI['2002']},
{data: dataMap.dataTI['2002']},
{data: [
{name: Primärer Sektor, value: dataMap.dataPI['2002sum']},
{name: Sekundärsektor, value: dataMap.dataSI['2002sum']},
{name: Tertiärsektor, value: dataMap.dataTI['2002sum']}
]}
]
},
{
title : {text: '2003 Nationale makroökonomische Indikatoren'},
series : [
{data: dataMap.dataGDP['2003']},
{data: dataMap.dataFinancial['2003']},
{data: dataMap.dataEstate['2003']},
{data: dataMap.dataPI['2003']},
{data: dataMap.dataSI['2003']},
{data: dataMap.dataTI['2003']},
{data: [
{name: Primärsektor, value: dataMap.dataPI['2003sum']},
{name: Sekundärsektor, value: dataMap.dataSI['2003sum']},
{name: Tertiärsektor, value: dataMap.dataTI['2003sum']}
]}
]
},
{
title : {text: '2004 Nationale makroökonomische Indikatoren'},
series : [
{data: dataMap.dataGDP['2004']},
{data: dataMap.dataFinancial['2004']},
{data: dataMap.dataEstate['2004']},
{data: dataMap.dataPI['2004']},
{data: dataMap.dataSI['2004']},
{data: dataMap.dataTI['2004']},
{data: [
{name: Primärsektor, value: dataMap.dataPI['2004sum']},
{name: Sekundärsektor, value: dataMap.dataSI['2004sum']},
{name: Tertiärsektor, value: dataMap.dataTI['2004sum']}
]}
]
},
{
title : {text: '2005 Nationale makroökonomische Indikatoren'},
series : [
{data: dataMap.dataGDP['2005']},
{data: dataMap.dataFinancial['2005']},
{data: dataMap.dataEstate['2005']},
{data: dataMap.dataPI['2005']},
{data: dataMap.dataSI['2005']},
{data: dataMap.dataTI['2005']},
{data: [
{name: Primärsektor, value: dataMap.dataPI['2005sum']},
{name: Sekundärsektor, value: dataMap.dataSI['2005sum']},
{name: Tertiärsektor, value: dataMap.dataTI['2005sum']}
]}
]
},
{
title : {text: '2006 Nationale makroökonomische Indikatoren'},
series : [
{data: dataMap.dataGDP['2006']},
{data: dataMap.dataFinancial['2006']},
{data: dataMap.dataEstate['2006']},
{data: dataMap.dataPI['2006']},
{data: dataMap.dataSI['2006']},
{data: dataMap.dataTI['2006']},
{data: [
{name: Primärsektor, value: dataMap.dataPI['2006sum']},
{name: Sekundärsektor, value: dataMap.dataSI['2006sum']},
{name: Tertiärsektor, value: dataMap.dataTI['2006sum']}
]}
]
},
{
title : {text: '2007 Nationale makroökonomische Indikatoren'},
series : [
{data: dataMap.dataGDP['2007']},
{data: dataMap.dataFinancial['2007']},
{data: dataMap.dataEstate['2007']},
{data: dataMap.dataPI['2007']},
{data: dataMap.dataSI['2007']},
{data: dataMap.dataTI['2007']},
{data: [
{name: Primärsektor, value: dataMap.dataPI['2007sum']},
{name: Sekundärsektor, value: dataMap.dataSI['2007sum']},
{name: Tertiärsektor, value: dataMap.dataTI['2007sum']}
]}
]
},
{
title : {text: '2008 Nationale makroökonomische Indikatoren'},
series : [
{data: dataMap.dataGDP['2008']},
{data: dataMap.dataFinancial['2008']},
{data: dataMap.dataEstate['2008']},
{data: dataMap.dataPI['2008']},
{data: dataMap.dataSI['2008']},
{data: dataMap.dataTI['2008']},
{data: [
{name: Primärsektor, value: dataMap.dataPI['2008sum']},
{name: Sekundärer Sektor, value: dataMap.dataSI['2008sum']},
{name: Tertiärer Sektor, value: dataMap.dataTI['2008sum']}
]}
]
},
{
title : {text: '2009 Nationale makroökonomische Indikatoren'},
series : [
{data: dataMap.dataGDP['2009']},
{data: dataMap.dataFinancial['2009']},
{data: dataMap.dataEstate['2009']},
{data: dataMap.dataPI['2009']},
{data: dataMap.dataSI['2009']},
{data: dataMap.dataTI['2009']},
{data: [
{name: Primärer Sektor, value: dataMap.dataPI['2009sum']},
{name: Sekundärer Sektor, value: dataMap.dataSI['2009sum']},
{name: Tertiärer Sektor, value: dataMap.dataTI['2009sum']}
]}
]
},
{
title : {text: '2010 Nationale makroökonomische Indikatoren'},
series : [
{data: dataMap.dataGDP['2010']},
{data: dataMap.dataFinancial['2010']},
{data: dataMap.dataEstate['2010']},
{data: dataMap.dataPI['2010']},
{data: dataMap.dataSI['2010']},
{data: dataMap.dataTI['2010']},
{data: [
{name: Primärer Sektor, value: dataMap.dataPI['2010sum']},
{name: Sekundärer Sektor, value: dataMap.dataSI['2010sum']},
{name: Tertiärer Sektor, value: dataMap.dataTI['2010sum']}
]}
]
},
{
title : {text: '2011 Nationale makroökonomische Indikatoren'},
series : [
{data: dataMap.dataGDP['2011']},
{data: dataMap.dataFinancial['2011']},
{data: dataMap.dataEstate['2011']},
{data: dataMap.dataPI['2011']},
{data: dataMap.dataSI['2011']},
{data: dataMap.dataTI['2011']},
{data: [
{name: Primärer Sektor, value: dataMap.dataPI['2011sum']},
{name: Sekundärsektor, value: dataMap.dataSI['2011sum']},
{name: Tertiärer Sektor, value: dataMap.dataTI['2011sum']}
]}
]
}
]
};

myChart.setOption(option);

});

Selbst ausprobieren »

Weitere Erweiterungen