Echarts-开始做图

Echarts
字数统计: 1.8k   |   阅读时长≈ 7 分钟

Echarts

本文将采用以下示例：

基本柱形图：Examples - Apache ECharts

坐标轴刻度与标签对齐：Examples - Apache ECharts

条形图：Examples - Apache ECharts

南丁格尔玫瑰图：Examples - Apache ECharts

折线图：Examples - Apache ECharts

旭日图：Examples - Apache ECharts

桑吉图：Examples - Apache ECharts

选取模板

选取官方示例中的基础柱状图作为示例，链接如下：Examples - Apache ECharts

选择完整代码，除去第一行粘贴入框架中option部分。

数据准备

学院 男 女
物电 140 60
数科 80 50
经管 100 130
环境 90 80
生科 80 85
音乐 30 50
体育 80 40
文学 60 40
法学 100 120

首先，把数据粘贴到Echarts官方给出的“表格工具”中，链接如下：Spreadsheet Tool - Apache ECharts。

删除第一行数据。

在右侧选项栏中可以对数据格式进行调整，调节数据格式与官方示例中的数据格式一致即可。

把数据粘贴到代码对应位置。

在浏览器中打开即可。

坐标轴刻度与标签对齐

打开示例：Examples - Apache ECharts。

找到对应代码：

1
2
3
axisTick: {
        alignWithLabel: true
      }

代码注释：

tooltip：设置提示框

设置提示框

1
2
3
tooltip: {
  trigger: 'axis'
},

降序排列

打开示例：Examples - Apache ECharts。

由于数据格式改变，我们重新转换格式，方法同上，选择“每两列转换成一个二维数组”。

再加上上面的语句。

条形图

把xaxis和yaxis名字换一下就行。

极坐标

打开示例：Examples - Apache ECharts。

在表格工具中选择“每一列转换为一个一维数组”

直接修改data中的数据即可。

南丁格尔玫瑰图

官方示例：Examples - Apache ECharts

这里可以直接修改数据。

1
2
3
4
5
6
7
8
9
[
    { value: 4400, name: '亚洲' , itemStyle: {color: '#DF2F2F'}},
    { value: 3000, name: '非洲' , itemStyle: {color: '#DB6D23'}},
    { value: 2400, name: '北美洲' , itemStyle: {color: '#F3A502'}},
    { value: 1800, name: '南美洲' , itemStyle: {color: '#6AA006'}},
    { value: 1400, name: '南极洲' , itemStyle: {color: '#14539A'}},
    { value: 1000, name: '欧洲' , itemStyle: {color: '#87409C'}},
    { value: 900, name: '大洋洲' , itemStyle: {color: '#7F3912'}}
]

修改颜色：

1
2
3
data: [
        { value: 40, name: 'rose 1' , itemStyle: {color: '#516b91'}}
      ]

缺点：数据处理不太方便，除非掌握js语言，建议外部处理好数据后在这里画图比较方便。

气泡图

emphasis.focus：series（高亮当前序列），self（高亮当前值）

旭日图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var data = [{ 'name': '化学化工学院', 'children': [{ 'name': '化学', 'value': 11 }, { 'name': '应用化学', 'value': 7 }, { 'name': '材料化学', 'value': 6 }, { 'name': '化学类', 'value': 2 }] }, { 'name': '物理电子工程学院', 'children': [{ 'name': '电子信息科学与技术', 'value': 8 }, { 'name': '物理学(国家基地)', 'value': 5 }, { 'name': '光电信息科学与工程', 'value': 4 }] }, { 'name': '初民学院', 'children': [{ 'name': '大数据金融试验班', 'value': 2 }, { 'name': '生化试验班', 'value': 2 }, { 'name': '金融学', 'value': 1 }, { 'name': '生物科学', 'value': 1 }] }, { 'name': '数学科学学院', 'children': [{ 'name': '数学类', 'value': 5 }, { 'name': '数学与应用数学', 'value': 1 }] }, { 'name': '音乐学院', 'children': [{ 'name': '舞蹈编导', 'value': 4 }, { 'name': '音乐表演', 'value': 1 }] }, { 'name': '计算机与信息技术学院', 'children': [{ 'name': '数据科学与大数据技术', 'value': 3 }] }, { 'name': '生命科学学院', 'children': [{ 'name': '生物科学类', 'value': 2 }] }, { 'name': '体育学院', 'children': [{ 'name': '运动训练', 'value': 2 }] }, { 'name': '历史文化学院', 'children': [{ 'name': '考古学', 'value': 1 }] }, { 'name': '美术学院', 'children': [{ 'name': '环境设计', 'value': 1 }] }, { 'name': '文学院', 'children': [{ 'name': '汉语言文学', 'value': 1 }] }, { 'name': '哲学社会学学院', 'children': [{ 'name': '哲学类', 'value': 1 }] }]

option = {
    title: {
        text: '山西大学学院专业分布图',
        subtext: '来源：山西大学',
    },
    tooltip: {},
    series: {
        type: 'sunburst',
        data: data,
        radius: [0, '95%'],
        sort: 'desc',
        emphasis: {
            focus: 'descendant'
        },
        levels: [
            {},
            {
                r0: '15%',
                r: '50%',
                itemStyle: {
                    borderWidth: 2
                },
                label: {
                    fontSize: 10,
                    rotate: 'radial'
                }
            },
            {
                r0: '50%',
                r: '95%',
                label: {
                    align: 'right'
                }
            }
        ]
    }
};

桑吉图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
var nodes = [
    { 'name': '建筑电气与智能化', 'itemStyle': { 'color': '#FFFFD9' } },
    { 'name': '能源与动力工程', 'itemStyle': { 'color': '#F4FBC2' } },
    { 'name': '环境科学与工程类', 'itemStyle': { 'color': '#D1EDB3' } },
    { 'name': '建筑环境与能源应用工程', 'itemStyle': { 'color': '#E7F5B1' } },
    { 'name': '机械电子工程', 'itemStyle': { 'color': '#D1EDB3' } },
    { 'name': '生物科学类', 'itemStyle': { 'color': '#89D1BA' } },
    { 'name': '工商管理类', 'itemStyle': { 'color': '#41B6C4' } },
    { 'name': '化学类', 'itemStyle': { 'color': '#64C3BE' } },
    { 'name': '电气工程及其自动化', 'itemStyle': { 'color': '#2CA0C1' }, 'label': { 'color': 'white' } },
    { 'name': '计算机科学与技术', 'itemStyle': { 'color': '#206CAE' }, 'label': { 'color': 'white' } },
    { 'name': '电子信息工程', 'itemStyle': { 'color': '#1D89BC' }, 'label': { 'color': 'white' } },
    { 'name': '数据科学与大数据技术', 'itemStyle': { 'color': '#2252A2' }, 'label': { 'color': 'white' } },
    { 'name': '经济学类', 'itemStyle': { 'color': '#243A96' }, 'label': { 'color': 'white' } },
    { 'name': '成绩优秀', 'itemStyle': { 'color': '#182A7A' }, 'label': { 'color': 'white' } },
    { 'name': '其他情况', 'itemStyle': { 'color': '#081D58' }, 'label': { 'color': 'white' } },
]

var links = [
    { 'source': '生物科学类', 'target': '计算机科学与技术', 'value': 5 },
    { 'source': '能源与动力工程', 'target': '电子信息工程', 'value': 3 },
    { 'source': '能源与动力工程', 'target': '电气工程及其自动化', 'value': 6 },
    { 'source': '建筑环境与能源应用工程', 'target': '电子信息工程', 'value': 3 },
    { 'source': '建筑环境与能源应用工程', 'target': '电气工程及其自动化', 'value': 3 },
    { 'source': '建筑电气与智能化', 'target': '电气工程及其自动化', 'value': 24 },
    { 'source': '机械电子工程', 'target': '电气工程及其自动化', 'value': 5 },
    { 'source': '环境科学与工程类', 'target': '数据科学与大数据技术', 'value': 3 },
    { 'source': '环境科学与工程类', 'target': '计算机科学与技术', 'value': 2 },
    { 'source': '化学类', 'target': '计算机科学与技术', 'value': 3 },
    { 'source': '工商管理类', 'target': '经济学类', 'value': 3 },
    { 'source': '计算机科学与技术', 'target': '成绩优秀', 'value': 10 },
    { 'source': '电子信息工程', 'target': '成绩优秀', 'value': 6 },
    { 'source': '电气工程及其自动化', 'target': '成绩优秀', 'value': 34 },
    { 'source': '电气工程及其自动化', 'target': '其他情况', 'value': 4 },
    { 'source': '数据科学与大数据技术', 'target': '成绩优秀', 'value': 3 },
    { 'source': '经济学类', 'target': '成绩优秀', 'value': 3 }
]

option = {
    title: {
        text: '山西大学转专业示意图'
    },
    tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
    },
    series: [
        {
            type: 'sankey',
            data: nodes,
            links: links,
            emphasis: {
                focus: 'adjacency'
            },
            nodeWidth: 145,
            nodeGap: 0,
            top: '8%',
            right: '5%',
            label: {
                position: 'inside'
            },
            levels: [
                {
                    depth: 0,
                    lineStyle: {
                        color: 'source',
                        opacity: 0.6
                    }
                },
                {
                    depth: 1,
                    lineStyle: {
                        color: 'source',
                        opacity: 0.6
                    }
                }
            ],
            lineStyle: {
                curveness: 0.5
            }
        }
    ]
}

北京AQI

1
2
3
4
5
xAxis: {
        data: data.map(function (item) {
          return item[0];
        })
      }

该代码使用了JavaScript数组的map方法，该方法遍历数组中的每个元素（选择data中的第一个元素）并执行操作（此处是返回第一个值）。传入的参数是一个函数。

1680013342536

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ECharts</title>
    <!-- 引入刚刚下载的 ECharts 文件 -->
    <script src="echarts.js"></script>
</head>

<body>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="main" style="width: 800px;height:600px;"></div>
    <script type="text/javascript">

        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;

        option = {
            title: {
                text: 'Beijing AQI',
                left: '1%'
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                left: '5%',
                right: '15%',
                bottom: '10%'
            },
            xAxis: {
                data: ['2020/1/1', '2020/1/2', '2020/1/3']
            },
            yAxis: {},
            toolbox: {
                right: 10,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    restore: {},
                    saveAsImage: {}
                }
            },
            dataZoom: [
                {
                    startValue: '2014-06-01'
                },
                {
                    type: 'inside'
                }
            ],
            visualMap: {
                top: 50,
                right: 10,
                pieces: [
                    {
                        gt: 0,
                        lte: 50,
                        color: '#93CE07'
                    },
                    {
                        gt: 50,
                        lte: 100,
                        color: '#FBDB0F'
                    },
                    {
                        gt: 100,
                        lte: 150,
                        color: '#FC7D02'
                    },
                    {
                        gt: 150,
                        lte: 200,
                        color: '#FD0100'
                    },
                    {
                        gt: 200,
                        lte: 300,
                        color: '#AA069F'
                    },
                    {
                        gt: 300,
                        color: '#AC3B2A'
                    }
                ],
                outOfRange: {
                    color: '#999'
                }
            },
            series: {
                name: 'Beijing AQI',
                type: 'line',
                data: [110, 158, 216],
                markLine: {
                    silent: true,
                    lineStyle: {
                        color: '#333'
                    },
                    data: [
                        {
                            yAxis: 50
                        },
                        {
                            yAxis: 100
                        },
                        {
                            yAxis: 150
                        },
                        {
                            yAxis: 200
                        },
                        {
                            yAxis: 250
                        }
                    ]
                    // markLine: {
                    //     data: [
                    //         [
                    //             { coord: [2, 100] },
                    //             { coord: [3, 200] }
                    //         ],
                    //         [
                    //             {},
                    //             {}
                    //         ]
                    //     ]
                    // }
                }
            }
        }
        option && myChart.setOption(option);
    </script>
</body>

</html>
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！

扫一扫，分享到微信

微信分享二维码
  • Copyrights © 2022-2023 发现美的眼睛
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~

支付宝
微信