Vue中使用数据可视化Echarts图表展示

目录

Echarts--商业级数据图表

Echarts支持的图表　

Echarts的使用方法

---

Echarts--商业级数据图表

商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。Apache ECharts

---

Echarts支持的图表　

折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）

雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表

---

Echarts的使用方法

一、首先在vue中下载echarts   命令：npm install echarts --save 

二、在所在页面进行引用

 代码块部分

<template>

  <div class="contetn">

    <div id="main" ref="chart" style="width: 100%; height: 400px"></div>

  </div>

</template>

<script>

import * as echarts from "echarts";   //引用echarts

export default {

  data() {

    return {

      myChart: "",

    };

  },

  mounted() {

    this.init();

    var self = this;

    window.onresize = self.myChart.resize;

    window.addEventListener("resize", function() {

      self.myChart.resize();

    });

  },

  methods: {

    init() {

      this.myChart = echarts.init(this.$refs.chart);

      var option = {

        title: {

          // text: "堆叠区域图",

        },

        tooltip: {

          trigger: "axis",

          axisPointer: {

            type: "cross",

            label: {

              backgroundColor: "#6a7985",

            },

          },

        },

        legend: {

          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"],

        },

        grid: {

          left: "3%",

          right: "4%",

          bottom: "3%",

          containLabel: true,

        },

        xAxis: [

          {

            type: "category",

            boundaryGap: false,

            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],

          },

        ],

        yAxis: [

          {

            type: "value",

          },

        ],

        series: [

          {

            name: "邮件营销",

            type: "line",

            stack: "总量",

            areaStyle: {},

            data: [120, 132, 101, 134, 90, 230, 210],

          },

          {

            name: "联盟广告",

            type: "line",

            stack: "总量",

            areaStyle: {},

            data: [220, 182, 191, 234, 290, 330, 310],

          },

          {

            name: "视频广告",

            type: "line",

            stack: "总量",

            areaStyle: {},

            data: [150, 232, 201, 154, 190, 330, 410],

          },

          {

            name: "直接访问",

            type: "line",

            stack: "总量",

            areaStyle: {},

            data: [320, 332, 301, 334, 390, 330, 320],

          },

          {

            name: "搜索引擎",

            type: "line",

            stack: "总量",

            label: {

              normal: {

                show: true,

                position: "top",

              },

            },

            areaStyle: {},

            data: [820, 932, 901, 934, 1290, 1330, 1320],

          },

        ],

      };

      this.myChart.setOption(option);

    },

  },

};

</script>

 效果图

---

后续（动图）

<template>
  <div class="contetn">
    <div id="main" ref="chart" style="height: 500px"></div>
  </div>
</template>
 
<script>
import * as echarts from "echarts"; //引用echarts

export default {
  data() {
    return {
      myChart: "",
    };
  },

  mounted() {
    this.init();
    var self = this;
    window.onresize = self.myChart.resize;
    window.addEventListener("resize", function () {
      self.myChart.resize();
    });
  },

  methods: {
    init() {
      this.myChart = echarts.init(this.$refs.chart);
      var option = {
        backgroundColor: "#c4e0da",
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月份",
            "二月份",
            "三月份",
            "四月份",
            "五月份",
            "六月份",
            "七月份",
            "八月份",
            "九月份",
            "十月份",
            "十一月份",
            "十二月份",
          ],
        },
        legend: {
          data: ["2020", "2021", "2022"],
        },
        grid: {
          left: ".5%",
          right: "2%",
          bottom: "5%",
          containLabel: true,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [100, 350, 400, 140, 710, 450, 200, 70, 20, 170, 10, 510],
            name: "2020",
            type: "bar",
            smooth: true,
          },
          {
            data: [100, 250, 500, 40, 10, 450, 20, 700, 200, 70, 40, 550],
            name: "2021",
            type: "pie",
            smooth: true,
          },
          {
            data: [100, 150, 600, 740, 710, 50, 210, 10, 100, 10, 110, 50],
            name: "2022",
            type: "line",
            smooth: true,
          },
        ],
      };
      var res = [
        [500, 750, 200, 240, 710, 450, 200, 700, 200, 170, 410, 550],
        [300, 100, 10, 20, 110, 50, 200, 70, 10, 10, 400, 510],
        [100, 700, 280, 1240, 710, 1350, 1100, 1700, 400, 170, 140, 550],
        [750, 1050, 5050, 4500, 500, 1500, 350, 250, 4000, 4100, 4050, 150],
        [500, 800, 5500, 4050, 5050, 1050, 3500, 250, 400, 4100, 450, 1050],
        [50, 150, 50, 450, 500, 500, 50, 20, 400, 100, 50, 150],
      ];
      this.myChart.setOption(option);
      setInterval(() => {
        var i = parseInt(Math.random() * res.length);
        console.log(i);
        option.series[0].data = res[i];
        option.series[1].data = res[i + 1];
        option.series[2].data = res[i + 2];
        this.myChart.setOption(option);
      }, 800);
    },
  },
};
</script>