ECharts is a script that can let you insert ECharts into the wiki pages.
Installation
Usage
Using the container that has CSS class echarts to wrap raw ECharts JSON options data.
e.g. ↓ ↓ ↓
<div class="echarts" style="width: 100%; height: 400px;">
<pre>
// ECharts options here
</pre>
</div>
...
Examples
Let's try some basic charts from https://echarts.apache.org/examples/en/index.html
Basic Line Chart
{{#tag: pre |
/**
* You can preview the chart online at https://echarts.apache.org/examples/
* You can use JSON to set options
*/
// Nonstandard JSON is allowed
{
xAxis: { // You don't need double quotes
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // You can even add comments here
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
}
| class = echarts
| style = width: 100%; height: 400px
}}
/**
* You can preview the chart online at https://echarts.apache.org/examples/
* You can use JSON to set options
*/
// Nonstandard JSON is allowed
{
xAxis: { // You don't need double quotes
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // You can even add comments here
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
}
Bar Chart with Negative Value
{
"title": {
"text": "Bar Chart with Negative Value",
"subtext": "From ExcelHome",
"sublink": "http://e.weibo.com/1341556070/AjwF2AgQm"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"grid": {
"top": 80,
"bottom": 30
},
"xAxis": {
"type": "value",
"position": "top",
"splitLine": {
"lineStyle": {
"type": "dashed"
}
}
},
"yAxis": {
"type": "category",
"axisLine": {
"show": false
},
"axisLabel": {
"show": false
},
"axisTick": {
"show": false
},
"splitLine": {
"show": false
},
"data": ["ten", "nine", "eight", "seven", "six", "five", "four", "three", "two", "one"]
},
"series": [{
"name": "生活费",
"type": "bar",
"stack": "总量",
"label": {
"show": true,
"formatter": "{b}"
},
"data": [{
"value": -0.07,
"label": {
"position": "right"
}
},
{
"value": -0.09,
"label": {
"position": "right"
}
},
0.2, 0.44,
{
"value": -0.23,
"label": {
"position": "right"
}
},
0.08,
{
"value": -0.17,
"label": {
"position": "right"
}
},
0.47,
{
"value": -0.36,
"label": {
"position": "right"
}
},
0.18
]
}]
}
Radar
{
"title": {
"text": "Character Abilities",
"subtext": "WHALERs - Dragon Dongfang"
},
"tooltip": {
"trigger": "axis"
},
"radar": [
{
"indicator": [
{
"text": "Shooting",
"max": 100
},
{
"text": "Muscle",
"max": 100
},
{
"text": "Defensive",
"max": 100
},
{
"text": "Sneak",
"max": 100
},
{
"text": "Agility",
"max": 100
},
{
"text": "Creative",
"max": 100
}
],
"radius": 80
}
],
"series": [
{
"type": "radar",
"tooltip": {
"trigger": "item"
},
"areaStyle": {},
"data": [
{
"value": [
95,
90,
60,
75,
100,
70
],
"name": "Power"
}
]
}
]
}
Gantt
{
"title": {
"text": "阶梯瀑布图",
"subtext": "类甘特图测试"
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "shadow"
}
},
"legend": {
"data": [
"支出",
"收入"
]
},
"grid": {
"left": "3%",
"right": "4%",
"bottom": "3%",
"containLabel": true
},
"yAxis": {
"type": "category",
"splitLine": {
"show": false
},
"data": [
"11月1日",
"11月2日",
"11月3日",
"11月4日",
"11月5日",
"11月6日",
"11月7日",
"11月8日",
"11月9日",
"11月10日",
"11月11日"
]
},
"xAxis": {
"type": "value"
},
"series": [
{
"name": "辅助",
"type": "bar",
"stack": "总量",
"itemStyle": {
"normal": {
"barBorderColor": "rgba(0,0,0,0)",
"color": "rgba(0,0,0,0)"
},
"emphasis": {
"barBorderColor": "rgba(0,0,0,0)",
"color": "rgba(0,0,0,0)"
}
},
"data": [
0,
900,
1245,
1530,
1376,
1376,
1511,
1689,
1856,
1495,
1292
]
},
{
"name": "收入",
"type": "bar",
"stack": "总量",
"label": {
"normal": {
"show": true,
"position": "top"
}
},
"data": [
900,
345,
393,
"-",
"-",
135,
178,
286,
"-",
"-",
"-"
]
},
{
"name": "支出",
"type": "bar",
"stack": "总量",
"label": {
"normal": {
"show": true,
"position": "bottom"
}
},
"data": [
"-",
"-",
"-",
108,
154,
"-",
"-",
"-",
119,
361,
203
]
}
]
}
Stacked area chart
{
title: {
text: 'Rainbow line chart'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
label: {
backgroundColor: '#6a7985'
}
}
},
legend: {
data: ['Apple', 'Banana', 'Cherry', 'Durian', 'Eggfruit']
},
toolbox: {
feature: {
saveAsImage: {}
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Apple',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Banana',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Cherry',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Durian',
type: 'line',
stack: 'Total',
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Eggfruit',
type: 'line',
stack: 'Total',
label: {
show: true,
position: 'top'
},
areaStyle: {},
emphasis: {
focus: 'series'
},
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
}
See also template:
Text above can be found here (edit)