在项目中使用 echarts

huxiaoxiao.

已于 2022-02-16 11:38:14 修改

阅读量906

点赞数 2

分类专栏： echarts 文章标签： echarts 前端

于 2022-02-16 11:25:45 首次发布

本文链接：https://blog.youkuaiyun.com/lolhuxiaotian/article/details/122959342

版权

echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中集成ECharts库，通过步骤包括安装ECharts，全局引入并在main.js中注册，创建带有id的图表容器，在组件内定义绘制图表的方法，并在生命周期钩子中调用，最后配置并显示图表数据。适合前端开发者学习ECharts与Vue的结合应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Apache ECharts

echarts官网

1.先在项目中下载 echarts

cnpm i echarts --save

2.在 main.js 中引入并使用

//引用 echarts
import * as echarts from 'echarts';
//使用echarts
Vue.prototype.$echarts = echarts;

3.在视图层留下放置可视化图表的盒子，起id名

（注意，这个盒子必须有高度）

4.在方法中心定义一个方法，并在生命周期函数中调用

  methods: {
      drawLine(){
     
      }
  },

//在生命周期函数中调用  
mounted() {
      this.drawLine();
  }

5.在定义的方法中抓取放置可视化图表的容器

 drawLine(){
        //   抓取放置可视化图表的容器
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        
      }

6.抓取容器后，配置指定图表的配置项和数据

 drawLine(){
        //   抓取放置可视化图表的容器
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'));
        
        // 指定图表的配置项和数据（视图内容）
        let option = {
        // 这里面的内容就是echarts官网提供的图表的数据和配置项
        }
      }

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

 drawLine(){

        let myChart = this.$echarts.init(document.getElementById('myChart'));

        let myChart1 = this.$echarts.init(document.getElementById('myChart1'));

        let option = {

        }

        let option1 = {

        }

        // 使用刚指定好的配置项和数据显示图表
        myChart.setOption(option);
        myChart1.setOption(option1);
      }