You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2021/09/04 11:46:24 UTC
[echarts-examples] branch gh-pages updated: WIP: add more ts files
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch gh-pages
in repository https://gitbox.apache.org/repos/asf/echarts-examples.git
The following commit(s) were added to refs/heads/gh-pages by this push:
new 1ba2276 WIP: add more ts files
1ba2276 is described below
commit 1ba2276d5b82fab0e61cec61ab3ec2f8671eb365
Author: pissang <bm...@gmail.com>
AuthorDate: Sat Sep 4 19:45:48 2021 +0800
WIP: add more ts files
---
public/examples/ts/bar-brush.ts | 2 +-
public/examples/ts/bar-drilldown.ts | 4 +-
public/examples/ts/bar-label-rotation.ts | 2 +-
public/examples/ts/bar-negative.ts | 2 +-
public/examples/ts/bar-race-country.ts | 4 +-
public/examples/ts/bar-race.ts | 2 +-
public/examples/ts/bar-stack.ts | 2 +-
public/examples/ts/calendar-pie.ts | 4 +-
public/examples/ts/candlestick-brush.ts | 2 +-
public/examples/ts/circle-packing-with-d3.ts | 4 +-
public/examples/ts/confidence-band.ts | 2 +-
public/examples/ts/data-transform-filter.ts | 2 +-
public/examples/ts/dataset-encode1.ts | 2 +-
public/examples/ts/dataset-link.ts | 4 +-
public/examples/ts/dynamic-data.ts | 2 +-
public/examples/ts/dynamic-data2.ts | 2 +-
public/examples/ts/line-sections.ts | 89 +++++++++
public/examples/ts/line-simple.ts | 22 +++
public/examples/ts/line-smooth.ts | 22 +++
public/examples/ts/line-stack.ts | 71 +++++++
public/examples/ts/line-step.ts | 58 ++++++
public/examples/ts/line-style.ts | 34 ++++
public/examples/ts/line-tooltip-touch.ts | 151 +++++++++++++++
public/examples/ts/line-y-category.ts | 53 ++++++
public/examples/ts/lines-airline.ts | 66 +++++++
public/examples/ts/lines-bmap-bus.ts | 150 +++++++++++++++
public/examples/ts/lines-bmap-effect.ts | 197 +++++++++++++++++++
public/examples/ts/lines-bmap.ts | 138 ++++++++++++++
public/examples/ts/lines-ny.ts | 91 +++++++++
public/examples/ts/map-HK.ts | 98 ++++++++++
public/examples/ts/map-bar-morph.ts | 149 +++++++++++++++
public/examples/ts/map-usa.ts | 139 ++++++++++++++
public/examples/ts/mix-line-bar.ts | 81 ++++++++
public/examples/ts/mix-zoom-on-value.ts | 103 ++++++++++
public/examples/ts/multiple-x-axis.ts | 97 ++++++++++
public/examples/ts/multiple-y-axis.ts | 111 +++++++++++
public/examples/ts/parallel-aqi.ts | 219 ++++++++++++++++++++++
public/examples/ts/parallel-nutrients.ts | 185 ++++++++++++++++++
public/examples/ts/parallel-simple.ts | 34 ++++
public/examples/ts/pictorialBar-bar-transition.ts | 144 ++++++++++++++
public/examples/ts/pictorialBar-body-fill.ts | 147 +++++++++++++++
public/examples/ts/pictorialBar-dotted.ts | 113 +++++++++++
public/examples/ts/pictorialBar-forest.ts | 112 +++++++++++
src/editor/CodeMonaco.vue | 1 +
44 files changed, 2896 insertions(+), 21 deletions(-)
diff --git a/public/examples/ts/bar-brush.ts b/public/examples/ts/bar-brush.ts
index e08ee00..abb4cbd 100644
--- a/public/examples/ts/bar-brush.ts
+++ b/public/examples/ts/bar-brush.ts
@@ -96,7 +96,7 @@ myChart.on('brushSelected', function (params: any) {
brushed.push('[Series ' + sIdx + '] ' + rawIndices.join(', '));
}
- myChart.setOption({
+ myChart.setOption<echarts.EChartsOption>({
title: {
backgroundColor: '#333',
text: 'SELECTED DATA INDICES: \n' + brushed.join('\n'),
diff --git a/public/examples/ts/bar-drilldown.ts b/public/examples/ts/bar-drilldown.ts
index 2953641..864766c 100644
--- a/public/examples/ts/bar-drilldown.ts
+++ b/public/examples/ts/bar-drilldown.ts
@@ -69,7 +69,7 @@ myChart.on('click', function (event) {
if (!subData) {
return;
}
- myChart.setOption({
+ myChart.setOption<echarts.EChartsOption>({
xAxis: {
data: subData.data.map(function (item) {
return item[0];
@@ -96,7 +96,7 @@ myChart.on('click', function (event) {
fontSize: 18
},
onclick: function () {
- myChart.setOption(option);
+ myChart.setOption<echarts.EChartsOption>(option);
}
}]
});
diff --git a/public/examples/ts/bar-label-rotation.ts b/public/examples/ts/bar-label-rotation.ts
index 37249bd..9218f49 100644
--- a/public/examples/ts/bar-label-rotation.ts
+++ b/public/examples/ts/bar-label-rotation.ts
@@ -59,7 +59,7 @@ app.config = {
distance: app.config.distance
}
};
- myChart.setOption({
+ myChart.setOption<echarts.EChartsOption>({
series: [{
label: labelOption
}, {
diff --git a/public/examples/ts/bar-negative.ts b/public/examples/ts/bar-negative.ts
index 0c90d7d..a1c5aa2 100644
--- a/public/examples/ts/bar-negative.ts
+++ b/public/examples/ts/bar-negative.ts
@@ -32,7 +32,7 @@ option = {
axisTick: {
show: false
},
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
series: [
diff --git a/public/examples/ts/bar-race-country.ts b/public/examples/ts/bar-race-country.ts
index 9434e02..ee402de 100644
--- a/public/examples/ts/bar-race-country.ts
+++ b/public/examples/ts/bar-race-country.ts
@@ -119,7 +119,7 @@ $.when(
};
// console.log(option);
- myChart.setOption(option);
+ myChart.setOption<echarts.EChartsOption>(option);
for (var i = startIndex; i < years.length - 1; ++i) {
(function (i) {
@@ -135,7 +135,7 @@ $.when(
});
option.series[0].data = source;
option.graphic.elements[0].style.text = year;
- myChart.setOption(option);
+ myChart.setOption<echarts.EChartsOption>(option);
}
})
diff --git a/public/examples/ts/bar-race.ts b/public/examples/ts/bar-race.ts
index d6a77be..bc4de3d 100644
--- a/public/examples/ts/bar-race.ts
+++ b/public/examples/ts/bar-race.ts
@@ -53,7 +53,7 @@ function run () {
data[i] += Math.round(Math.random() * 200);
}
}
- myChart.setOption({
+ myChart.setOption<echarts.EChartsOption>({
series: [{
type: 'bar',
data
diff --git a/public/examples/ts/bar-stack.ts b/public/examples/ts/bar-stack.ts
index 9b08a17..eeb8721 100644
--- a/public/examples/ts/bar-stack.ts
+++ b/public/examples/ts/bar-stack.ts
@@ -24,7 +24,7 @@ option = {
xAxis: [
{
type: 'category',
- data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
diff --git a/public/examples/ts/calendar-pie.ts b/public/examples/ts/calendar-pie.ts
index 1d86fc2..fef76b3 100644
--- a/public/examples/ts/calendar-pie.ts
+++ b/public/examples/ts/calendar-pie.ts
@@ -104,14 +104,14 @@ option = {
let pieInitialized: boolean;
setTimeout(function () {
pieInitialized = true;
- myChart.setOption({
+ myChart.setOption<echarts.EChartsOption>({
series: getPieSeries(scatterData, myChart)
});
}, 10);
app.onresize = function () {
if (pieInitialized) {
- myChart.setOption({
+ myChart.setOption<echarts.EChartsOption>({
series: getPieSeriesUpdate(scatterData, myChart)
});
}
diff --git a/public/examples/ts/candlestick-brush.ts b/public/examples/ts/candlestick-brush.ts
index a80d741..d5ce863 100644
--- a/public/examples/ts/candlestick-brush.ts
+++ b/public/examples/ts/candlestick-brush.ts
@@ -45,7 +45,7 @@ $.get(ROOT_PATH + '/data/asset/data/stock-DJI.json', function (rawData) {
var data = splitData(rawData);
- myChart.setOption(option = {
+ myChart.setOption<echarts.EChartsOption>(option = {
animation: false,
legend: {
bottom: 10,
diff --git a/public/examples/ts/circle-packing-with-d3.ts b/public/examples/ts/circle-packing-with-d3.ts
index 81a9da3..50d8b09 100644
--- a/public/examples/ts/circle-packing-with-d3.ts
+++ b/public/examples/ts/circle-packing-with-d3.ts
@@ -198,7 +198,7 @@ function initChart(seriesData: DataItem[], maxDepth: number) {
}
};
- myChart.setOption(option);
+ myChart.setOption<echarts.EChartsOption>(option);
myChart.on('click', { seriesIndex: 0 }, function (params) {
drillDown(params.data.id);
@@ -214,7 +214,7 @@ function initChart(seriesData: DataItem[], maxDepth: number) {
// A trick to prevent d3-hierarchy from visiting parents in this algorithm.
displayRoot.parent = null;
- myChart.setOption({
+ myChart.setOption<echarts.EChartsOption>({
dataset: {
source: seriesData
}
diff --git a/public/examples/ts/confidence-band.ts b/public/examples/ts/confidence-band.ts
index f388c39..c4edba0 100644
--- a/public/examples/ts/confidence-band.ts
+++ b/public/examples/ts/confidence-band.ts
@@ -19,7 +19,7 @@ $.get(ROOT_PATH + '/data/asset/data/confidence-band.json', function (data: DataI
var base = -data.reduce(function (min, val) {
return Math.floor(Math.min(min, val.l));
}, Infinity);
- myChart.setOption(option = {
+ myChart.setOption<echarts.EChartsOption>(option = {
title: {
text: 'Confidence Band',
subtext: 'Example in MetricsGraphics.js',
diff --git a/public/examples/ts/data-transform-filter.ts b/public/examples/ts/data-transform-filter.ts
index fc35b53..48fe5c9 100644
--- a/public/examples/ts/data-transform-filter.ts
+++ b/public/examples/ts/data-transform-filter.ts
@@ -76,7 +76,7 @@ function run(_rawData: any) {
}]
};
- myChart.setOption(option);
+ myChart.setOption<echarts.EChartsOption>(option);
}
export {}
\ No newline at end of file
diff --git a/public/examples/ts/dataset-encode1.ts b/public/examples/ts/dataset-encode1.ts
index 59318f4..cfd4f5a 100644
--- a/public/examples/ts/dataset-encode1.ts
+++ b/public/examples/ts/dataset-encode1.ts
@@ -94,7 +94,7 @@ $.get(ROOT_PATH + '/data/asset/data/life-expectancy-table.json', function (data)
]
};
- myChart.setOption(option);
+ myChart.setOption<echarts.EChartsOption>(option);
});
export {}
\ No newline at end of file
diff --git a/public/examples/ts/dataset-link.ts b/public/examples/ts/dataset-link.ts
index 832337a..598a177 100644
--- a/public/examples/ts/dataset-link.ts
+++ b/public/examples/ts/dataset-link.ts
@@ -55,7 +55,7 @@ setTimeout(function () {
const xAxisInfo = event.axesInfo[0];
if (xAxisInfo) {
const dimension = xAxisInfo.value + 1;
- myChart.setOption({
+ myChart.setOption<echarts.EChartsOption>({
series: {
id: 'pie',
label: {
@@ -70,7 +70,7 @@ setTimeout(function () {
}
});
- myChart.setOption(option);
+ myChart.setOption<echarts.EChartsOption>(option);
});
export {}
\ No newline at end of file
diff --git a/public/examples/ts/dynamic-data.ts b/public/examples/ts/dynamic-data.ts
index f535740..c227b1a 100644
--- a/public/examples/ts/dynamic-data.ts
+++ b/public/examples/ts/dynamic-data.ts
@@ -127,7 +127,7 @@ setInterval(function (){
option.xAxis[1].data.shift();
option.xAxis[1].data.push(app.count++);
- myChart.setOption(option);
+ myChart.setOption<echarts.EChartsOption>(option);
}, 2100);
export {}
\ No newline at end of file
diff --git a/public/examples/ts/dynamic-data2.ts b/public/examples/ts/dynamic-data2.ts
index efb061d..ef2e928 100644
--- a/public/examples/ts/dynamic-data2.ts
+++ b/public/examples/ts/dynamic-data2.ts
@@ -72,7 +72,7 @@ setInterval(function () {
data.push(randomData());
}
- myChart.setOption({
+ myChart.setOption<echarts.EChartsOption>({
series: [{
data: data
}]
diff --git a/public/examples/ts/line-sections.ts b/public/examples/ts/line-sections.ts
new file mode 100644
index 0000000..f26fe5c
--- /dev/null
+++ b/public/examples/ts/line-sections.ts
@@ -0,0 +1,89 @@
+/*
+title: Distribution of Electricity
+category: line
+titleCN: 一天用电量分布
+difficulty: 3
+*/
+
+option = {
+ title: {
+ text: 'Distribution of Electricity',
+ subtext: 'Fake Data'
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45']
+ },
+ yAxis: {
+ type: 'value',
+ axisLabel: {
+ formatter: '{value} W'
+ },
+ axisPointer: {
+ snap: true
+ }
+ },
+ visualMap: {
+ show: false,
+ dimension: 0,
+ pieces: [{
+ lte: 6,
+ color: 'green'
+ }, {
+ gt: 6,
+ lte: 8,
+ color: 'red'
+ }, {
+ gt: 8,
+ lte: 14,
+ color: 'green'
+ }, {
+ gt: 14,
+ lte: 17,
+ color: 'red'
+ }, {
+ gt: 17,
+ color: 'green'
+ }]
+ },
+ series: [
+ {
+ name: 'Electricity',
+ type: 'line',
+ smooth: true,
+ data: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400],
+ markArea: {
+ itemStyle: {
+ color: 'rgba(255, 173, 177, 0.4)'
+ },
+ data: [ [{
+ name: 'Morning Peak',
+ xAxis: '07:30'
+ }, {
+ xAxis: '10:00'
+ }], [{
+ name: 'Evening Peak',
+ xAxis: '17:30'
+ }, {
+ xAxis: '21:15'
+ }] ]
+ }
+ }
+ ]
+};
+
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/line-simple.ts b/public/examples/ts/line-simple.ts
new file mode 100644
index 0000000..b662c68
--- /dev/null
+++ b/public/examples/ts/line-simple.ts
@@ -0,0 +1,22 @@
+/*
+title: Basic Line Chart
+category: line
+titleCN: 基础折线图
+difficulty: 0
+*/
+
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [150, 230, 224, 218, 135, 147, 260],
+ type: 'line'
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/line-smooth.ts b/public/examples/ts/line-smooth.ts
new file mode 100644
index 0000000..0dfa054
--- /dev/null
+++ b/public/examples/ts/line-smooth.ts
@@ -0,0 +1,22 @@
+/*
+title: Smoothed Line Chart
+category: line
+titleCN: 基础平滑折线图
+difficulty: 0
+*/
+
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [820, 932, 901, 934, 1290, 1330, 1320],
+ type: 'line',
+ smooth: true
+ }]
+};
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/line-stack.ts b/public/examples/ts/line-stack.ts
new file mode 100644
index 0000000..f852e10
--- /dev/null
+++ b/public/examples/ts/line-stack.ts
@@ -0,0 +1,71 @@
+/*
+title: Stacked Line Chart
+category: line
+titleCN: 折线图堆叠
+difficulty: 1
+*/
+
+option = {
+ title: {
+ text: 'Stacked Line'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: 'Email',
+ type: 'line',
+ stack: 'Total',
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: 'Union Ads',
+ type: 'line',
+ stack: 'Total',
+ data: [220, 182, 191, 234, 290, 330, 310]
+ },
+ {
+ name: 'Video Ads',
+ type: 'line',
+ stack: 'Total',
+ data: [150, 232, 201, 154, 190, 330, 410]
+ },
+ {
+ name: 'Direct',
+ type: 'line',
+ stack: 'Total',
+ data: [320, 332, 301, 334, 390, 330, 320]
+ },
+ {
+ name: 'Search Engine',
+ type: 'line',
+ stack: 'Total',
+ data: [820, 932, 901, 934, 1290, 1330, 1320]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/line-step.ts b/public/examples/ts/line-step.ts
new file mode 100644
index 0000000..892a036
--- /dev/null
+++ b/public/examples/ts/line-step.ts
@@ -0,0 +1,58 @@
+/*
+title: Step Line
+category: line
+titleCN: 阶梯折线图
+difficulty: 7
+*/
+
+option = {
+ title: {
+ text: 'Step Line'
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ legend: {
+ data: ['Step Start', 'Step Middle', 'Step End']
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {}
+ }
+ },
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [
+ {
+ name: 'Step Start',
+ type: 'line',
+ step: 'start',
+ data: [120, 132, 101, 134, 90, 230, 210]
+ },
+ {
+ name: 'Step Middle',
+ type: 'line',
+ step: 'middle',
+ data: [220, 282, 201, 234, 290, 430, 410]
+ },
+ {
+ name: 'Step End',
+ type: 'line',
+ step: 'end',
+ data: [450, 432, 401, 454, 590, 530, 510]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/line-style.ts b/public/examples/ts/line-style.ts
new file mode 100644
index 0000000..d06dada
--- /dev/null
+++ b/public/examples/ts/line-style.ts
@@ -0,0 +1,34 @@
+/*
+title: Line Style and Item Style
+category: line
+titleCN: 自定义折线图样式
+difficulty: 6
+*/
+
+option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'line',
+ symbol: 'triangle',
+ symbolSize: 20,
+ lineStyle: {
+ color: '#5470C6',
+ width: 4,
+ type: 'dashed'
+ },
+ itemStyle: {
+ borderWidth: 3,
+ borderColor: '#EE6666',
+ color: 'yellow'
+ }
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/line-tooltip-touch.ts b/public/examples/ts/line-tooltip-touch.ts
new file mode 100644
index 0000000..8b1b95a
--- /dev/null
+++ b/public/examples/ts/line-tooltip-touch.ts
@@ -0,0 +1,151 @@
+/*
+title: Tooltip and DataZoom on Mobile
+category: 'line, dataZoom'
+titleCN: 移动端上的 dataZoom 和 tooltip
+difficulty: 10
+*/
+
+let base = +new Date(2016, 9, 3);
+let oneDay = 24 * 3600 * 1000;
+let valueBase = Math.random() * 300;
+let valueBase2 = Math.random() * 50;
+let data = [];
+let data2 = [];
+
+for (var i = 1; i < 10; i++) {
+ var now = new Date(base += oneDay);
+ var dayStr = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('-');
+
+ valueBase = Math.round((Math.random() - 0.5) * 20 + valueBase);
+ valueBase <= 0 && (valueBase = Math.random() * 300);
+ data.push([dayStr, valueBase]);
+
+ valueBase2 = Math.round((Math.random() - 0.5) * 20 + valueBase2);
+ valueBase2 <= 0 && (valueBase2 = Math.random() * 50);
+ data2.push([dayStr, valueBase2]);
+}
+
+option = {
+ title: {
+ left: 'center',
+ text: 'Tootip and dataZoom on Mobile Device'
+ },
+ legend: {
+ top: 'bottom',
+ data: ['Intention']
+ },
+ tooltip: {
+ triggerOn: 'none',
+ position: function (pt) {
+ return [pt[0], 130];
+ }
+ },
+ toolbox: {
+ left: 'center',
+ itemSize: 25,
+ top: 55,
+ feature: {
+ dataZoom: {
+ yAxisIndex: 'none'
+ },
+ restore: {}
+ }
+ },
+ xAxis: {
+ type: 'time',
+ axisPointer: {
+ value: '2016-10-7',
+ snap: true,
+ lineStyle: {
+ color: '#7581BD',
+ width: 2
+ },
+ label: {
+ show: true,
+ formatter: function (params: any) {
+ return echarts.format.formatTime('yyyy-MM-dd', params.value);
+ },
+ backgroundColor: '#7581BD'
+ },
+ handle: {
+ show: true,
+ color: '#7581BD'
+ }
+ },
+ splitLine: {
+ show: false
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisTick: {
+ inside: true
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ inside: true,
+ formatter: '{value}\n'
+ },
+ z: 10
+ },
+ grid: {
+ top: 110,
+ left: 15,
+ right: 15,
+ height: 160
+ },
+ dataZoom: [{
+ type: 'inside',
+ throttle: 50
+ }],
+ series: [
+ {
+ name: 'Fake Data',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ sampling: 'average',
+ itemStyle: {
+ color: '#0770FF'
+ },
+ stack: 'a',
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(58,77,233,0.8)'
+ }, {
+ offset: 1,
+ color: 'rgba(58,77,233,0.3)'
+ }])
+ },
+ data: data
+ },
+ {
+ name: 'Fake Data',
+ type: 'line',
+ smooth: true,
+ stack: 'a',
+ symbol: 'circle',
+ symbolSize: 5,
+ sampling: 'average',
+ itemStyle: {
+ color: '#F2597F'
+ },
+ areaStyle: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(213,72,120,0.8)'
+ }, {
+ offset: 1,
+ color: 'rgba(213,72,120,0.3)'
+ }])
+ },
+ data: data2
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/line-y-category.ts b/public/examples/ts/line-y-category.ts
new file mode 100644
index 0000000..6f53112
--- /dev/null
+++ b/public/examples/ts/line-y-category.ts
@@ -0,0 +1,53 @@
+/*
+title: Line Y Category
+category: line
+titleCN: 垂直折线图（Y轴为类目轴）
+difficulty: 8
+*/
+
+option = {
+ legend: {
+ data: ['Altitude (km) vs. temperature (°C)']
+ },
+ tooltip: {
+ trigger: 'axis',
+ formatter: 'Temperature : <br/>{b}km : {c}°C'
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true
+ },
+ xAxis: {
+ type: 'value',
+ axisLabel: {
+ formatter: '{value} °C'
+ }
+ },
+ yAxis: {
+ type: 'category',
+ axisLine: {onZero: false},
+ axisLabel: {
+ formatter: '{value} km'
+ },
+ boundaryGap: false,
+ data: ['0', '10', '20', '30', '40', '50', '60', '70', '80']
+ },
+ series: [
+ {
+ name: 'Altitude (km) vs. temperature (°C)',
+ type: 'line',
+ symbolSize: 10,
+ symbol: 'circle',
+ smooth: true,
+ lineStyle: {
+ width: 3,
+ shadowColor: 'rgba(0,0,0,0.3)',
+ shadowBlur: 10,
+ shadowOffsetY: 8
+ },
+ data:[15, -50, -56.5, -46.5, -22.1, -2.5, -27.7, -55.7, -76.5]
+ }
+ ]
+};
\ No newline at end of file
diff --git a/public/examples/ts/lines-airline.ts b/public/examples/ts/lines-airline.ts
new file mode 100644
index 0000000..3aacf61
--- /dev/null
+++ b/public/examples/ts/lines-airline.ts
@@ -0,0 +1,66 @@
+/*
+title: 65k+ Airline
+category: 'map, lines'
+titleCN: 65k+ 飞机航线
+*/
+
+myChart.showLoading();
+
+$.get(ROOT_PATH + '/data/asset/data/flights.json', function (data) {
+
+ myChart.hideLoading();
+
+ function getAirportCoord(idx: number) {
+ return [data.airports[idx][3], data.airports[idx][4]];
+ }
+ var routes = data.routes.map(function (airline: number[]) {
+ return [
+ getAirportCoord(airline[1]),
+ getAirportCoord(airline[2])
+ ];
+ });
+
+ myChart.setOption(option = {
+ title: {
+ text: 'World Flights',
+ left: 'center',
+ textStyle: {
+ color: '#eee'
+ }
+ },
+ backgroundColor: '#003',
+ tooltip: {
+ formatter: function (param: any) {
+ var route = data.routes[param.dataIndex];
+ return data.airports[route[1]][1] + ' > ' + data.airports[route[2]][1];
+ }
+ },
+ geo: {
+ map: 'world',
+ left: 0,
+ right: 0,
+ silent: true,
+ roam: true,
+ itemStyle: {
+ borderColor: '#003',
+ color: '#005'
+ }
+ },
+ series: [{
+ type: 'lines',
+ coordinateSystem: 'geo',
+ data: routes,
+ large: true,
+ largeThreshold: 100,
+ lineStyle: {
+ opacity: 0.05,
+ width: 0.5,
+ curveness: 0.3
+ },
+ // 设置混合模式为叠加
+ blendMode: 'lighter'
+ }]
+ });
+});
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/lines-bmap-bus.ts b/public/examples/ts/lines-bmap-bus.ts
new file mode 100644
index 0000000..c7c13da
--- /dev/null
+++ b/public/examples/ts/lines-bmap-bus.ts
@@ -0,0 +1,150 @@
+/*
+title: Bus Lines of Beijing - Baidu Map
+category: 'map, lines'
+tags: bmap
+titleCN: 北京公交路线 - 百度地图
+*/
+
+$.get(ROOT_PATH + '/data/asset/data/lines-bus.json', function(data) {
+ let busLines = [].concat.apply([], data.map(function (busLine: number[], idx: number) {
+ let prevPt: number[] = [];
+ let points: number[][] = [];
+ for (let i = 0; i < busLine.length; i += 2) {
+ let pt = [busLine[i], busLine[i + 1]];
+ if (i > 0) {
+ pt = [
+ prevPt[0] + pt[0],
+ prevPt[1] + pt[1]
+ ];
+ }
+ prevPt = pt;
+
+ points.push([pt[0] / 1e4, pt[1] / 1e4]);
+ }
+ return {
+ coords: points
+ };
+ }));
+ myChart.setOption(option = {
+ bmap: {
+ center: [116.46, 39.92],
+ zoom: 10,
+ roam: true,
+ mapStyle: {
+ styleJson: [{
+ 'featureType': 'water',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'land',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#f3f3f3'
+ }
+ }, {
+ 'featureType': 'railway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'highway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#fdfdfd'
+ }
+ }, {
+ 'featureType': 'highway',
+ 'elementType': 'labels',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'arterial',
+ 'elementType': 'geometry',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ }, {
+ 'featureType': 'arterial',
+ 'elementType': 'geometry.fill',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ }, {
+ 'featureType': 'poi',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'green',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'subway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'manmade',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'local',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'arterial',
+ 'elementType': 'labels',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'boundary',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ }, {
+ 'featureType': 'building',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'label',
+ 'elementType': 'labels.text.fill',
+ 'stylers': {
+ 'color': '#999999'
+ }
+ }]
+ }
+ },
+ series: [{
+ type: 'lines',
+ coordinateSystem: 'bmap',
+ polyline: true,
+ data: busLines,
+ silent: true,
+ lineStyle: {
+ color: 'rgb(200, 35, 45)',
+ opacity: 0.2,
+ width: 1
+ },
+ progressiveThreshold: 500,
+ progressive: 200
+ }]
+ });
+});
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/lines-bmap-effect.ts b/public/examples/ts/lines-bmap-effect.ts
new file mode 100644
index 0000000..7d8f77c
--- /dev/null
+++ b/public/examples/ts/lines-bmap-effect.ts
@@ -0,0 +1,197 @@
+/*
+title: Bus Lines of Beijing - Line Effect
+category: 'map, lines'
+tags: bmap
+titleCN: 北京公交路线 - 线特效
+shotDelay: 2000
+*/
+
+$.get(ROOT_PATH + '/data/asset/data/lines-bus.json', function(data) {
+ let hStep = 300 / (data.length - 1);
+ let busLines = [].concat.apply([], data.map(function (busLine: number[], idx: number) {
+ let prevPt: number[] = [];
+ let points: number[][] = [];
+ for (let i = 0; i < busLine.length; i += 2) {
+ let pt = [busLine[i], busLine[i + 1]];
+ if (i > 0) {
+ pt = [
+ prevPt[0] + pt[0],
+ prevPt[1] + pt[1]
+ ];
+ }
+ prevPt = pt;
+
+ points.push([pt[0] / 1e4, pt[1] / 1e4]);
+ }
+ return {
+ coords: points,
+ lineStyle: {
+ normal: {
+ color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
+ }
+ }
+ };
+ }));
+ myChart.setOption(option = {
+ bmap: {
+ center: [116.46, 39.92],
+ zoom: 10,
+ roam: true,
+ mapStyle: {
+ 'styleJson': [
+ {
+ 'featureType': 'water',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#031628'
+ }
+ },
+ {
+ 'featureType': 'land',
+ 'elementType': 'geometry',
+ 'stylers': {
+ 'color': '#000102'
+ }
+ },
+ {
+ 'featureType': 'highway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ },
+ {
+ 'featureType': 'arterial',
+ 'elementType': 'geometry.fill',
+ 'stylers': {
+ 'color': '#000000'
+ }
+ },
+ {
+ 'featureType': 'arterial',
+ 'elementType': 'geometry.stroke',
+ 'stylers': {
+ 'color': '#0b3d51'
+ }
+ },
+ {
+ 'featureType': 'local',
+ 'elementType': 'geometry',
+ 'stylers': {
+ 'color': '#000000'
+ }
+ },
+ {
+ 'featureType': 'railway',
+ 'elementType': 'geometry.fill',
+ 'stylers': {
+ 'color': '#000000'
+ }
+ },
+ {
+ 'featureType': 'railway',
+ 'elementType': 'geometry.stroke',
+ 'stylers': {
+ 'color': '#08304b'
+ }
+ },
+ {
+ 'featureType': 'subway',
+ 'elementType': 'geometry',
+ 'stylers': {
+ 'lightness': -70
+ }
+ },
+ {
+ 'featureType': 'building',
+ 'elementType': 'geometry.fill',
+ 'stylers': {
+ 'color': '#000000'
+ }
+ },
+ {
+ 'featureType': 'all',
+ 'elementType': 'labels.text.fill',
+ 'stylers': {
+ 'color': '#857f7f'
+ }
+ },
+ {
+ 'featureType': 'all',
+ 'elementType': 'labels.text.stroke',
+ 'stylers': {
+ 'color': '#000000'
+ }
+ },
+ {
+ 'featureType': 'building',
+ 'elementType': 'geometry',
+ 'stylers': {
+ 'color': '#022338'
+ }
+ },
+ {
+ 'featureType': 'green',
+ 'elementType': 'geometry',
+ 'stylers': {
+ 'color': '#062032'
+ }
+ },
+ {
+ 'featureType': 'boundary',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#465b6c'
+ }
+ },
+ {
+ 'featureType': 'manmade',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#022338'
+ }
+ },
+ {
+ 'featureType': 'label',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }
+ ]
+ }
+ },
+ series: [{
+ type: 'lines',
+ coordinateSystem: 'bmap',
+ polyline: true,
+ data: busLines,
+ silent: true,
+ lineStyle: {
+ // color: '#c23531',
+ // color: 'rgb(200, 35, 45)',
+ opacity: 0.2,
+ width: 1
+ },
+ progressiveThreshold: 500,
+ progressive: 200
+ }, {
+ type: 'lines',
+ coordinateSystem: 'bmap',
+ polyline: true,
+ data: busLines,
+ lineStyle: {
+ width: 0
+ },
+ effect: {
+ constantSpeed: 20,
+ show: true,
+ trailLength: 0.1,
+ symbolSize: 1.5
+ },
+ zlevel: 1
+ }]
+ });
+});
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/lines-bmap.ts b/public/examples/ts/lines-bmap.ts
new file mode 100644
index 0000000..f110f79
--- /dev/null
+++ b/public/examples/ts/lines-bmap.ts
@@ -0,0 +1,138 @@
+/*
+title: A Hiking Trail in Hangzhou - Baidu Map
+category: 'map, lines'
+tags: bmap
+titleCN: 杭州热门步行路线 - 百度地图
+*/
+
+$.get(ROOT_PATH + '/data/asset/data/hangzhou-tracks.json', function(data: {
+ coord: number[]
+}[][]) {
+
+ const lines = data.map(function (track) {
+ return {
+ coords: track.map(function (seg, idx) {
+ return seg.coord;
+ })
+ };
+ });
+ myChart.setOption(option = {
+ bmap: {
+ center: [120.13066322374, 30.240018034923],
+ zoom: 14,
+ roam: true,
+ mapStyle: {
+ styleJson: [{
+ 'featureType': 'water',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'land',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#f3f3f3'
+ }
+ }, {
+ 'featureType': 'railway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'highway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#fdfdfd'
+ }
+ }, {
+ 'featureType': 'highway',
+ 'elementType': 'labels',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'arterial',
+ 'elementType': 'geometry',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ }, {
+ 'featureType': 'arterial',
+ 'elementType': 'geometry.fill',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ }, {
+ 'featureType': 'poi',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'green',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'subway',
+ 'elementType': 'all',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'manmade',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'local',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'arterial',
+ 'elementType': 'labels',
+ 'stylers': {
+ 'visibility': 'off'
+ }
+ }, {
+ 'featureType': 'boundary',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#fefefe'
+ }
+ }, {
+ 'featureType': 'building',
+ 'elementType': 'all',
+ 'stylers': {
+ 'color': '#d1d1d1'
+ }
+ }, {
+ 'featureType': 'label',
+ 'elementType': 'labels.text.fill',
+ 'stylers': {
+ 'color': '#999999'
+ }
+ }]
+ }
+ },
+ series: [{
+ type: 'lines',
+ coordinateSystem: 'bmap',
+ data: lines,
+ polyline: true,
+ lineStyle: {
+ color: 'purple',
+ opacity: 0.6,
+ width: 1
+ }
+ }]
+ });
+});
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/lines-ny.ts b/public/examples/ts/lines-ny.ts
new file mode 100644
index 0000000..bc47603
--- /dev/null
+++ b/public/examples/ts/lines-ny.ts
@@ -0,0 +1,91 @@
+/*
+title: Use lines to draw 1 million ny streets.
+titleCN: 使用线图绘制近 100 万的纽约街道数据
+category: 'map, lines'
+shotDelay: 1000
+*/
+
+
+var CHUNK_COUNT = 32;
+
+var dataCount = 0;
+
+function fetchData(idx) {
+ if (idx >= CHUNK_COUNT) {
+ return;
+ }
+ var dataURL = ROOT_PATH + '/data/asset/data/links-ny/links_ny_' + idx + '.bin';
+ var xhr = new XMLHttpRequest();
+ xhr.open('GET', dataURL, true);
+ xhr.responseType = 'arraybuffer';
+
+ xhr.onload = function (e) {
+ var rawData = new Float32Array(this.response);
+ var data = new Float64Array(rawData.length - 2);
+ var offsetX = rawData[0];
+ var offsetY = rawData[1];
+ var off = 0;
+ var addedDataCount = 0;
+ for (var i = 2; i < rawData.length;) {
+ var count = rawData[i++];
+ data[off++] = count;
+ for (var k = 0; k < count; k++) {
+ var x = rawData[i++] + offsetX;
+ var y = rawData[i++] + offsetY;
+ data[off++] = x;
+ data[off++] = y;
+
+ addedDataCount++;
+ }
+ }
+
+ myChart.appendData({
+ seriesIndex: 0,
+ data: data
+ });
+
+ dataCount += addedDataCount;
+
+ fetchData(idx + 1);
+ }
+
+ xhr.send();
+}
+
+option = {
+ progressive: 20000,
+ backgroundColor: '#111',
+ geo: {
+ center: [-74.04327099998152, 40.86737600240287],
+ zoom: 360,
+ map: 'world',
+ roam: true,
+ silent: true,
+ itemStyle: {
+ color: 'transparent',
+ borderColor: 'rgba(255,255,255,0.1)',
+ borderWidth: 1
+ }
+ },
+ series: [{
+ type: 'lines',
+
+ coordinateSystem: 'geo',
+
+ blendMode: 'lighter',
+
+ dimensions: ['value'],
+
+ data: new Float64Array(),
+ polyline: true,
+ large: true,
+
+ lineStyle: {
+ color: 'orange',
+ width: 0.5,
+ opacity: 0.3
+ }
+ }]
+};
+
+fetchData(0);
\ No newline at end of file
diff --git a/public/examples/ts/map-HK.ts b/public/examples/ts/map-HK.ts
new file mode 100644
index 0000000..2b7e628
--- /dev/null
+++ b/public/examples/ts/map-HK.ts
@@ -0,0 +1,98 @@
+/*
+title: Population Density of HongKong (2011)
+category: map
+titleCN: 香港18区人口密度 （2011）
+*/
+
+myChart.showLoading();
+
+$.get(ROOT_PATH + '/data/asset/geo/HK.json', function (geoJson) {
+
+ myChart.hideLoading();
+
+ echarts.registerMap('HK', geoJson);
+
+ myChart.setOption(option = {
+ title: {
+ text: 'Population Density of Hong Kong （2011）',
+ subtext: 'Data from Wikipedia',
+ sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
+ },
+ tooltip: {
+ trigger: 'item',
+ formatter: '{b}<br/>{c} (p / km2)'
+ },
+ toolbox: {
+ show: true,
+ orient: 'vertical',
+ left: 'right',
+ top: 'center',
+ feature: {
+ dataView: {readOnly: false},
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ visualMap: {
+ min: 800,
+ max: 50000,
+ text: ['High', 'Low'],
+ realtime: false,
+ calculable: true,
+ inRange: {
+ color: ['lightskyblue', 'yellow', 'orangered']
+ }
+ },
+ series: [
+ {
+ name: '香港18区人口密度',
+ type: 'map',
+ map: 'HK',
+ label: {
+ show: true
+ },
+ data: [
+ {name: '中西区', value: 20057.34},
+ {name: '湾仔', value: 15477.48},
+ {name: '东区', value: 31686.1},
+ {name: '南区', value: 6992.6},
+ {name: '油尖旺', value: 44045.49},
+ {name: '深水埗', value: 40689.64},
+ {name: '九龙城', value: 37659.78},
+ {name: '黄大仙', value: 45180.97},
+ {name: '观塘', value: 55204.26},
+ {name: '葵青', value: 21900.9},
+ {name: '荃湾', value: 4918.26},
+ {name: '屯门', value: 5881.84},
+ {name: '元朗', value: 4178.01},
+ {name: '北区', value: 2227.92},
+ {name: '大埔', value: 2180.98},
+ {name: '沙田', value: 9172.94},
+ {name: '西贡', value: 3368},
+ {name: '离岛', value: 806.98}
+ ],
+ // 自定义名称映射
+ nameMap: {
+ 'Central and Western': '中西区',
+ 'Eastern': '东区',
+ 'Islands': '离岛',
+ 'Kowloon City': '九龙城',
+ 'Kwai Tsing': '葵青',
+ 'Kwun Tong': '观塘',
+ 'North': '北区',
+ 'Sai Kung': '西贡',
+ 'Sha Tin': '沙田',
+ 'Sham Shui Po': '深水埗',
+ 'Southern': '南区',
+ 'Tai Po': '大埔',
+ 'Tsuen Wan': '荃湾',
+ 'Tuen Mun': '屯门',
+ 'Wan Chai': '湾仔',
+ 'Wong Tai Sin': '黄大仙',
+ 'Yau Tsim Mong': '油尖旺',
+ 'Yuen Long': '元朗'
+ }
+ }
+ ]
+ });
+});
\ No newline at end of file
diff --git a/public/examples/ts/map-bar-morph.ts b/public/examples/ts/map-bar-morph.ts
new file mode 100644
index 0000000..068d9dd
--- /dev/null
+++ b/public/examples/ts/map-bar-morph.ts
@@ -0,0 +1,149 @@
+/*
+title: Morphing between Map and Bar
+category: map, animation
+titleCN: 地图柱状图变形动画
+videoStart: 2000
+videoEnd: 6000
+*/
+
+myChart.showLoading();
+
+$.get(ROOT_PATH + '/data/asset/geo/USA.json', function (usaJson) {
+ myChart.hideLoading();
+
+ echarts.registerMap('USA', usaJson, {
+ Alaska: { // 把阿拉斯加移到美国主大陆左下方
+ left: -131,
+ top: 25,
+ width: 15
+ },
+ Hawaii: {
+ left: -110, // 夏威夷
+ top: 28,
+ width: 5
+ },
+ 'Puerto Rico': { // 波多黎各
+ left: -76,
+ top: 26,
+ width: 2
+ }
+ });
+
+
+ var data = [
+ {name: 'Alabama', value: 4822023},
+ {name: 'Alaska', value: 731449},
+ {name: 'Arizona', value: 6553255},
+ {name: 'Arkansas', value: 2949131},
+ {name: 'California', value: 38041430},
+ {name: 'Colorado', value: 5187582},
+ {name: 'Connecticut', value: 3590347},
+ {name: 'Delaware', value: 917092},
+ {name: 'District of Columbia', value: 632323},
+ {name: 'Florida', value: 19317568},
+ {name: 'Georgia', value: 9919945},
+ {name: 'Hawaii', value: 1392313},
+ {name: 'Idaho', value: 1595728},
+ {name: 'Illinois', value: 12875255},
+ {name: 'Indiana', value: 6537334},
+ {name: 'Iowa', value: 3074186},
+ {name: 'Kansas', value: 2885905},
+ {name: 'Kentucky', value: 4380415},
+ {name: 'Louisiana', value: 4601893},
+ {name: 'Maine', value: 1329192},
+ {name: 'Maryland', value: 5884563},
+ {name: 'Massachusetts', value: 6646144},
+ {name: 'Michigan', value: 9883360},
+ {name: 'Minnesota', value: 5379139},
+ {name: 'Mississippi', value: 2984926},
+ {name: 'Missouri', value: 6021988},
+ {name: 'Montana', value: 1005141},
+ {name: 'Nebraska', value: 1855525},
+ {name: 'Nevada', value: 2758931},
+ {name: 'New Hampshire', value: 1320718},
+ {name: 'New Jersey', value: 8864590},
+ {name: 'New Mexico', value: 2085538},
+ {name: 'New York', value: 19570261},
+ {name: 'North Carolina', value: 9752073},
+ {name: 'North Dakota', value: 699628},
+ {name: 'Ohio', value: 11544225},
+ {name: 'Oklahoma', value: 3814820},
+ {name: 'Oregon', value: 3899353},
+ {name: 'Pennsylvania', value: 12763536},
+ {name: 'Rhode Island', value: 1050292},
+ {name: 'South Carolina', value: 4723723},
+ {name: 'South Dakota', value: 833354},
+ {name: 'Tennessee', value: 6456243},
+ {name: 'Texas', value: 26059203},
+ {name: 'Utah', value: 2855287},
+ {name: 'Vermont', value: 626011},
+ {name: 'Virginia', value: 8185867},
+ {name: 'Washington', value: 6897012},
+ {name: 'West Virginia', value: 1855413},
+ {name: 'Wisconsin', value: 5726398},
+ {name: 'Wyoming', value: 576412},
+ {name: 'Puerto Rico', value: 3667084}
+ ];
+
+ data.sort(function (a, b) {
+ return a.value - b.value;
+ });
+
+ const mapOption: echarts.EChartsOption = {
+ visualMap: {
+ left: 'right',
+ min: 500000,
+ max: 38000000,
+ inRange: {
+ color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+ },
+ text: ['High', 'Low'],
+ calculable: true
+ },
+ series: [
+ {
+ id: 'population',
+ type: 'map',
+ roam: true,
+ map: 'USA',
+ animationDurationUpdate: 1000,
+ universalTransition: true,
+ data: data
+ }
+ ]
+ };
+
+ const barOption: echarts.EChartsOption = {
+ xAxis: {
+ type: 'value'
+ },
+ yAxis: {
+ type: 'category',
+ axisLabel: {
+ rotate: 30
+ },
+ data: data.map(function (item) {
+ return item.name;
+ })
+ },
+ animationDurationUpdate: 1000,
+ series: {
+ type: 'bar',
+ id: 'population',
+ data: data.map(function (item) {
+ return item.value;
+ }),
+ universalTransition: true
+ }
+ };
+
+ let currentOption = mapOption;
+ myChart.setOption(mapOption);
+
+ setInterval(function () {
+ currentOption = currentOption === mapOption ? barOption : mapOption;
+ myChart.setOption(currentOption, true);
+ }, 2000);
+});
+
+export {};
\ No newline at end of file
diff --git a/public/examples/ts/map-usa.ts b/public/examples/ts/map-usa.ts
new file mode 100644
index 0000000..01ee7ed
--- /dev/null
+++ b/public/examples/ts/map-usa.ts
@@ -0,0 +1,139 @@
+/*
+title: USA Population Estimates (2012)
+category: map
+titleCN: 2012 年美国人口统计
+*/
+
+myChart.showLoading();
+
+$.get(ROOT_PATH + '/data/asset/geo/USA.json', function (usaJson) {
+ myChart.hideLoading();
+
+ echarts.registerMap('USA', usaJson, {
+ Alaska: { // 把阿拉斯加移到美国主大陆左下方
+ left: -131,
+ top: 25,
+ width: 15
+ },
+ Hawaii: {
+ left: -110, // 夏威夷
+ top: 28,
+ width: 5
+ },
+ 'Puerto Rico': { // 波多黎各
+ left: -76,
+ top: 26,
+ width: 2
+ }
+ });
+ option = {
+ title: {
+ text: 'USA Population Estimates (2012)',
+ subtext: 'Data from www.census.gov',
+ sublink: 'http://www.census.gov/popest/data/datasets.html',
+ left: 'right'
+ },
+ tooltip: {
+ trigger: 'item',
+ showDelay: 0,
+ transitionDuration: 0.2,
+ formatter: function (params: any) {
+ const value = (params.value + '').split('.');
+ const valueStr = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
+ return params.seriesName + '<br/>' + params.name + ': ' + valueStr;
+ }
+ },
+ visualMap: {
+ left: 'right',
+ min: 500000,
+ max: 38000000,
+ inRange: {
+ color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
+ },
+ text: ['High', 'Low'], // 文本，默认为数值文本
+ calculable: true
+ },
+ toolbox: {
+ show: true,
+ //orient: 'vertical',
+ left: 'left',
+ top: 'top',
+ feature: {
+ dataView: {readOnly: false},
+ restore: {},
+ saveAsImage: {}
+ }
+ },
+ series: [
+ {
+ name: 'USA PopEstimates',
+ type: 'map',
+ roam: true,
+ map: 'USA',
+ emphasis: {
+ label: {
+ show: true
+ }
+ },
+ data: [
+ {name: 'Alabama', value: 4822023},
+ {name: 'Alaska', value: 731449},
+ {name: 'Arizona', value: 6553255},
+ {name: 'Arkansas', value: 2949131},
+ {name: 'California', value: 38041430},
+ {name: 'Colorado', value: 5187582},
+ {name: 'Connecticut', value: 3590347},
+ {name: 'Delaware', value: 917092},
+ {name: 'District of Columbia', value: 632323},
+ {name: 'Florida', value: 19317568},
+ {name: 'Georgia', value: 9919945},
+ {name: 'Hawaii', value: 1392313},
+ {name: 'Idaho', value: 1595728},
+ {name: 'Illinois', value: 12875255},
+ {name: 'Indiana', value: 6537334},
+ {name: 'Iowa', value: 3074186},
+ {name: 'Kansas', value: 2885905},
+ {name: 'Kentucky', value: 4380415},
+ {name: 'Louisiana', value: 4601893},
+ {name: 'Maine', value: 1329192},
+ {name: 'Maryland', value: 5884563},
+ {name: 'Massachusetts', value: 6646144},
+ {name: 'Michigan', value: 9883360},
+ {name: 'Minnesota', value: 5379139},
+ {name: 'Mississippi', value: 2984926},
+ {name: 'Missouri', value: 6021988},
+ {name: 'Montana', value: 1005141},
+ {name: 'Nebraska', value: 1855525},
+ {name: 'Nevada', value: 2758931},
+ {name: 'New Hampshire', value: 1320718},
+ {name: 'New Jersey', value: 8864590},
+ {name: 'New Mexico', value: 2085538},
+ {name: 'New York', value: 19570261},
+ {name: 'North Carolina', value: 9752073},
+ {name: 'North Dakota', value: 699628},
+ {name: 'Ohio', value: 11544225},
+ {name: 'Oklahoma', value: 3814820},
+ {name: 'Oregon', value: 3899353},
+ {name: 'Pennsylvania', value: 12763536},
+ {name: 'Rhode Island', value: 1050292},
+ {name: 'South Carolina', value: 4723723},
+ {name: 'South Dakota', value: 833354},
+ {name: 'Tennessee', value: 6456243},
+ {name: 'Texas', value: 26059203},
+ {name: 'Utah', value: 2855287},
+ {name: 'Vermont', value: 626011},
+ {name: 'Virginia', value: 8185867},
+ {name: 'Washington', value: 6897012},
+ {name: 'West Virginia', value: 1855413},
+ {name: 'Wisconsin', value: 5726398},
+ {name: 'Wyoming', value: 576412},
+ {name: 'Puerto Rico', value: 3667084}
+ ]
+ }
+ ]
+ };
+
+ myChart.setOption(option);
+});
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/mix-line-bar.ts b/public/examples/ts/mix-line-bar.ts
new file mode 100644
index 0000000..f26b1b3
--- /dev/null
+++ b/public/examples/ts/mix-line-bar.ts
@@ -0,0 +1,81 @@
+/*
+title: Mixed Line and Bar
+category: bar
+titleCN: 折柱混合
+difficulty: 4
+*/
+
+option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross',
+ crossStyle: {
+ color: '#999'
+ }
+ }
+ },
+ toolbox: {
+ feature: {
+ dataView: {show: true, readOnly: false},
+ magicType: {show: true, type: ['line', 'bar']},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ legend: {
+ data: ['Evaporation', 'Precipitation', 'Temperature']
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+ axisPointer: {
+ type: 'shadow'
+ }
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: 'Precipitation',
+ min: 0,
+ max: 250,
+ interval: 50,
+ axisLabel: {
+ formatter: '{value} ml'
+ }
+ },
+ {
+ type: 'value',
+ name: 'Temperature',
+ min: 0,
+ max: 25,
+ interval: 5,
+ axisLabel: {
+ formatter: '{value} °C'
+ }
+ }
+ ],
+ series: [
+ {
+ name: 'Evaporation',
+ type: 'bar',
+ data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+ },
+ {
+ name: 'Precipitation',
+ type: 'bar',
+ data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+ },
+ {
+ name: 'Temperature',
+ type: 'line',
+ yAxisIndex: 1,
+ data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+ }
+ ]
+};
+
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/mix-zoom-on-value.ts b/public/examples/ts/mix-zoom-on-value.ts
new file mode 100644
index 0000000..5648d98
--- /dev/null
+++ b/public/examples/ts/mix-zoom-on-value.ts
@@ -0,0 +1,103 @@
+/*
+title: Mix Zoom On Value
+category: bar
+titleCN: 多数值轴轴缩放
+difficulty: 4
+*/
+
+myChart.showLoading();
+
+$.get(ROOT_PATH + '/data/asset/data/obama_budget_proposal_2012.list.json', function (obama_budget_2012) {
+ myChart.hideLoading();
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ label: {
+ show: true
+ }
+ }
+ },
+ toolbox: {
+ show: true,
+ feature: {
+ mark: {show: true},
+ dataView: {show: true, readOnly: false},
+ magicType: {show: true, type: ['line', 'bar']},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ calculable: true,
+ legend: {
+ data: ['Growth', 'Budget 2011', 'Budget 2012'],
+ itemGap: 5
+ },
+ grid: {
+ top: '12%',
+ left: '1%',
+ right: '10%',
+ containLabel: true
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: obama_budget_2012.names
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: 'Budget (million USD)',
+ axisLabel: {
+ formatter: function (a: number) {
+ a = +a;
+ return isFinite(a)
+ ? echarts.format.addCommas(+a / 1000)
+ : '';
+ }
+ }
+ }
+ ],
+ dataZoom: [
+ {
+ show: true,
+ start: 94,
+ end: 100
+ },
+ {
+ type: 'inside',
+ start: 94,
+ end: 100
+ },
+ {
+ show: true,
+ yAxisIndex: 0,
+ filterMode: 'empty',
+ width: 30,
+ height: '80%',
+ showDataShadow: false,
+ left: '93%'
+ }
+ ],
+ series: [
+ {
+ name: 'Budget 2011',
+ type: 'bar',
+ data: obama_budget_2012.budget2011List
+ },
+ {
+ name: 'Budget 2012',
+ type: 'bar',
+ data: obama_budget_2012.budget2012List
+ }
+ ]
+ };
+
+ myChart.setOption(option);
+
+});
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/multiple-x-axis.ts b/public/examples/ts/multiple-x-axis.ts
new file mode 100644
index 0000000..a7086be
--- /dev/null
+++ b/public/examples/ts/multiple-x-axis.ts
@@ -0,0 +1,97 @@
+/*
+title: Multiple X Axes
+category: line
+titleCN: 多 X 轴
+difficulty: 4
+*/
+
+const colors = ['#5470C6', '#EE6666'];
+
+option = {
+ color: colors,
+
+ tooltip: {
+ trigger: 'none',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ legend: {
+ },
+ grid: {
+ top: 70,
+ bottom: 50
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLine: {
+ onZero: false,
+ lineStyle: {
+ color: colors[1]
+ }
+ },
+ axisPointer: {
+ label: {
+ formatter: function (params: any) {
+ return 'Precipitation ' + params.value
+ + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
+ }
+ }
+ },
+ data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
+ },
+ {
+ type: 'category',
+ axisTick: {
+ alignWithLabel: true
+ },
+ axisLine: {
+ onZero: false,
+ lineStyle: {
+ color: colors[0]
+ }
+ },
+ axisPointer: {
+ label: {
+ formatter: function (params: any) {
+ return 'Precipitation ' + params.value
+ + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
+ }
+ }
+ },
+ data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value'
+ }
+ ],
+ series: [
+ {
+ name: 'Precipitation(2015)',
+ type: 'line',
+ xAxisIndex: 1,
+ smooth: true,
+ emphasis: {
+ focus: 'series'
+ },
+ data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+ },
+ {
+ name: 'Precipitation(2016)',
+ type: 'line',
+ smooth: true,
+ emphasis: {
+ focus: 'series'
+ },
+ data: [3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7]
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/multiple-y-axis.ts b/public/examples/ts/multiple-y-axis.ts
new file mode 100644
index 0000000..e14a904
--- /dev/null
+++ b/public/examples/ts/multiple-y-axis.ts
@@ -0,0 +1,111 @@
+/*
+title: Multiple Y Axes
+category: bar
+titleCN: 多 Y 轴示例
+difficulty: 4
+*/
+
+const colors = ['#5470C6', '#91CC75', '#EE6666'];
+
+option = {
+ color: colors,
+
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ grid: {
+ right: '20%'
+ },
+ toolbox: {
+ feature: {
+ dataView: {show: true, readOnly: false},
+ restore: {show: true},
+ saveAsImage: {show: true}
+ }
+ },
+ legend: {
+ data: ['Evaporation', 'Precipitation', 'Temperature']
+ },
+ xAxis: [
+ {
+ type: 'category',
+ axisTick: {
+ alignWithLabel: true
+ },
+ data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
+ }
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ name: 'Evaporation',
+ min: 0,
+ max: 250,
+ position: 'right',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colors[0]
+ }
+ },
+ axisLabel: {
+ formatter: '{value} ml'
+ }
+ },
+ {
+ type: 'value',
+ name: 'Precipitation',
+ min: 0,
+ max: 250,
+ position: 'right',
+ offset: 80,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colors[1]
+ }
+ },
+ axisLabel: {
+ formatter: '{value} ml'
+ }
+ },
+ {
+ type: 'value',
+ name: '温度',
+ min: 0,
+ max: 25,
+ position: 'left',
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: colors[2]
+ }
+ },
+ axisLabel: {
+ formatter: '{value} °C'
+ }
+ }
+ ],
+ series: [
+ {
+ name: 'Evaporation',
+ type: 'bar',
+ data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
+ },
+ {
+ name: 'Precipitation',
+ type: 'bar',
+ yAxisIndex: 1,
+ data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
+ },
+ {
+ name: 'Temperature',
+ type: 'line',
+ yAxisIndex: 2,
+ data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
+ }
+ ]
+};
diff --git a/public/examples/ts/parallel-aqi.ts b/public/examples/ts/parallel-aqi.ts
new file mode 100644
index 0000000..3f82da0
--- /dev/null
+++ b/public/examples/ts/parallel-aqi.ts
@@ -0,0 +1,219 @@
+/*
+title: Parallel Aqi
+category: parallel
+titleCN: AQI 分布（平行坐标）
+difficulty: 2
+*/
+
+// Schema:
+// date,AQIindex,PM2.5,PM10,CO,NO2,SO2
+const dataBJ = [
+ [1,55,9,56,0.46,18,6,"良"],
+ [2,25,11,21,0.65,34,9,"优"],
+ [3,56,7,63,0.3,14,5,"良"],
+ [4,33,7,29,0.33,16,6,"优"],
+ [5,42,24,44,0.76,40,16,"优"],
+ [6,82,58,90,1.77,68,33,"良"],
+ [7,74,49,77,1.46,48,27,"良"],
+ [8,78,55,80,1.29,59,29,"良"],
+ [9,267,216,280,4.8,108,64,"重度污染"],
+ [10,185,127,216,2.52,61,27,"中度污染"],
+ [11,39,19,38,0.57,31,15,"优"],
+ [12,41,11,40,0.43,21,7,"优"],
+ [13,64,38,74,1.04,46,22,"良"],
+ [14,108,79,120,1.7,75,41,"轻度污染"],
+ [15,108,63,116,1.48,44,26,"轻度污染"],
+ [16,33,6,29,0.34,13,5,"优"],
+ [17,94,66,110,1.54,62,31,"良"],
+ [18,186,142,192,3.88,93,79,"中度污染"],
+ [19,57,31,54,0.96,32,14,"良"],
+ [20,22,8,17,0.48,23,10,"优"],
+ [21,39,15,36,0.61,29,13,"优"],
+ [22,94,69,114,2.08,73,39,"良"],
+ [23,99,73,110,2.43,76,48,"良"],
+ [24,31,12,30,0.5,32,16,"优"],
+ [25,42,27,43,1,53,22,"优"],
+ [26,154,117,157,3.05,92,58,"中度污染"],
+ [27,234,185,230,4.09,123,69,"重度污染"],
+ [28,160,120,186,2.77,91,50,"中度污染"],
+ [29,134,96,165,2.76,83,41,"轻度污染"],
+ [30,52,24,60,1.03,50,21,"良"],
+ [31,46,5,49,0.28,10,6,"优"]
+];
+
+var dataGZ = [
+ [1,26,37,27,1.163,27,13,"优"],
+ [2,85,62,71,1.195,60,8,"良"],
+ [3,78,38,74,1.363,37,7,"良"],
+ [4,21,21,36,0.634,40,9,"优"],
+ [5,41,42,46,0.915,81,13,"优"],
+ [6,56,52,69,1.067,92,16,"良"],
+ [7,64,30,28,0.924,51,2,"良"],
+ [8,55,48,74,1.236,75,26,"良"],
+ [9,76,85,113,1.237,114,27,"良"],
+ [10,91,81,104,1.041,56,40,"良"],
+ [11,84,39,60,0.964,25,11,"良"],
+ [12,64,51,101,0.862,58,23,"良"],
+ [13,70,69,120,1.198,65,36,"良"],
+ [14,77,105,178,2.549,64,16,"良"],
+ [15,109,68,87,0.996,74,29,"轻度污染"],
+ [16,73,68,97,0.905,51,34,"良"],
+ [17,54,27,47,0.592,53,12,"良"],
+ [18,51,61,97,0.811,65,19,"良"],
+ [19,91,71,121,1.374,43,18,"良"],
+ [20,73,102,182,2.787,44,19,"良"],
+ [21,73,50,76,0.717,31,20,"良"],
+ [22,84,94,140,2.238,68,18,"良"],
+ [23,93,77,104,1.165,53,7,"良"],
+ [24,99,130,227,3.97,55,15,"良"],
+ [25,146,84,139,1.094,40,17,"轻度污染"],
+ [26,113,108,137,1.481,48,15,"轻度污染"],
+ [27,81,48,62,1.619,26,3,"良"],
+ [28,56,48,68,1.336,37,9,"良"],
+ [29,82,92,174,3.29,0,13,"良"],
+ [30,106,116,188,3.628,101,16,"轻度污染"],
+ [31,118,50,0,1.383,76,11,"轻度污染"]
+];
+
+var dataSH = [
+ [1,91,45,125,0.82,34,23,"良"],
+ [2,65,27,78,0.86,45,29,"良"],
+ [3,83,60,84,1.09,73,27,"良"],
+ [4,109,81,121,1.28,68,51,"轻度污染"],
+ [5,106,77,114,1.07,55,51,"轻度污染"],
+ [6,109,81,121,1.28,68,51,"轻度污染"],
+ [7,106,77,114,1.07,55,51,"轻度污染"],
+ [8,89,65,78,0.86,51,26,"良"],
+ [9,53,33,47,0.64,50,17,"良"],
+ [10,80,55,80,1.01,75,24,"良"],
+ [11,117,81,124,1.03,45,24,"轻度污染"],
+ [12,99,71,142,1.1,62,42,"良"],
+ [13,95,69,130,1.28,74,50,"良"],
+ [14,116,87,131,1.47,84,40,"轻度污染"],
+ [15,108,80,121,1.3,85,37,"轻度污染"],
+ [16,134,83,167,1.16,57,43,"轻度污染"],
+ [17,79,43,107,1.05,59,37,"良"],
+ [18,71,46,89,0.86,64,25,"良"],
+ [19,97,71,113,1.17,88,31,"良"],
+ [20,84,57,91,0.85,55,31,"良"],
+ [21,87,63,101,0.9,56,41,"良"],
+ [22,104,77,119,1.09,73,48,"轻度污染"],
+ [23,87,62,100,1,72,28,"良"],
+ [24,168,128,172,1.49,97,56,"中度污染"],
+ [25,65,45,51,0.74,39,17,"良"],
+ [26,39,24,38,0.61,47,17,"优"],
+ [27,39,24,39,0.59,50,19,"优"],
+ [28,93,68,96,1.05,79,29,"良"],
+ [29,188,143,197,1.66,99,51,"中度污染"],
+ [30,174,131,174,1.55,108,50,"中度污染"],
+ [31,187,143,201,1.39,89,53,"中度污染"]
+];
+
+var schema = [
+ {name: 'date', index: 0, text: '日期'},
+ {name: 'AQIindex', index: 1, text: 'AQI'},
+ {name: 'PM25', index: 2, text: 'PM2.5'},
+ {name: 'PM10', index: 3, text: 'PM10'},
+ {name: 'CO', index: 4, text: ' CO'},
+ {name: 'NO2', index: 5, text: 'NO2'},
+ {name: 'SO2', index: 6, text: 'SO2'},
+ {name: '等级', index: 7, text: '等级'}
+];
+
+var lineStyle = {
+ width: 1,
+ opacity: 0.5
+};
+
+option = {
+ backgroundColor: '#333',
+ legend: {
+ bottom: 30,
+ data: ['Beijing', 'Shanghai', 'Guangzhou'],
+ itemGap: 20,
+ textStyle: {
+ color: '#fff',
+ fontSize: 14
+ }
+ },
+ tooltip: {
+ padding: 10,
+ backgroundColor: '#222',
+ borderColor: '#777',
+ borderWidth: 1
+ },
+ parallelAxis: [
+ {dim: 0, name: schema[0].text, inverse: true, max: 31, nameLocation: 'start'},
+ {dim: 1, name: schema[1].text},
+ {dim: 2, name: schema[2].text},
+ {dim: 3, name: schema[3].text},
+ {dim: 4, name: schema[4].text},
+ {dim: 5, name: schema[5].text},
+ {dim: 6, name: schema[6].text},
+ {dim: 7, name: schema[7].text,
+ type: 'category', data: ['优', '良', '轻度污染', '中度污染', '重度污染', '严重污染']}
+ ],
+ visualMap: {
+ show: true,
+ min: 0,
+ max: 150,
+ dimension: 2,
+ inRange: {
+ color: ['#d94e5d','#eac736','#50a3ba'].reverse(),
+ // colorAlpha: [0, 1]
+ }
+ },
+ parallel: {
+ left: '5%',
+ right: '18%',
+ bottom: 100,
+ parallelAxisDefault: {
+ type: 'value',
+ name: 'AQI指数',
+ nameLocation: 'end',
+ nameGap: 20,
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 12
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#aaa'
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#777'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ color: '#fff'
+ }
+ }
+ },
+ series: [
+ {
+ name: 'Beijing',
+ type: 'parallel',
+ lineStyle: lineStyle,
+ data: dataBJ
+ },
+ {
+ name: 'Shanghai',
+ type: 'parallel',
+ lineStyle: lineStyle,
+ data: dataSH
+ },
+ {
+ name: 'Guangzhou',
+ type: 'parallel',
+ lineStyle: lineStyle,
+ data: dataGZ
+ }
+ ]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/parallel-nutrients.ts b/public/examples/ts/parallel-nutrients.ts
new file mode 100644
index 0000000..eb7c9fd
--- /dev/null
+++ b/public/examples/ts/parallel-nutrients.ts
@@ -0,0 +1,185 @@
+/*
+title: Parallel Nutrients
+category: parallel
+titleCN: 营养结构（平行坐标）
+difficulty: 4
+*/
+
+const indices = {
+ name: 0,
+ group: 1,
+ id: 16
+};
+const schema = [
+ {name: 'name', index: 0},
+ {name: 'group', index: 1},
+ {name: 'protein', index: 2},
+ {name: 'calcium', index: 3},
+ {name: 'sodium', index: 4},
+ {name: 'fiber', index: 5},
+ {name: 'vitaminc', index: 6},
+ {name: 'potassium', index: 7},
+ {name: 'carbohydrate', index: 8},
+ {name: 'sugars', index: 9},
+ {name: 'fat', index: 10},
+ {name: 'water', index: 11},
+ {name: 'calories', index: 12},
+ {name: 'saturated', index: 13},
+ {name: 'monounsat', index: 14},
+ {name: 'polyunsat', index: 15},
+ {name: 'id', index: 16}
+];
+
+const groupCategories: string[] = [];
+const groupColors: string[] = [];
+
+ $.get(ROOT_PATH + '/data/asset/data/nutrients.json', function (data) {
+ normalizeData(data);
+
+ myChart.setOption(option = getOption(data));
+
+});
+
+
+function normalizeData(originData: (number | string)[][]) {
+ const groupMap: Record<string, number> = {};
+ originData.forEach(function (row) {
+ const groupName = row[indices.group];
+ if (!groupMap.hasOwnProperty(groupName)) {
+ groupMap[groupName] = 1;
+ }
+ });
+
+ originData.forEach(function (row) {
+ row.forEach(function (item, index) {
+ if (index !== indices.name
+ && index !== indices.group
+ && index !== indices.id
+ ) {
+ // Convert null to zero, as all of them under unit "g".
+ row[index] = parseFloat(item as string) || 0;
+ }
+ });
+ });
+
+ for (const groupName in groupMap) {
+ if (groupMap.hasOwnProperty(groupName)) {
+ groupCategories.push(groupName);
+ }
+ }
+ const hStep = Math.round(300 / (groupCategories.length - 1));
+ for (var i = 0; i < groupCategories.length; i++) {
+ groupColors.push(echarts.color.modifyHSL('#5A94DF', hStep * i));
+ }
+}
+
+function getOption(data: number[][]) {
+
+ const lineStyle = {
+ width: 0.5,
+ opacity: 0.05
+ };
+
+ return {
+ backgroundColor: '#333',
+ tooltip: {
+ padding: 10,
+ backgroundColor: '#222',
+ borderColor: '#777',
+ borderWidth: 1
+ },
+ title: [
+ {
+ text: 'Groups',
+ top: 0,
+ left: 0,
+ textStyle: {
+ color: '#fff'
+ }
+ }
+ ],
+ visualMap: {
+ show: true,
+ type: 'piecewise',
+ categories: groupCategories,
+ dimension: indices.group,
+ inRange: {
+ color: groupColors //['#d94e5d','#eac736','#50a3ba']
+ },
+ outOfRange: {
+ color: ['#ccc'] //['#d94e5d','#eac736','#50a3ba']
+ },
+ top: 20,
+ textStyle: {
+ color: '#fff'
+ },
+ realtime: false
+ },
+ parallelAxis: [
+ {dim: 16, name: schema[16].name, scale: true, nameLocation: 'end'},
+ {dim: 2, name: schema[2].name, nameLocation: 'end'},
+ {dim: 4, name: schema[4].name, nameLocation: 'end'},
+ {dim: 3, name: schema[3].name, nameLocation: 'end'},
+ {dim: 5, name: schema[5].name, nameLocation: 'end'},
+ {dim: 6, name: schema[6].name, nameLocation: 'end'},
+ {dim: 7, name: schema[7].name, nameLocation: 'end'},
+ {dim: 8, name: schema[8].name, nameLocation: 'end'},
+ {dim: 9, name: schema[9].name, nameLocation: 'end'},
+ {dim: 10, name: schema[10].name, nameLocation: 'end'},
+ {dim: 11, name: schema[11].name, nameLocation: 'end'},
+ {dim: 12, name: schema[12].name, nameLocation: 'end'},
+ {dim: 13, name: schema[13].name, nameLocation: 'end'},
+ {dim: 14, name: schema[14].name, nameLocation: 'end'},
+ {dim: 15, name: schema[15].name, nameLocation: 'end'}
+ ],
+ parallel: {
+ left: 280,
+ top: 20,
+ // top: 150,
+ // height: 300,
+ width: 400,
+ layout: 'vertical',
+ parallelAxisDefault: {
+ type: 'value',
+ name: 'nutrients',
+ nameLocation: 'end',
+ nameGap: 20,
+ nameTextStyle: {
+ color: '#fff',
+ fontSize: 14
+ },
+ axisLine: {
+ lineStyle: {
+ color: '#aaa'
+ }
+ },
+ axisTick: {
+ lineStyle: {
+ color: '#777'
+ }
+ },
+ splitLine: {
+ show: false
+ },
+ axisLabel: {
+ color: '#fff'
+ },
+ realtime: false
+ }
+ },
+ animation: false,
+ series: [
+ {
+ name: 'nutrients',
+ type: 'parallel',
+ lineStyle: lineStyle,
+ inactiveOpacity: 0,
+ activeOpacity: 0.01,
+ progressive: 500,
+ smooth: true,
+ data: data
+ }
+ ]
+ } as echarts.EChartsOption;
+}
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/parallel-simple.ts b/public/examples/ts/parallel-simple.ts
new file mode 100644
index 0000000..a296b3d
--- /dev/null
+++ b/public/examples/ts/parallel-simple.ts
@@ -0,0 +1,34 @@
+/*
+title: Basic Parallel
+category: parallel
+titleCN: 基础平行坐标
+difficulty: 1
+*/
+
+option = {
+ parallelAxis: [
+ {dim: 0, name: 'Price'},
+ {dim: 1, name: 'Net Weight'},
+ {dim: 2, name: 'Amount'},
+ {
+ dim: 3,
+ name: 'Score',
+ type: 'category',
+ data: ['Excellent', 'Good', 'OK', 'Bad']
+ }
+ ],
+ series: {
+ type: 'parallel',
+ lineStyle: {
+ width: 4
+ },
+ data: [
+ [12.99, 100, 82, 'Good'],
+ [9.99, 80, 77, 'OK'],
+ [20, 120, 60, 'Excellent']
+ ]
+ }
+};
+
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pictorialBar-bar-transition.ts b/public/examples/ts/pictorialBar-bar-transition.ts
new file mode 100644
index 0000000..96bacb5
--- /dev/null
+++ b/public/examples/ts/pictorialBar-bar-transition.ts
@@ -0,0 +1,144 @@
+/*
+title: Transition between pictorialBar and bar
+category: pictorialBar, animation
+titleCN: 象形主图变形为柱状图
+difficulty: 4
+videoStart: 2500
+videoEnd: 10000
+*/
+
+const pathSymbols = {
+ reindeer: 'path://M-22.788,24.521c2.08-0.986,3.611-3.905,4.984-5.892 c-2.686,2.782-5.047,5.884-9.102,7.312c-0.992,0.005-0.25-2.016,0.34-2.362l1.852-0.41c0.564-0.218,0.785-0.842,0.902-1.347 c2.133-0.727,4.91-4.129,6.031-6.194c1.748-0.7,4.443-0.679,5.734-2.293c1.176-1.468,0.393-3.992,1.215-6.557 c0.24-0.754,0.574-1.581,1.008-2.293c-0.611,0.011-1.348-0.061-1.959-0.608c-1.391-1.245-0.785-2.086-1.297-3.313 c1.684,0.744,2.5,2.584,4.426,2.586C-8.46,3.012-8.255,2.901-8.04,2.824c6.031-1.952,1 [...]
+ plane: 'path://M1.112,32.559l2.998,1.205l-2.882,2.268l-2.215-0.012L1.112,32.559z M37.803,23.96 c0.158-0.838,0.5-1.509,0.961-1.904c-0.096-0.037-0.205-0.071-0.344-0.071c-0.777-0.005-2.068-0.009-3.047-0.009 c-0.633,0-1.217,0.066-1.754,0.18l2.199,1.804H37.803z M39.738,23.036c-0.111,0-0.377,0.325-0.537,0.924h1.076 C40.115,23.361,39.854,23.036,39.738,23.036z M39.934,39.867c-0.166,0-0.674,0.705-0.674,1.986s0.506,1.986,0.674,1.986 s0.672-0.705,0.672-1.986S40.102,39.867,39.934,39.867z M38.963 [...]
+ train: 'path://M67.335,33.596L67.335,33.596c-0.002-1.39-1.153-3.183-3.328-4.218h-9.096v-2.07h5.371 c-4.939-2.07-11.199-4.141-14.89-4.141H19.72v12.421v5.176h38.373c4.033,0,8.457-1.035,9.142-5.176h-0.027 c0.076-0.367,0.129-0.751,0.129-1.165L67.335,33.596L67.335,33.596z M27.999,30.413h-3.105v-4.141h3.105V30.413z M35.245,30.413 h-3.104v-4.141h3.104V30.413z M42.491,30.413h-3.104v-4.141h3.104V30.413z M49.736,30.413h-3.104v-4.141h3.104V30.413z M14.544,40.764c1.143,0,2.07-0.927,2.07-2.07V35 [...]
+ ship: 'path://M16.678,17.086h9.854l-2.703,5.912c5.596,2.428,11.155,5.575,16.711,8.607c3.387,1.847,6.967,3.75,10.541,5.375 v-6.16l-4.197-2.763v-5.318L33.064,12.197h-11.48L20.43,15.24h-4.533l-1.266,3.286l0.781,0.345L16.678,17.086z M49.6,31.84 l0.047,1.273L27.438,20.998l0.799-1.734L49.6,31.84z M33.031,15.1l12.889,8.82l0.027,0.769L32.551,16.1L33.031,15.1z M22.377,14.045 h9.846l-1.539,3.365l-2.287-1.498h1.371l0.721-1.352h-2.023l-0.553,1.037l-0.541-0.357h-0.34l0.359-0.684h-2.025l-0.361,0.6 [...]
+ car: 'path://M49.592,40.883c-0.053,0.354-0.139,0.697-0.268,0.963c-0.232,0.475-0.455,0.519-1.334,0.475 c-1.135-0.053-2.764,0-4.484,0.068c0,0.476,0.018,0.697,0.018,0.697c0.111,1.299,0.697,1.342,0.931,1.342h3.7 c0.326,0,0.628,0,0.861-0.154c0.301-0.196,0.43-0.772,0.543-1.78c0.017-0.146,0.025-0.336,0.033-0.56v-0.01 c0-0.068,0.008-0.154,0.008-0.25V41.58l0,0C49.6,41.348,49.6,41.09,49.592,40.883L49.592,40.883z M6.057,40.883 c0.053,0.354,0.137,0.697,0.268,0.963c0.23,0.475,0.455,0.519,1.334,0. [...]
+};
+
+const labelSetting: echarts.BarSeriesOption['label'] = {
+ show: true,
+ position: 'right',
+ offset: [10, 0],
+ fontSize: 16
+};
+
+function makeOption(type: 'bar' | 'pictorialBar', symbol?: string): echarts.EChartsOption {
+ return {
+ title: {
+ text: 'Vehicles in X City'
+ },
+ legend: {
+ data: ['2015', '2016']
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ containLabel: true,
+ left: 20
+ },
+ yAxis: {
+ data: ['reindeer', 'ship', 'plane', 'train', 'car'],
+ inverse: true,
+ axisLine: {show: false},
+ axisTick: {show: false},
+ axisLabel: {
+ margin: 30,
+ fontSize: 14
+ },
+ axisPointer: {
+ label: {
+ show: true,
+ margin: 30
+ }
+ }
+ },
+ xAxis: {
+ splitLine: {show: false},
+ axisLabel: {show: false},
+ axisTick: {show: false},
+ axisLine: {show: false}
+ },
+ animationDurationUpdate: 500,
+ series: [{
+ name: '2015',
+ id: 'bar1',
+ type: type,
+ label: labelSetting,
+ symbolRepeat: true,
+ symbolSize: ['80%', '60%'],
+ barCategoryGap: '40%',
+ universalTransition: {
+ enabled: true,
+ delay: function (idx, total) {
+ return (idx / total) * 1000;
+ }
+ },
+ data: [{
+ value: 157,
+ symbol: symbol || pathSymbols.reindeer
+ }, {
+ value: 21,
+ symbol: symbol || pathSymbols.ship
+ }, {
+ value: 66,
+ symbol: symbol || pathSymbols.plane
+ }, {
+ value: 78,
+ symbol: symbol || pathSymbols.train
+ }, {
+ value: 123,
+ symbol: symbol || pathSymbols.car
+ }]
+ }, {
+ name: '2016',
+ id: 'bar2',
+ type: type,
+ barGap: '10%',
+ label: labelSetting,
+ symbolRepeat: true,
+ symbolSize: ['80%', '60%'],
+ universalTransition: {
+ enabled: true,
+ delay: function (idx, total) {
+ return (idx / total) * 1000;
+ }
+ },
+ data: [{
+ value: 184,
+ symbol: symbol || pathSymbols.reindeer
+ }, {
+ value: 29,
+ symbol: symbol || pathSymbols.ship
+ }, {
+ value: 73,
+ symbol: symbol || pathSymbols.plane
+ }, {
+ value: 91,
+ symbol: symbol || pathSymbols.train
+ }, {
+ value: 95,
+ symbol: symbol || pathSymbols.car
+ }]
+ }]
+ };
+}
+
+const options = [
+ makeOption('pictorialBar'),
+ makeOption('bar'),
+ makeOption('pictorialBar', 'diamond')
+];
+
+var optionIndex = 0;
+option = options[optionIndex];
+
+setInterval(function () {
+ optionIndex = (optionIndex + 1) % options.length;
+ myChart.setOption(options[optionIndex]);
+}, 2500);
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pictorialBar-body-fill.ts b/public/examples/ts/pictorialBar-body-fill.ts
new file mode 100644
index 0000000..b775298
--- /dev/null
+++ b/public/examples/ts/pictorialBar-body-fill.ts
@@ -0,0 +1,147 @@
+/*
+title: Water Content
+category: pictorialBar
+titleCN: 人体含水量
+*/
+
+const symbols = [
+ 'path://M36.7,102.84c-1.17,2.54-2.99,4.98-3.39,7.63c-1.51,9.89-3.31,19.58-1.93,29.95 c0.95,7.15-2.91,14.82-3.57,22.35c-0.64,7.36-0.2,14.86,0.35,22.25c0.12,1.68,2.66,3.17,4.67,5.4c-0.6,0.82-1.5,2.22-2.58,3.48 c-0.96,1.12-1.96,2.35-3.21,3.04c-1.71,0.95-3.71,2.03-5.51,1.9c-1.18-0.08-3.04-2.13-3.16-3.43c-0.44-4.72,0-9.52-0.41-14.25 c-0.94-10.88-2.32-21.72-3.24-32.61c-0.49-5.84-1.63-12.01-0.35-17.54c3.39-14.56,2.8-28.84,0.36-43.4 c-2.71-16.16-1.06-32.4,0.54-48.59c0.91-9.22,4.62-17.36,8.53 [...]
+ 'path://M40.02-99c2.07,1.21,4.26,2.25,6.19,3.66c5.94,4.34,8.23,12.57,4.95,19.79 c-3.21,7.08-6.82,14.03-10.86,20.67c-2.17,3.56-1.25,5.38,1.99,6.36c2.94,0.89,6.36,1.91,9.15,1.21c5.51-1.4,8.33,1.23,10.66,5.29 c4.71,8.22,9.72,16.29,13.84,24.8C81.06-6.65,89,0.4,99.56,5.17C109.82,9.8,120,14.7,129.85,20.15c4.72,2.61,9.09,6.37,10.24,12.97 c-2.89-1.93-5.2-3.75-7.78-5.04c-0.99-0.5-2.6,0.22-4.83,0.5c-5.36-9.35-16.8-9.4-26.74-12.62C91.68,13.04,81.82,11.37,75.66,3 c-5.98-8.13-11.61-16.52-17.4-24. [...]
+ 'path://M-39,33.03c3.72-9.74,12.97-12.87,20.96-17.43c9.51-5.43,19.2-10.54,28.69-16 c1.77-1.02,3.35-2.85,4.33-4.67C21.44-17,27.82-28.95,33.95-41.04c2.13-4.2,4.95-6.01,9.7-6.09c3.68-0.06,7.52-0.92,10.97-2.25 c5.09-1.95,4.85-5.2,1.1-9.01c-5.12-5.21-10.89-10.1-13.23-17.54c-1.71-5.44,0.78-15.62,4.87-18.74 c4.12-3.15,12.55-3.84,16.69-0.12c3.39,3.04,6.44,7.27,7.8,11.56c1.96,6.16,3.31,12.9,2.99,19.29 c-0.45,9.21,6.35,16.71,15.73,16.97c7.94,0.21,9.27,0.78,10.69,8.61c5.23,28.73,19.4,53.73,32.2 [...]
+ 'path://M80,100.49c0,5.23,0.13,10.46-0.03,15.69c-0.2,6.3-0.57,12.6-0.99,18.9 c-0.94,14.08-2.08,28.14-2.87,42.22c-0.41,7.29,4.95,14.31,12.03,16.62c1.22,0.4,2.43,0.84,3.65,2.16c-1.8,0.35-3.59,0.91-5.4,1 c-5.4,0.3-10.83,0.7-16.22,0.42c-1.44-0.07-3.7-2.25-3.95-3.74c-0.56-3.4,0.14-6.98-0.13-10.45c-0.77-9.67-0.8-19.56-3-28.92 c-1.97-8.39-2.18-16.07-0.02-24.35c1.28-4.91,1.34-10.48,0.5-15.52c-2.09-12.71-4.95-25.31-7.65-37.92 c-0.34-1.57-1.3-3.33-2.52-4.33c-3.71-3.01-7.37-6.38-11.62-8.38c-13. [...]
+ 'path://M-57,41.03c3.65-4.15,7.17-8.43,10.98-12.42c6.53-6.83,13.31-13.41,19.84-20.23 c1.76-1.84,3.51-3.98,4.4-6.31c3.8-9.99,6.99-20.23,10.99-30.14c2.74-6.79,5.65-13.62,12.37-17.95c4.17-2.68,5.12-7.31,4.29-11.96 c-0.3-1.67-2.02-3.08-3.35-4.97c-2.57,5.59-4.62,10.03-7.21,15.66c-4.79-6.43-9.76-10.83-11.68-16.31 c-1.77-5.04-1.18-11.44,0.04-16.86c1.27-5.62,5.24-9.71,12.03-9.7c1.55,0,3.1-1.68,4.66-2.55c9.3-5.22,20.47-1.53,25.73,7.59 c4.06,7.04,4.84,14.6,5.57,22.26c0.65,6.82-0.32,7.59-8.26,8 [...]
+];
+
+const bodyMax = 150;
+
+const labelSetting: echarts.PictorialBarSeriesOption['label'] = {
+ show: true,
+ position: 'outside',
+ offset: [0, -20],
+ formatter: function (param) {
+ return (param.value / bodyMax * 100).toFixed(0) + '%';
+ },
+ textStyle: {
+ fontSize: 18,
+ fontFamily: 'Arial'
+ }
+};
+
+const markLineSetting: echarts.MarkLineComponentOption = {
+ symbol: 'none',
+ lineStyle: {
+ opacity: 0.3
+ },
+ data: [{
+ type: 'max',
+ label: {
+ formatter: 'max: {c}'
+ }
+ }, {
+ type: 'min',
+ label: {
+ formatter: 'min: {c}'
+ }
+ }]
+};
+
+option = {
+ tooltip: {
+ },
+ legend: {
+ data: ['typeA', 'typeB'],
+ selectedMode: 'single'
+ },
+ xAxis: {
+ data: ['a', 'b', 'c', 'd', 'e'],
+ axisTick: {show: false},
+ axisLine: {show: false},
+ axisLabel: {show: false}
+ },
+ yAxis: {
+ max: bodyMax,
+ offset: 20,
+ splitLine: {show: false}
+ },
+ grid: {
+ top: 'center',
+ height: 230
+ },
+ markLine: {
+ z: -100
+ },
+ series: [{
+ name: 'typeA',
+ type: 'pictorialBar',
+ symbolClip: true,
+ symbolBoundingData: bodyMax,
+ label: labelSetting,
+ data: [{
+ value: 123,
+ symbol: symbols[0]
+ }, {
+ value: 34,
+ symbol: symbols[1]
+ }, {
+ value: 101,
+ symbol: symbols[2]
+ }, {
+ value: 89,
+ symbol: symbols[3]
+ }, {
+ value: 72,
+ symbol: symbols[4]
+ }],
+ markLine: markLineSetting,
+ z: 10
+ }, {
+ name: 'typeB',
+ type: 'pictorialBar',
+ symbolClip: true,
+ symbolBoundingData: bodyMax,
+ label: labelSetting,
+ data: [{
+ value: 12,
+ symbol: symbols[0]
+ }, {
+ value: 44,
+ symbol: symbols[1]
+ }, {
+ value: 131,
+ symbol: symbols[2]
+ }, {
+ value: 33,
+ symbol: symbols[3]
+ }, {
+ value: 142,
+ symbol: symbols[4]
+ }],
+ markLine: markLineSetting,
+ z: 10
+ }, {
+ name: 'full',
+ type: 'pictorialBar',
+ symbolBoundingData: bodyMax,
+ animationDuration: 0,
+ itemStyle: {
+ color: '#ccc'
+ },
+ data: [{
+ value: 1,
+ symbol: symbols[0]
+ }, {
+ value: 1,
+ symbol: symbols[1]
+ }, {
+ value: 1,
+ symbol: symbols[2]
+ }, {
+ value: 1,
+ symbol: symbols[3]
+ }, {
+ value: 1,
+ symbol: symbols[4]
+ }]
+ }]
+};
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pictorialBar-dotted.ts b/public/examples/ts/pictorialBar-dotted.ts
new file mode 100644
index 0000000..ce04632
--- /dev/null
+++ b/public/examples/ts/pictorialBar-dotted.ts
@@ -0,0 +1,113 @@
+/*
+title: Dotted bar
+category: pictorialBar
+titleCN: 虚线柱状图效果
+*/
+
+// Generate data
+let category = [];
+let dottedBase = +new Date();
+let lineData = [];
+let barData = [];
+
+for (let i = 0; i < 20; i++) {
+ let date = new Date(dottedBase += 3600 * 24 * 1000);
+ category.push([
+ date.getFullYear(),
+ date.getMonth() + 1,
+ date.getDate()
+ ].join('-'));
+ let b = Math.random() * 200;
+ let d = Math.random() * 200;
+ barData.push(b)
+ lineData.push(d + b);
+}
+
+
+// option
+option = {
+ backgroundColor: '#0f375f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ legend: {
+ data: ['line', 'bar'],
+ textStyle: {
+ color: '#ccc'
+ }
+ },
+ xAxis: {
+ data: category,
+ axisLine: {
+ lineStyle: {
+ color: '#ccc'
+ }
+ }
+ },
+ yAxis: {
+ splitLine: {show: false},
+ axisLine: {
+ lineStyle: {
+ color: '#ccc'
+ }
+ }
+ },
+ series: [{
+ name: 'line',
+ type: 'line',
+ smooth: true,
+ showAllSymbol: true,
+ symbol: 'emptyCircle',
+ symbolSize: 15,
+ data: lineData
+ }, {
+ name: 'bar',
+ type: 'bar',
+ barWidth: 10,
+ itemStyle: {
+ borderRadius: 5,
+ color: new echarts.graphic.LinearGradient(
+ 0, 0, 0, 1,
+ [
+ {offset: 0, color: '#14c8d4'},
+ {offset: 1, color: '#43eec6'}
+ ]
+ )
+ },
+ data: barData
+ }, {
+ name: 'line',
+ type: 'bar',
+ barGap: '-100%',
+ barWidth: 10,
+ itemStyle: {
+ color: new echarts.graphic.LinearGradient(
+ 0, 0, 0, 1,
+ [
+ {offset: 0, color: 'rgba(20,200,212,0.5)'},
+ {offset: 0.2, color: 'rgba(20,200,212,0.2)'},
+ {offset: 1, color: 'rgba(20,200,212,0)'}
+ ]
+ )
+ },
+ z: -12,
+ data: lineData
+ }, {
+ name: 'dotted',
+ type: 'pictorialBar',
+ symbol: 'rect',
+ itemStyle: {
+ color: '#0f375f'
+ },
+ symbolRepeat: true,
+ symbolSize: [12, 4],
+ symbolMargin: 1,
+ z: -10,
+ data: lineData
+ }]
+};
+
+export {}
\ No newline at end of file
diff --git a/public/examples/ts/pictorialBar-forest.ts b/public/examples/ts/pictorialBar-forest.ts
new file mode 100644
index 0000000..c52f8a8
--- /dev/null
+++ b/public/examples/ts/pictorialBar-forest.ts
@@ -0,0 +1,112 @@
+/*
+title: Expansion of forest
+category: pictorialBar
+titleCN: 森林的增长
+videoStart: 4000
+videoEnd: 10000
+*/
+
+const treeDataURI = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAA2CAYAAADUOvnEAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA5tJREFUeNrcWE1oE0EUnp0kbWyUpCiNYEpCFSpIMdpLRTD15s2ePHixnj00N4/GoyfTg2fbiwdvvagHC1UQ66GQUIQKKgn1UAqSSFua38b3prPJZDs7s5ufKn0w7CaZ2W/fe9/73kyMRqNB3Nrj1zdn4RJ6du9T2u1a2iHYSxjP4d41oOHGQwAIwSUHIyh8/RA8XeiXh0kLGFoaXiTecw/hoTG4ZCSAaFkY0+BpsZceLtiAoV2FkepZSDk5EpppczBvpuuQCqx0YnkYcVVoqQYMyeCG+lFdaGkXeVOFNu4aEBalOBk6sbQrQF7gSdK5JXjuH [...]
+
+const beginYear = 2016;
+const endYear = 2050;
+const lineCount = 10;
+
+
+// Basic option:
+option = {
+ color: ['#e54035'],
+ xAxis: {
+ axisLine: {show: false},
+ axisLabel: {show: false},
+ axisTick: {show: false},
+ splitLine: {show: false},
+ name: beginYear + '',
+ nameLocation: 'middle',
+ nameGap: 40,
+ nameTextStyle: {
+ color: 'green',
+ fontSize: 30,
+ fontFamily: 'Arial'
+ },
+ min: -2800,
+ max: 2800
+ },
+ yAxis: {
+ data: makeCategoryData(),
+ show: false
+ },
+ grid: {
+ top: 'center',
+ height: 280
+ },
+ series: [{
+ name: 'all',
+ type: 'pictorialBar',
+ symbol: 'image://' + treeDataURI,
+ symbolSize: [30, 55],
+ symbolRepeat: true,
+ data: makeSeriesData(beginYear),
+ animationEasing: 'elasticOut'
+ }, {
+ name: 'all',
+ type: 'pictorialBar',
+ symbol: 'image://' + treeDataURI,
+ symbolSize: [30, 55],
+ symbolRepeat: true,
+ data: makeSeriesData(beginYear, true),
+ animationEasing: 'elasticOut'
+ }]
+};
+
+
+// Make fake data.
+function makeCategoryData() {
+ var categoryData = [];
+ for (var i = 0; i < lineCount; i++) {
+ categoryData.push(i + 'a');
+ }
+ return categoryData;
+}
+
+function makeSeriesData(year: number, negative?: boolean): echarts.PictorialBarSeriesOption['data'] {
+ // make a fake value just for demo.
+ const r = (year - beginYear + 1) * 10;
+ const seriesData = [];
+
+ for (let i = 0; i < lineCount; i++) {
+ let sign = (negative ? -1 * ((i % 3) ? 0.9 : 1): 1 * (((i + 1) % 3) ? 0.9 : 1));
+ seriesData.push({
+ value: sign * (
+ year <= beginYear + 1
+ ? (Math.abs(i - lineCount / 2 + 0.5) < lineCount / 5 ? 5 : 0)
+ : (lineCount - Math.abs(i - lineCount / 2 + 0.5)) * r
+ ),
+ symbolOffset: (i % 2) ? ['50%', 0] : undefined
+ });
+ }
+ return seriesData;
+}
+
+
+
+// Set dynamic data.
+var currentYear = beginYear;
+setInterval(function () {
+ currentYear++;
+ if (currentYear > endYear) {
+ currentYear = beginYear;
+ }
+ myChart.setOption({
+ xAxis: {
+ name: currentYear
+ },
+ series: [{
+ data: makeSeriesData(currentYear)
+ }, {
+ data: makeSeriesData(currentYear, true)
+ }]
+ });
+}, 800);
+
+export {}
\ No newline at end of file
diff --git a/src/editor/CodeMonaco.vue b/src/editor/CodeMonaco.vue
index 0375bef..f2f62c7 100644
--- a/src/editor/CodeMonaco.vue
+++ b/src/editor/CodeMonaco.vue
@@ -51,6 +51,7 @@ export = echarts;`,
// Declare to global namespace.
declare global {
const ROOT_PATH: string
+ const $: any
const app: {
configParameters: {
[key: string]: {
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org