基于Vue和Echarts实现数据可视化

基于Vue和Echarts实现数据可视化

记录项目开发过程中要求实现数字画像功能的相关部分

1.安装Echarts

在vue项目管理器中搜索依赖echarts并安装

或者使用npm进行安装。在项目文件目录中打开命令行，输入以下代码就可以安装Echart：

npm install echarts --save

2.引用Echarts

在main.js中添加如下代码

// 引入echarts
import echarts from 'echarts'
//在vue中设置Echart
Vue.prototype.$echarts = echarts

3.准备Echarts容器

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="chart1" style="width: 600px;height:400px;"></div>

4.绘制图表

示例：

<script type="text/javascript">
import * as echarts from "echarts";
export default {
  name: "MyComponent1",
  methods: {
   handleForward(key, keyPath) {
      this.$router.push("/page1");
    },
    initChart() {
      // 基于准备好的dom，初始化echarts实例
      var myChart1 = echarts.init(document.getElementById("chart1"));
      // 指定图表的配置项和数据
      var option1 = {
        title: {
          text: "本周学习时长",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line",
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart1.setOption(option1);
      //设置图表自适应父盒子大小
      window.addEventListener('resize',function(){
        myChart1.resize();
      })
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>

ECharts官网

更多详情可以去官网查看: Apache ECharts

官网里面也有使用方法，在官网的示例中可以直接调代码，如图

左边是代码，右边是实际效果，将代码调好之后代入自己的项目中即可。
官网还提供了许多种类型的图表，轻松实现数据可视化。