vue工厂数据可视化模版 vue做数据可视化

一、什么是可视化

可视化就是可以通过视觉进行传达的。 再专业一点就可以解释为可视化（Visualization）是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，再进行交互处理的理论、方法和技术。

 将数据用丰富的元素展现出来！！

二、什么是Echarts

一个纯JavaScript图表库。ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。

Echarts 为商业级数据图表！！

三、Echarts的优点有哪些

• 开源软件，并且我们提供了非常炫酷的图形界面
• 国人开发，文档全，便于开发和阅读文档。
• 图表丰富，可以适用各种各样的功能。
• 使用简单，在官网中为我们封装了js，只要会引用就会得到完美的展示效果；
• 种类多，echarts实现简单，各类图形都有；相应的模板，还有丰富的API及文档说明，非常详细

四、Vue整合Echarts

 1.下载：

npm i echarts -S

2.vue引入Echarts：

import * as echarts from 'echarts'

(1)在main.js引入：

 (2)在所需的vue组件里面引入：

 3.在官网选择所需要的示例

将左侧的代码放入到我们的vue组件中

<script>
import * as echarts from 'echarts'

export default {
  name: "Index",
  data() {
    return {
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  mounted() {  //页面元素渲染之后再触发
    var option = {
      title: {
        text: "各季度会员数量统计",
        subtext: '趋势图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      xAxis: {
        type: 'category',
        data: ["第一季度", "第二季度", "第三季度", "第四季度"]
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: "213",
          data: [],
          type: 'line',
          color: 'black'
        },
        {
          name: "456",
          data: [],
          type: 'bar',
          color: 'LightCoral'
        }
      ]
    };
    //饼图
    var pieOption = {
      title: {
        text: '各季度会员数量统计',
        subtext: '比例图',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          type: 'pie',
          radius: '50%',
          label: {
            normal: {
              show: true,
              position: 'inner',
              textStyle: {
                fontWeight: 300,
                fontsize: 14,
                color: '#ccc'
              },
              formatter: '{d}%'
            }
          }
        }
      ]
    };
    //折线加柱状图
    var chartDom = document.getElementById('main');
    var myCharts = echarts.init(chartDom);
    //饼图
    var pieDom = document.getElementById('pie');
    var pieChart = echarts.init(pieDom);
    this.request.get("/echarts/members").then(res => {
      //填空
      // option.xAxis.data = res.data.x
      option.series[0].data = res.data
      option.series[1].data = res.data
      //数据准备完毕之后再set
      myCharts.setOption(option);
      pieOption.series[0].data = [
        { name: "第一季度", value: res.data[0] },
        { name: "第二季度", value: res.data[1] },
        { name: "第三季度", value: res.data[2] },
        { name: "第四季度", value: res.data[3] },
      ]
      pieChart.setOption(pieOption)
    })
  }
}
</script>

 五、效果图

⛵小结

以上就是对整合Echarts实现可视化界面简单的概述，本案例实现了Vue对Echarts的整合，整合后可大大提升数据的可视化，提升美观性！