ECharts

示例
--

```
/\*\*
 \* 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'
 }]
}

```

## 正负交错

```

{
 "title": {
 "text": "交错正负轴标签",
 "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
 ]
 }]
}

```

雷达
--

```

{
 "title": {
 "text": "角色能力值",
 "subtext": "WHALERs - 东方龙"
 },
 "tooltip": {
 "trigger": "axis"
 },
 "radar": [
 {
 "indicator": [
 {
 "text": "远程",
 "max": 100
 },
 {
 "text": "格斗",
 "max": 100
 },
 {
 "text": "防御",
 "max": 100
 },
 {
 "text": "隐蔽",
 "max": 100
 },
 {
 "text": "敏捷",
 "max": 100
 },
 {
 "text": "制造",
 "max": 100
 }
 ],
 "radius": 80
 }
 ],
 "series": [
 {
 "type": "radar",
 "tooltip": {
 "trigger": "item"
 },
 "areaStyle": {},
 "data": [
 {
 "value": [
 95,
 90,
 60,
 75,
 100,
 70
 ],
 "name": "能力值"
 }
 ]
 }
 ]
}

```

## 甘特图

```

{
 "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
 ]
 }
 ]
}

```

## 区域折线图

```

{
 title: {
 text: '彩虹折线图'
 },
 tooltip: {
 trigger: 'axis',
 axisPointer: {
 type: 'cross',
 label: {
 backgroundColor: '#6a7985'
 }
 }
 },
 legend: {
 data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
 },
 toolbox: {
 feature: {
 saveAsImage: {}
 }
 },
 grid: {
 left: '3%',
 right: '4%',
 bottom: '3%',
 containLabel: true
 },
 xAxis: [
 {
 type: 'category',
 boundaryGap: false,
 data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
 }
 ],
 yAxis: [
 {
 type: 'value'
 }
 ],
 series: [
 {
 name: '邮件营销',
 type: 'line',
 stack: '总量',
 areaStyle: {},
 emphasis: {
 focus: 'series'
 },
 data: [120, 132, 101, 134, 90, 230, 210]
 },
 {
 name: '联盟广告',
 type: 'line',
 stack: '总量',
 areaStyle: {},
 emphasis: {
 focus: 'series'
 },
 data: [220, 182, 191, 234, 290, 330, 310]
 },
 {
 name: '视频广告',
 type: 'line',
 stack: '总量',
 areaStyle: {},
 emphasis: {
 focus: 'series'
 },
 data: [150, 232, 201, 154, 190, 330, 410]
 },
 {
 name: '直接访问',
 type: 'line',
 stack: '总量',
 areaStyle: {},
 emphasis: {
 focus: 'series'
 },
 data: [320, 332, 301, 334, 390, 330, 320]
 },
 {
 name: '搜索引擎',
 type: 'line',
 stack: '总量',
 label: {
 show: true,
 position: 'top'
 },
 areaStyle: {},
 emphasis: {
 focus: 'series'
 },
 data: [820, 932, 901, 934, 1290, 1330, 1320]
 }
 ]
}

```