Extensions
Apache ECharts
Apache ECharts
An Open Source JavaScript Visualization Library
The theme provides an alpha version of an echarts extensions, allowing to render
charts based on the provided options.
Configuration
# mkdocs.yml
markdown_extensions:
- shadcn.extensions.echarts.alpha
Syntax
From a js config it basically plots charts through the Apache ECharts library. The uses the PyMdown Blocks Extension API so its syntax (similar to tab or details).
/// echarts
{
/* echarts js config */
}
///
Currently, the extension does not support dark mode.
Important
The js config is passed to the .setOption method. The extension crops the input so that it keeps the outtermost curly braces ({ and }) and removes what is outside. You can look at the library API. In a nutshell, it removes code outside of the config object.
Tip
You can either inline all the config within the block or insert snippets from file thanks to the pymdownx.snippets extension.
/// echarts
––8<-- "example.js"
///
Options
You can pass attributes to the chart container through the builtin attrs key. The attributes are passed to the div element that contains the chart. In addition e expose a renderer key that defines the output format of the chart (svg or canvas). The default values are given below.
/// echarts
renderer: "svg"
attrs:
class: "echarts"
style: "width:100%;height:500px;"
/* config here */
///
In the following example we use the canvas renderer and re-define style to width:100%;height:60vh; (note also that it resizes with the window).
/// echarts
renderer: "canvas"
attrs:
style: "width:100%;height:60vh;"
const option = {
tooltip: {
trigger: "none",
axisPointer: {
type: "cross",
},
},
legend: {},
grid: {
top: 70,
bottom: 50,
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
},
axisPointer: {
label: {
formatter: function (params) {
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,
},
axisPointer: {
label: {
formatter: function (params) {
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,
],
},
],
};
///
Examples
Line
/// echarts
const option = {
tooltip: {
trigger: "none",
axisPointer: {
type: "cross",
},
},
legend: {},
grid: {
top: 70,
bottom: 50,
},
xAxis: [
{
type: "category",
axisTick: {
alignWithLabel: true,
},
axisLine: {
onZero: false,
},
axisPointer: {
label: {
formatter: function (params) {
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,
},
axisPointer: {
label: {
formatter: function (params) {
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,
],
},
],
};
///
Bars
/// echarts
const option = {
legend: {
data: ["bar", "bar2", "bar3", "bar4"],
left: "10%",
},
brush: {
toolbox: ["rect", "polygon", "lineX", "lineY", "keep", "clear"],
xAxisIndex: 0,
},
toolbox: {
feature: {
magicType: {
type: ["stack"],
},
dataView: {},
},
},
tooltip: {},
xAxis: {
data: (() => {
let xAxisData = [];
for (let i = 0; i < 10; i++) {
xAxisData.push("Class" + i);
}
return xAxisData;
})(),
name: "X Axis",
axisLine: { onZero: true },
splitLine: { show: false },
splitArea: { show: false },
},
yAxis: {},
grid: {
bottom: 100,
},
series: [
{
name: "bar",
type: "bar",
stack: "one",
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: "rgba(0,0,0,0.3)",
},
},
data: (() => {
let data1 = [];
for (let i = 0; i < 10; i++) {
data1.push(+(Math.random() * 2).toFixed(2));
}
return data1;
})(),
},
{
name: "bar2",
type: "bar",
stack: "one",
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: "rgba(0,0,0,0.3)",
},
},
data: (() => {
let data2 = [];
for (let i = 0; i < 10; i++) {
data2.push(+(Math.random() * 5).toFixed(2));
}
return data2;
})(),
},
{
name: "bar3",
type: "bar",
stack: "two",
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: "rgba(0,0,0,0.3)",
},
},
data: (() => {
let data3 = [];
for (let i = 0; i < 10; i++) {
data3.push(+(Math.random() + 0.3).toFixed(2));
}
return data3;
})(),
},
{
name: "bar4",
type: "bar",
stack: "two",
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowColor: "rgba(0,0,0,0.3)",
},
},
data: (() => {
let data4 = [];
for (let i = 0; i < 10; i++) {
data4.push(+Math.random().toFixed(2));
}
return data4;
})(),
},
],
};
///
Pie
/// echarts
const option = {
tooltip: {
trigger: "item",
},
legend: {
top: "5%",
left: "center",
},
series: [
{
name: "Access From",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: "#fff",
borderWidth: 2,
},
label: {
show: false,
position: "center",
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: 1048, name: "Search Engine" },
{ value: 735, name: "Direct" },
{ value: 580, name: "Email" },
{ value: 484, name: "Union Ads" },
{ value: 300, name: "Video Ads" },
],
},
],
};
///
Scatter
/// echarts
const option = {
xAxis: {
scale: true,
},
yAxis: {
scale: true,
},
series: [
{
type: "effectScatter",
symbolSize: 20,
data: [
[172.7, 105.2],
[153.4, 42],
],
},
{
type: "scatter",
// prettier-ignore
data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
[170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
[172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
[147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
[159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
[174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
[154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
[162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
[168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
[167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
[167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
[168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
[156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
[162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
[151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
[164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
[170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
[163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
[161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
[159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
[161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
[171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
[166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
[159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
[162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
[172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
[162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
[158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
[167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
[170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
[160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
[166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
[170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
[167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
[160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
[177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
[172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
[175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
[165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
[168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
[162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
[157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
[172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
[161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
[152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
[160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
[167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
[175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
[174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
[156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
[169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
[176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
],
},
],
};
///
Radar
/// echarts
const option = {
title: {
text: "Basic Radar Chart",
},
legend: {
data: ["Allocated Budget", "Actual Spending"],
},
radar: {
// shape: 'circle',
indicator: [
{ name: "Sales", max: 6500 },
{ name: "Administration", max: 16000 },
{ name: "Information Technology", max: 30000 },
{ name: "Customer Support", max: 38000 },
{ name: "Development", max: 52000 },
{ name: "Marketing", max: 25000 },
],
},
series: [
{
name: "Budget vs spending",
type: "radar",
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: "Allocated Budget",
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: "Actual Spending",
},
],
},
],
};
///