在Vue2项目中使用echarts实现动态数据可视化

更多图表可查看官网  链接：Apache ECharts

Echarts是一个基于JavaScript的开源可视化库，由百度开发和维护。它通过简单的配置方式，就可以实现各种复杂的数据可视化和图表展示。Echarts支持多种图表类型，包括柱状图、折线图、饼图、散点图、漏斗图等，同时还支持地图可视化和3D可视化效果。Echarts具有高度可定制性和交互性，支持动态数据更新和大数据量展示。Echarts提供了丰富的API和文档，可以方便地与其他前端框架整合。Echarts被广泛应用于数据可视化领域，特别是大数据分析和BI数据分析等领域。

一、引入echarts

1.1添加echarts包

npm install echarts --save

1.2命令成功后

二、全局引入echarts   在main.js中添加以下语句

// 全局引入EChars相关包
import * as echarts from 'echarts';
// 开启echarts
Vue.prototype.$echarts = echarts;

三、echarts示例图表

3.1首先创建一个区域作为echarts图表的画布并设置对应的宽高和ref  数据列表就不强调了

<template>
  <div>
        //数据列表
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column label="id" prop="id" />
      <el-table-column label="名称" prop="name" />
      <el-table-column label="价格" prop="price" />
    </el-table>
        //echarts
    <div style="display: flex; justify-content: space-around;">
      <div class="echart-box" ref="box"></div>
      <div class="echart-box" ref="boxpie"></div>
      <div class="echart-box" ref="boxline"></div>
    </div>
  </div>
</template>

3.2获取echarts初始化和绘制图表

3.3这里就不详解了，展示代码

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）,
//例如：import 《组件名称》 from '《组件路径》,
import axios from  "axios";
import * as $echarts from "echarts";
export default {
  //import引入的组件需要注入到对象中才能使用"
  components: {},
  props: {},
  data() {
    //这里存放数据"
    return {
      //表格数据
      filterTableData:[],
      //x轴数据
      x:[],
      //y轴数据
      y:[],
    }
  },
  computed: {
    //计算饼图属性
    dynamicPieData() {
      return this.filterTableData.map(item => ({
        value: item.price,
        name: item.name
      }));
    }
  },
  methods: {
  //获取商品列表
    getGoodsList(){
      axios.get('/api/goods/list').then(res=>{

            for (let i = 0; i < res.data.length; i++) {
              this.x.push(res.data[i].name)
              this.y.push(res.data[i].price)
              this.filterTableData=res.data
            }

            this.showEcharts()
      })
    },
    showEcharts() {
      // 基于准备好的dom，初始化echarts实例
      const userdom = this.$refs.box
      const mycart = $echarts.init(userdom,'vintage')
      //绘制柱状图表
      const option = {
        xAxis: {
          type: 'category',
          data: this.x
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.y,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            }
          }
        ]
      };
      // 渲染图表
      mycart.setOption(option)

      //折线图
      var myChart = $echarts.init(this.$refs.boxline, 'vintage');

     const option1 = {
        xAxis: {
          type: 'category',
          data: this.x
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.y,
            type: 'line'
          }
        ]
      };
      option1 && myChart.setOption(option1);

      //饼图
      const mypie = $echarts.init(this.$refs.boxpie,'vintage')
      const option2 = {
        title: {
          text: 'Referer of a Website',
              subtext: 'Fake Data',
              left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
              left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: this.dynamicPieData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      mypie.setOption(option2)
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）",
  created() {
    this.getGoodsList()
  },
};
</script>

//样式
<style scoped>
.echart-box{
  width: 500px;
  height: 350px;
  background: cyan;
  border: 3px solid orangered;
  margin: 20px auto;
}
</style>

四、效果图