Vue集成echarts实现统计图表

目录

一、概述

二、Vue实现echarts图表模版

三、测试运行项目

一、概述

官网地址：https://echarts.apache.org/examples/zh/index.html

目前的官网的echarts例子比较古老，如果集成Vue里面需要进行修改，所以可以新建一个Vue的项目代码，先做Demo。

这样的代码肯定是不能直接引用到Vue的，需要进行修改，写出一个Vue适用的模版，然后只需要替换option对应的数据就行了。

二、Vue实现echarts图表模版

先安装echarts

命令 yarn add echarts 或者 npm install echarts --save

然后在新创建的Vue项目中的components下创建EchartTemp.vue

<template>
  <!-- 关键声明： id  和 width 和  height 都会影响图表的展示-->
  <div id="demo" style="width: 500px;height:400px;"></div>
</template>

<script>
  //官网地址：https://echarts.apache.org/examples/zh/index.html
  //引入全部echarts
  import * as echarts from 'echarts';

  export default {
    name: "HelloWord",
    mounted(){
      //进入页面就执行一次
      this.drawChart();
    },
    methods: {
      drawChart() {
        //1.基于准备好的dom，初始化echarts实例
        //2.此处的意思就是，对 demo 元素 进行图表初始化的相关操作
        let chartDom = document.getElementById('demo');
        let myChart = echarts.init(chartDom);
        //3.指定图表的配置项和数据
        //该处就是图表内容，在官网的示例里面，要复制过来到项目里面的也是这一块内容
        let option = {
          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'
            }
          ]
        };
        //4.使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

      }
    },

  }
</script>

<style scoped>

</style>

App.vue 导入渲染图表

<template>
  <EchartTemp/>
</template>

<script>
import EchartTemp from './components/EchartTemp.vue'

export default {
  name: 'App',
  components: {
    EchartTemp
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

main.js还是初始的不变

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

三、测试运行项目

npm run serve，访问地址：http://localhost:8080，显示出图标则成功。

我的项目目录结构，是新创建初始Vue项目