Vue echarts图表的使用

最新推荐文章于 2024-12-18 23:56:43 发布

原创最新推荐文章于 2024-12-18 23:56:43 发布 · 106 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 专栏收录该内容

79 篇文章

订阅专栏

本文详细介绍如何在项目中安装、引用及使用ECharts图表库，包括局部与全局引用方式，以及结合Vue框架进行图表展示的具体步骤。

一、安装

cnpm install echarts --save

二、引用

局部引用

import echarts from 'echarts'

全局引用

在main.js中
import echarts from 'echarts'
Vue.prototype.$echarts = echarts

三、使用

html代码

  <div id="myChart" :style="{width: 'auto', height: '400px'}"></div>

js代码

  methods: {
  //this.report 是从后台获取的数据
    drawline() {
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      myChart.setOption(this.report);
    }
  },
//  handler在watch侦听开始之后最初绑定的时候就执行
    watch: {
    	report:{
      	handler(){
        	this.drawline()
      			}
    		}
 	 	},