数据可视化（Echarts、antv）

A、Echarts

a、安装：npm i echarts@4.9.0

b、在main.js中配置：

import * as echarts from 'echarts'

Vue.prototype.echarts = echarts

c、在vue组件的虚拟DOM中定义echarts的挂载点

d、对echarts的各个配置项进行配置（以柱状图bar为例）

title：图表的标题

tooltip：鼠标悬浮在图表上时显示的提示信息

xAxis：x轴的文本

yAxis：y轴的文本

series：是一个数组，包含多个对象，一个对象就是图表中一组柱子

type：表示的图表的类型（bar表示柱状态图、line表示折线图、pie表示饼图......）

data：是一个数组，有多少个单元就显示多少个柱子

B、vue-echarts模块的使用

a、安装：npm i vue-echarts

b、导入：

import 'echarts'
import VueECharts from "vue-echarts";
import "echarts/lib/chart/bar";复制

c、在vue组件中注册vue-echarts

import Echarts from 'vue-echarts'
export default {
     name: 'App',
     components: {
        'v-chart':VueECharts
     }
}复制

d、在vue组件的data函数中定义vue-echarts配置项

 
data(){
    return {
      bar: {
        color: ["#ffdd38", "#0fc7ab"], // 柱状图颜色设置
        title: {
          text: "Vue-ECharts 入门示例",
          left: 'center'             //标题居中
        },
        tooltip: {},
        animation: false, //不显示动画效果
        legend: {  //图例设置
          //show: false, //是否显示图例
          icon: "circle", // 将图例设置成原型
          bottom: 0,  //图例显示的位置
          left: "center",
          itemWidth: 10,
          itemHeight: 10,
 
        },
        xAxis: { //x轴显示的内容
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"],
          axisLabel: {
            rotate: -30 //显示内容的倾斜度
          }
        },
        yAxis: [
          {
            type: 'value',
            name: '销量',
            min: 0,    //设置y轴刻度的最小值
            max: 40,   //设置y轴刻度的最大值
            interval: 5, //y轴的间隔数
            axisLabel: { //y轴标签的显示格式
              formatter: '{value}件'
            },
            splitLine: { //y轴分隔线
              show: true, //显示分隔线
              lineStyle: {
                type: "dashed", //线型
                color: 'red' //线条颜色
              }
            },
            axisLine: {
              show: true, //是否显示坐标轴轴线
            },
            axisTick: {
              show: false, //去掉y轴刻度线
            }
          }
        ],
        series: [
          {
            name: "实体店",
            type: "bar",
            data: [5,20,36,10,10,20]
          },
          {
            name: "网店",
            type: "bar",
            data: [15,30,39,18,22,35]
          }
        ]
      }
    }
  }
}复制

e、在vue组件的DOM中应用

<template>
    <div>
         <v-chart :options="woniu"></v-chart>
    </div>
</template>复制

实现的效果图

f、在app.vue中引用

B、AntV数据可视化

简介： AntV 是一套专业的数据可视化规范，这套规范的目的是为了让可视化的使用者更懂数据可视化。这套规范是蚂蚁金服在可视化建设过程中的理论沉淀，它可以很好得指引产品经理，设计师和工程师怎样正确得使用可视化及可视化技术，规避常见的错误。

2、全局使用方法

yarn add @antv/g2

或

npm install @antv/g2

（2）全局使用（在main.js中挂在到vue原型实例中）

const G2 = require('@antv/g2')
Vue.prototype.$G2 = G2复制

（3）vue组件中能够直接在mounted生命周期中直接使用

<template>
  <div id="c1"></div>
</template>
 
//script内容
export default {
  name: "AntV",
  data(){
    return {
      msg: "",
      chart: null,
      data: [
        { genre: "运动", sold: 275 },
        { genre: "行动", sold: 115 },
        { genre: "动作", sold: 120 },
        { genre: "设计", sold: 350 },
        { genre: "其他", sold: 150 }
      ]
    }
  },
  methods:{
    initComponent() {
      const chart = new this.$G2.Chart({
        container: "c1",
        width: 600,
        height: 300
      });
      chart.source(this.data);
      chart
          .interval()
          .position("genre*sold")
          .color("genre");
      this.chart = chart;
      this.chart.render();
    }
  },
  mounted() {
    this.initComponent()
  }
}复制

（4）在app.vue中引用

代码的运行效果图

3、按需使用方法

（1）安装antv/g2

yarn add @antv/g2 
或
npm install @antv/g2复制

（2）在组件中按需引入

<template>
  <div>
    <div id="l1"></div>
  </div>
</template>
 
//<script>部分
import { Chart } from "@antv/g2";
export default {
  name: "AntV2",
  data() {
    return {
      year: [
        { year: "1991", value: 3 },
        { year: "1992", value: 4 },
        { year: "1993", value: 3.5 },
        { year: "1994", value: 5 },
        { year: "1995", value: 4.9 },
        { year: "1996", value: 6 },
        { year: "1997", value: 7 },
        { year: "1998", value: 9 },
        { year: "1999", value: 13 }
      ]
    };
  },
  methods: {
     initLineChart(){
      //创建图表对象
      const chart = new Chart({
        container:'l1',//表示挂载图表的DOM元素的id
        autoFit:true,//开启自适应
        height:500//图表的高度
      });
      chart.data(this.years);//设置图表中的数据
      chart.scale({//设置图标的刻度
        year:{//刻度的数据依存
          range:[0,1]//刻度数据的范围
        },
        value:{//刻度值，最小是0
          min:0,
          nice:true
        }
      });
      chart.tooltip({//鼠标悬停时的信息
        showCrosshairs:true,//展现tooltip辅助线
        shared:true
      });
      chart
            .line()//图表的类型
            .position('year*value')
            .label('value');
      chart.point().position('year*value');
      chart.render();//渲染折线图
    }
  },
  mounted() {
    this.initLineChart()
  }
}复制

(3)在app.vue中引用

运行效果图

4、水平柱状图

（1）安装：npm i @antv/g2plot

（2）在组件中引入：import { Bar } from "@antv/g2plot"

import {Bar} from '@antv/g2plot'复制

（3）创建图表对象：

<template>
  <div>
    <div id="l2"></div>
  </div>
</template>
 
//<script>里内容
import { Bar } from "@antv/g2plot"
export default {
  name: "AntV2",
  data() {
    return {
      years: [
        { year: "1991", value: 3 },
        { year: "1992", value: 4 },
        { year: "1993", value: 3.5 },
        { year: "1994", value: 5 },
        { year: "1995", value: 4.9 },
        { year: "1996", value: 6 },
        { year: "1997", value: 7 },
        { year: "1998", value: 9 },
        { year: "1999", value: 13 }
      ]
    };
  },
  methods: {
    initBar(){
 //第一个参数表示挂载图表的DOM元素的id
      const bar = new Bar('l2', {
        data:this.years,
        xField: 'value',
        yField: 'year',
        seriesField: 'year',
        legend: {
          position: 'top-left',
        }
      });
      bar.render();
    }
  },
  mounted() {
    this.initBar()
  }
}复制

（4）在app.vue中引用

代码运行的效果图