vue中使用echarts绘制图表

什么是数据可视化？

数据可视化是将数据以图表、图形等形式展现出来，以便用户能够更好地理解和分析数据。通过使用图表、图形、地图等视觉元素和交互手段，数据可视化能够帮助人们从海量的数据中发现关联、趋势和异常，进而做出更精准的决策。

---

echarts画图的流程？

1.为echarts图形定义有一定宽高的dom

2.获取dom元素

3.初始化echarts实例

4.指定图标的配置项和参数

5.使用刚指定的配置项和数据显示图表

---

vue中echarts绘制图标

安装echarts的依赖

npm install echarts 

代码

<template>
  <div style="display: flex;flex-direction: row;">
    <div id="bar_chart"></div>
    <div id="line_chart"></div>
    <div id="pie_chart"></div>
  </div>
</template>

<script>
// 引入Echarts
import * as echarts from 'echarts'

export default {
  data() {
    return {

    }
  },
  methods: {
    showBar() {
      // 获取dom元素，根据id
      var dom = document.getElementById("bar_chart");
      // 初始化echarts实例
      var myChart = echarts.init(dom);
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: "基础柱状图"
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    showLine() {
      var dom = document.getElementById("line_chart");
      var myChart = echarts.init(dom);
      var option = {
        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',
            // smooth: true
          }
        ]
      };
      myChart.setOption(option);
    },
    showPie() {
      var dom = document.getElementById("pie_chart");
      var myChart = echarts.init(dom);
      var option = {
        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: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
    }
  },
  mounted() {
    this.showBar();
    this.showLine();
    this.showPie();
  }
}

</script>


<style >
/*     为 ECharts 准备定义了宽高的 DOM */
#bar_chart {
  width: 500px;
  height: 400px;
}

#line_chart {
  width: 500px;
  height: 400px;
}

#pie_chart {
  width: 500px;
  height: 400px;
}
</style>