Vue echarts图表的使用

一个假的前端男

于 2020-09-01 17:17:52 发布

阅读量98

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/IT_iosers/article/details/108346727

vue 专栏收录该内容

79 篇文章

订阅专栏

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

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

一、安装

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()
      			}
    		}
 	 	},