在vue中使用echars图表及element ui

在vue中使用echars图表及element ui

前端项目中，通常会使用到一些图表库，为了极大可能的以图形形式化展示出数据的波动及其发展趋势，图形化展示数据，简单明了，层次鲜明，从而有利于数据分析，为后期的发展规划提供合理的建议及其优化。

echars是百度开源的一个JavaScript 实现的开源可视化库，里面有许多图形化视图模板及其说明文档，感兴趣的均可以使用其模板开发属于自己的大屏及其数据分析监控系统。

echars官方实例
快速上手echars

当然，除了echars,还有一些比较好用的图形化插件库，比如

1.highcharts官方实例
highcharts官方Api

2.d3.js

3.Threejs

4.webJL

等等，这类图表库有很多，欢迎大家补充。

今天简单整理一下：

一，vue中使用echars图表库

当然vue也有自己内置的图表库：vue-chartjs
在vue中使用echars图表库的方式及其在工作中所使用的一些图表。

首选在vue项目文件夹下：初始化安装echarts

npm install echarts -S

然后在main.js中全局引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts   //Vue.prototype.$echarts = echarts

在想要展示的页面中使用

首先引入：

import echarts from "echarts";

页面中
引入element ui组件：下拉框el-select
elementui官网

根据选择下拉条件渲染动态折线图

  <el-select  @change="getValue"
                  multiple
                  collapse-tags
                  class="el-select"
                  v-model="value2"
                  style="height: 104px; width: 272px; font-size: 30px"
                  placeholder="数据分析"
                >
                  <el-option
                    class="el-option"
                    v-for="item in option"
                    :key="item.label"
                    :label="item.value"
                    :value="item.label"
                  ></el-option>
   </el-select>

使用table，在每一横向列表中平铺展开折线图

 <table>
            <!--添加动态例子，设置折线图画布  -->
            <!-- 引入容器 -->
            <tr class="tab-nav clear">
              <td id="1" style="width: 85%; height: 100%"></td>
              <td class="fplay"></td>
            </tr>
            <tr>
              <td id="2" style="width: 770px; height: 256px"></td>
              <td class="fplay"></td>
            </tr>

            <tr>
              <td id="3" style="width: 770px; height: 256px"></td>
              <td class="fplay"></td>
            </tr>

            <tr>
              <td id="4" style="width: 770px; height: 256px"></td>
              <td class="fplay"></td>
            </tr>

            <tr>
              <td id="5" style="width: 770px; height: 256px"></td>
              <td class="fplay"></td>
            </tr>

            <tr>
              <td id="6" style="width: 770px; height: 256px"></td>
              <td class="fplay"></td>
            </tr>
            <div class="flag">
              <img src="../assets/img/f1.jpg" alt />
              <img src="../assets/img/f2.jpg" alt />
              <img src="../assets/img/f3.jpg" alt />
              <img src="../assets/img/f6.jpg" alt />
            </div>
          </table>

自动获取接口数据,取数据存储于各数组。

  data() {
    return {
      charts: "",
      opinionData: [],
      movetime: [],
      //仪表盘的数据
      yangshow: [],
      eyangshow: [],
      eeMshow: [],
      rqqshow: [],
      //isActive:main,
      //能量
      PeeMin: [],
      ptDate: [],

      fGluc: [],
      fgDate: [],
   
      isShow: false,
      isShow2: false,
      isShow3: false,
      isShow4: false,
      isShow5: false,
      isShow6: false,
      //数据分析
      option: [
        {
          value: "光照温湿度",
          label: "1",
        },
        {
          value: "能量",
          label: "2",
        },
        {
          value: "血氧",
          label: "3",
        },
        {
          value: "血糖",
          label: "4",
        },
        {
          value: "心率",
          label: "5",
        },
        {
          value: "体温",
          label: "6",
        },
      ],
      //设置行为分析数据
      motion: [
        {
          value: "选项a",
          label: "吃饭",
        },
        {
          value: "选项b",
          label: "睡觉",
        },
        {
          value: "选项c",
          label: "骑单车",
        },
      ],
      //设置时间
      options: [
        {
          value: "选项a",
          label: "08小时",
        },
        {
          value: "选项b",
          label: "12小时",
        },
        {
          value: "选项b",
          label: "24小时",
        },
      ],
      testman: [
        {
          value: "选项a",
          label: "Zhang",
        },
        {
          value: "选项b",
          label: "Wang",
        },
        {
          value: "选项c",
          label: "Li",
        },
      ],
      cangwei: [
        {
          value: "选项a",
          label: "舱一",
        },
        {
          value: "选项b",
          label: "舱二",
        },
      ],
      value1: [], //行为分析
      value2: [], //数据分析
      people: [], //受试者
      cang: [], //舱位
      value5: [], //时间
      count: [
        {
          count: 0,
        },
      ],
    };
  },
  mounted() {
    this.getData();
  },

根据选择触发方法

  getValue: function () {
  
      this.$store.commit("add");
      if (this.$store.state.count == 1) {
      
        this.isShow = !this.isShow;
        this.drawLine2(this.$store.state.count);
      } else if (this.$store.state.count == 2) {
      
        this.isShow2 = !this.isShow2;
        this.drawLine4(this.$store.state.count);
      } 
    },

折线图的渲染方法

  drawLine2(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption(
        {
          color: ["#FF0000"],
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["能量"],
          },
          grid: {
            left: "0.3%",
            right: "0.4%",
            bottom: "3%",
            containLabel: true,
          },
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          xAxis: [
            {
              scale: true,
              type: "category",
              boundaryGap: true, //标签和数组显示在刻度下面，x轴点
              data: this.ptDate,
              axisTick: {
                alignWithLabel: true,
                show: true, //展示刻度线
              },
              axisLine: {
                lineStyle: {
                  opacity: 0, //透明度为0
                  show: true, //隐藏刻度线  //color:'red',//设置x轴的颜色
                },
                symbol: ["none", "arrow"],
              },
              axisLabel: {
                formatter(value) {
                  return value + ":00"; // 格式时间显示方式
                },
              },
              splitLine: {
                show: true, //缩放展示小网格  //网格线
                lineStyle: {
                  color: "#979797",
                },
              },
            },
            {
              type: "category",
              position: "bottom",
              offset: 25,
              axisPointer: {
                type: "none",
              },
            },
          ],
          //-------设置y轴-------------
          yAxis: {
            type: "value",
            axisLine: {
              lineStyle: {
                //坐标轴线
                color: "white", //y轴颜色
                type: "solid", //实线
              },
              symbol: ["none", "arrow"],
            },
            max: 0.8,
            nameTextStyle: {
              color: "blue", //设置文字样式
              align: "left", //文字水平对齐方式
              verticalAlign: "middle", //文字垂直对齐方式
            },
            //  splitLine: {
            //          show: false//去掉分割线 //去调坐标的刻度分割线
            //      },
          },
          series: [
            {
              //  type: 'effectScatter',
              //  symbolSize: 20,
              //  data: [
              //     [72.7, 15.2],
              //     [13.4, 42]
              //     [72.7, 15.2],
              //     [13.4, 42]
              //       ]
              name: "能量",
              type: "line",
              stack: "总量",
              symbol: "none", //设置拐点样式circle,none,star(拐点为方块)
              symbolSize: 8, //设置拐点的大小
              smooth: 0.2, //折线弧度，变得不生硬
              data: this.PeeMin,
              barWidth: "80%",

              itemStyle: {
                //设置线条颜色样式
                normal: {
                  color: "white",
                  lineStyle: {
                    width: 3, //设置线条粗细
                  },

                  label: {
                    //设置折点上的文字以及背景颜色
                    show: true,
                    color: "white",
                    backgroundColor: "black",
                  },
                },
              },
            },
          ],
          //-------设置滑动查看进度-----------
          //设置滚动条拉取折线条。
          dataZoom: {
            //type:'slide',//滑动方式
            type: "inside", //拉动方式
            show: true,
            realtime: true,
            y: 36,
            height: 20,
            start: 50,
            end: 100,
            orient: "horizontal", //设置滑块的布局方向
            top: "bottom",
            zoomOnMouseWhel: true, //设置鼠标滚轮缩放
          },
        },
        //防止越界,重新绘制
        (window.onresize = this.charts.resize)
      );
    },

最终可以实现选择下拉框的数值，实现根据选择条件分别展示。
比如：能量消耗，心率，体温，血糖，光照温湿度，血氧等等。

二，vue中使用element ui

1，

npm安装elementui

npm i element-ui -S

2,在main.js中全局注册配置

import ElementUi from 'element-ui'
Vue.use(ElementUi)

3，页面中引用

 <el-select
                  @change="getValue"
                  multiple
                  collapse-tags
                  class="el-select"
                  v-model="value2"
                  style="height: 104px; width: 272px; font-size: 30px"
                  placeholder="数据分析"
                >
                  <el-option
                    class="el-option"
                    v-for="item in option"
                    :key="item.label"
                    :label="item.value"
                    :value="item.label"
                  ></el-option>
   </el-select>

可以根据自己需要的组件选择引入即可。