数据可视化大屏-新手入门

80 阅读 0 评论 53 点赞

我是靠谱客的博主温婉墨镜，这篇文章主要介绍数据可视化大屏-新手入门，现在分享给大家，希望可以做个参考。

官方网站：https://echarts.apache.org/examples/zh/index.html#chart-type-bar

1.所使用的技术栈

ECharts 图标绘制、

Vue、Vue Router、VueX 、Webpack 前端框架开发、

Axios 前后端数据的交互即是前端向后端的获取、

WebSocket 前后端数据的推送即是后端向前端的推送、

koa2 后端服务器开发、

2.ECharts基本用法

步骤1：引入echarts.min.js文件 (lib文件夹下 echarts.min.js文件)
复制代码 <script src="lib/echarts.min.js"></script>
1
2
  <script src="lib/echarts.min.js"></script>
步骤2：准备一个呈现图表的盒子 div
复制代码 <div style="width: 600px;height:400px"></div>
1
2
  <div style="width: 600px;height:400px"></div>
步骤3：初始化echarts实例对象
复制代码 var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
1
2
    var mCharts = echarts.init(document.querySelector("div")) // 初始化echarts实例对象
步骤4：准备配置项 option (此例为柱状图)
复制代码 var option = { title: { text: '成绩', // 标题文字 link: 'http://www.itcast.cn', // 标题超链接 textStyle: { // 标题样式设置 color: 'red' // 标题文字 } }, xAxis: { type: 'category', // 指明x轴为类目轴 data: ['小明', '小红', '小王'] // 为类目轴提供数据, 该数据是一个数组, 数组中的每个元素会呈现在x轴上 }, yAxis: { type: 'value' // 指明y轴为数值轴, 指明数值轴之后, 无需指定data，数据直接是series中的data }, series: [ { name: '语文', // 为图标起一个名称 type: 'bar', // 指明该图标类型为柱状图 data: [70, 92, 87], // 为x轴的每一个元素, 指明呈现在y轴的数值 markPoint: { // 标记点最大值和最小值 data: [ { type: "max", name: "最大值" }, { type: "min", name: "最小值" } ] }, markLine: { // 标记线平均值 data: [ { type: "average", name: "平均值" } ] }, label: { // 柱状图上的文字设置 show: true, // 是否显示 rotate: 60, // 旋转角度 position: "top" // 显示位置 }, barWidth: "30%", // 柱的宽度 } ] }
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
 var option = {
      title: {
        text: '成绩', // 标题文字
        link: 'http://www.itcast.cn', // 标题超链接
        textStyle: { // 标题样式设置
          color: 'red' // 标题文字
        }
      },
      xAxis: {
        type: 'category',  // 指明x轴为 类目轴
        data: ['小明', '小红', '小王'] // 为类目轴提供数据, 该数据是一个数组, 数组中的每个元素会呈现在x轴上
      },
      yAxis: {
        type: 'value'  // 指明y轴为 数值轴, 指明数值轴之后, 无需指定data，数据直接是series中的data
      },
      series: [
        {
          name: '语文', // 为图标起一个名称
          type: 'bar', // 指明该图标类型为 柱状图
          data: [70, 92, 87], // 为x轴的每一个元素, 指明呈现在y轴的数值
          markPoint: {    // 标记点  最大值和最小值
              data: [
                {
                  type: "max",
                  name: "最大值"
                },
                {
                  type: "min",
                  name: "最小值"
                }
              ]
            },
            markLine: { // 标记线  平均值
              data: [
                {
                  type: "average",
                  name: "平均值"
                }
              ]
            },
            label: {   // 柱状图上的文字设置
              show: true, // 是否显示
              rotate: 60, // 旋转角度
              position: "top" // 显示位置
            },
            barWidth: "30%", // 柱的宽度
        }
      ]
    }
步骤5：将配置项设置给echarts实例对象
mCharts.setOption(option)

3.总体代码：

lib/echarts.min.js文件

复制代码

1
https://gitee.com/yanyansun1/data-visualization/blob/master/第一天素材/04.资料/第三方库/echarts.min.js

index.html文件

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector('div'))
    var option = {
      title: {
        text: '成绩', 
        link: 'http://www.itcast.cn', 
        textStyle: { 
          color: 'red' 
        }
      },
      xAxis: {
        type: 'category', 
        data: ['小明', '小红', '小王'] 
      },
      yAxis: {
        type: 'value'  
      },
      series: [
        {
          name: '语文',
          type: 'bar', 
          data: [70, 92, 87] ,
          markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值"
                },
                {
                  type: "min",
                  name: "最小值"
                }
              ]
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值"
                }
              ]
            },
            label: {
              show: true, 
              rotate: 60, 
              position: "top" 
            },
            barWidth: "30%", 
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="lib/echarts.min.js"></script>
</head>
<body>
  <div style="width: 600px;height: 400px"></div>
  <script>
    var mCharts = echarts.init(document.querySelector('div'))
    var option = {
      title: {
        text: '成绩', 
        link: 'http://www.itcast.cn', 
        textStyle: { 
          color: 'red' 
        }
      },
      xAxis: {
        type: 'category', 
        data: ['小明', '小红', '小王'] 
      },
      yAxis: {
        type: 'value'  
      },
      series: [
        {
          name: '语文',
          type: 'bar', 
          data: [70, 92, 87] ,
          markPoint: {
              data: [
                {
                  type: "max",
                  name: "最大值"
                },
                {
                  type: "min",
                  name: "最小值"
                }
              ]
            },
            markLine: {
              data: [
                {
                  type: "average",
                  name: "平均值"
                }
              ]
            },
            label: {
              show: true, 
              rotate: 60, 
              position: "top" 
            },
            barWidth: "30%", 
        }
      ]
    }
    mCharts.setOption(option)
  </script>
</body>
</html>