【Vue】（IDE）基于Vue+Echarts的数据可视化界面_vue代码生成器可视化界面

更酷炫的效果在下面这个链接，使用了Echarts更酷炫的图。
传送链接

一、 开发环境和背景简介

Vue中不太会导入js的文件格式，所以他的项目拿过来，运行之后空白一片。于是就自己看了Echarts文档重新编写，最后的效果在下面。
开发工具：IDE 2021.2 JDK1.8 。

Echarts官方文档

ElementUI官方文档
注释写的不是很详细，后面有时间再记录echarts怎么用的…
代码全部复制到你的页面上，可以直接用。
其实内容比较简单，但是对于我这种新手有很多复习的地方

1. 图表排列问题，如何让图表横向排列
2. 图表中的x轴y轴坐标的字体颜色，横向纵向排列如何设置。
3. 左上第2个图的渐变颜色如何设置。
4. 饼状图如何化成百分比数据？（右下第2个图）
5. 折线统计图中的线条颜色变换
6. 如右上角第一个饼状图，怎么设置标签颜色？
7. …

二、 效果

部分用户用了我的代码，效果可能不尽人意，各位可以根据自己浏览器显示效果，适当修改CSS样式。我个人用的时候为火狐浏览器。

三、思路

上面的效果要实现其实很简单，Echarts官方网站提供了许多实例，关键是怎么直接用他们提供的实例，来部署到我们的项目。因为数据不是从后端传递过来的，所以修改十分方便。
我们用左上第一张图来作个简单的说明：

1. 每一张图都有个 id ，后期我们将通过id来查找需要设计的echarts图。

   如下图所示，下面这块代码负责设置效果图左上角的条形统计图。它的id是 “myChart”.后面的代码只是设计这个条形统计图的宽度，大小，那么我们该如何设计具体条形统计图的样式呢？

<div id="myChart" :style="{width: '990px', height: '500px'}"
           style="background-color:#081832;height: 400px;margin-top: 20px;margin-left: 10px;"></div>
1
2

2.我们在method()中通过id对应你要修改的图，通过方法来设计对应图的样式设计方案（颜色，大小）

如下图：下面 getElementById(’ myChart’)，就是你上面给图设定的id.通过这个方法初始化echarts图例。

 methods: {
    drawLine() {
      /**********左上第一个表格**************/
        // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
.....},
...
}
1
2
3
4
5
6
7
8

3.根据你个人需求，从Echarts官方案例中修改样式

还是用第一张图做例子。我们先去Echarts官网中找你需要的实例，进入所有实例。这里有很多案例足够你用了。

例如我们进入折线统计图中：找到完整代码模块。这里的代码我们其实只要用option里面的参数即可。
在这次案例中，我们对效果图中左上角的条形统计图，在drawLine()方法中设计了它的详细样式。
我是定义一个变量  myChart   存储初始化的echarts图。即：

 methods: {
    drawLine() {
      let myChart = this.$echarts.init(document.getElementById('myChart'))
.....},
...
}
1
2
3
4
5
6

然后用 ，复制echarts给的代码：将红色方框包含的代码直接复制到        myChart.setOption{}方法内。就可以在你的页面生效。



下面就是第一个图的代码，供大家参考。后面几个图无非就是调整它的方位，模式跟下面这个一样的。如果代码中不懂的参数可以自己百度一下，很快就能百度到答案。

 drawLine() {
      /**********左上第一个表格**************/
        // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: {			//设置图表标题。
          text: '传染病数量分布',
          textStyle: {   //标题颜色
            color: '#ffffff'
          },
        },
        tooltip: {},
        xAxis: [{
          //横坐标值
          data: ["感染性腹泻", "流行性感冒", "登革热", "手足口病", "水痘", "流行性眼腺炎", "猩红热", "甲型病毒性肝炎", "疟疾"],
          axisLabel: {
            //下面的函数让x轴文字纵向显示
            formatter: function (value) {
              return value.split("").join("\n");
            },
            show: true,
            textStyle: {
              color: '#ffffff'
            },
          }
        },
          //控制y轴均分，白色分割线
          {
            type: 'value',
            scale: 'true',
            max: '200',
            min: '0',
            splitNumber: 5,
            boundaryGap: [0.2, 0.2]

          }
        ],
        //管理Y轴坐标格式。
        yAxis: {
          //不管是横坐标还是纵坐标，我们要是想调整坐标轴的label的文字颜色，就要设置axisLabel参数
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        //  legend用于控制说明图表标注部分的参数。
        //  修改左边的legend。增加itemWidth  设置宽度，itemHeight设置高度，itemGap设置间距，可以根据需要设置图形的大小以及间距。
        legend: {
          itemWidth: 30,
          itemGap: 40, itemHeight: 30,

        },
        //grid参数用于控制坐标整体位置，上下左右的方向调整。
        grid: [
          {
            top: '15%',  // 组件离容器上侧的距离,百分比字符串或整型数字
            left: '5%',    // 组件离容器左侧的距离,百分比字符串或整型数字
            right: '25%',
            bottom: '3%',
            containLabel: true //grid 区域是否包含坐标轴的刻度标签，
          }
        ],
        series: [
          {
            barWidth: '30',
            type: 'bar',
            //设置柱状图的柱形宽度
            barGap: '10%',
            data: [100, 250, 140, 110, 210, 250, 140, 200, 100],
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ['#5ac1df', '#fbf64e', '#fdc55b', '#c7b5fb', '#f8f5e9'];
                  return colorList[params.dataIndex % colorList.length];//想到取余可以快捷的实现对已有的颜色循环
                }
              }
            }
          }
        ],
      });
    },
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

4.method（）方法写好以后，我们用Vue的钩子函数：mounted()中，加入我们为图表设计的方法

method()方法设定好以后，我们还需要将写好的方法，加载到mouthed()方法中。

 this.drawLine();
1

这样，我们就能够显示图表到Web上了。


教程结束，欢迎直接享用下面的代码。

四、全部代码

全部代码下载链接

五、 设计总结

之前搜索过，如何设置两个图表（例如一个条形统计图和一个扇形统计图）在同一行显示。我用的方法是用一个大型的div包裹图表在里面，当div容器更改位置时，div标签内部的图表也会跟着移动的。然后用margin-left ,margin-top等等来控制它的方位，就是手动调试。

离离原上谱…为啥这么水的文章都能上榜…

----------------------------更新线 2021-12-4---------------------------------------------------