前言

最近有在学习一下数据可视化的内容，这里就纯记录一下Vue2实现基于 JavaScript 的开源可视化图表库

安装

npm install echarts --save

引入

import * as echarts from 'echarts'; //引入echarts Vue.prototype.$echarts = echarts //全局引用echarts

实现

自定义一个vue组件

<template>
  <!-- 定义一个柱形图的echart容器 -->
  <div ref="myChart" style="width: 50%; height: 520px"></div>
</template>  

  data() {
    return {
      //柱形图、线型图案例可在官网获取相应数据
      option: {
        title: {
          text: "ECharts 入门示例",
        },
        tooltip: {},
        /* 图例组件 */
        legend: {
          data: ["销量"],
        },
        /* X轴数据 */
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        /* Y轴数据 */
        yAxis: {},
        /* 系列列表。每个系列通过 type 决定自己的图表类型 */
        series: [
          {
            name: "销量",
            type: "bar", //类型 bar：柱形图 、line、线型图
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      },
   
    };
  },
methods: {
    setMyEchart() {
      const myChart = this.$refs.myChart; //通过ref获取到DOM节点
      if (myChart) {
        const thisChart = this.$echarts.init(myChart); //利用原型调取Echarts的初始化方法
        const option = this.option; //{}内写需要图表的各种配置，可以在官方案例中修改完毕后复制过来
        thisChart.setOption(option); //将编写好的配置项挂载到Echarts上
        window.addEventListener("resize", function () {
          thisChart.resize(); //页面大小变化后Echarts也更改大小
        });
      }
    },
  },
  mounted() {
    this.setMyEchart(); //页面挂载完成后执行
  },