Vue中全局使用echarts的简单方法

最新推荐文章于 2024-10-18 21:42:59 发布

木头清柠

最新推荐文章于 2024-10-18 21:42:59 发布

阅读量1.7k

点赞数 2

文章标签： echarts vue.js javascript

本文链接：https://blog.youkuaiyun.com/m0_55295461/article/details/126544314

版权

本文介绍了在Vue项目中全局使用Echarts的步骤：首先从官方下载echarts.min.js并将其放置在项目合适的位置；然后在main.js中引入并挂载到全局；最后在Vue组件中通过ref获取元素，并定义方法创建折线图实例，确保元素有明确的宽高以正常显示图表。

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

1.下载echarts文件

从ehcarts官方下载地址下载echarts.min.js

我这里是把它放在了项目的public\static\lib下面，放其他地方也可以，但是项目规范一般是把它放这里。

2.全局引入

在public\index.html引入echarts.min.js

在项目根目录的main.js中挂载到全局

// 将全局Echarts挂载到Vue的原型上
Vue.prototype.$echarts = window.echarts

3.在Vue中使用

先写一个元素，注意！！这个元素必须有宽高，不然echarts是显示不出来的！！！！
这里用Vue的ref，比较方便获取元素

  <div class="priceChart" ref="price_ref"></div>

.priceChart{
	width: 100%;
	height: 300px;
}

我们先在methods里面定义一个方法，这里的例子用的是echarts的折线图，比较简单

methods:{
initPriceOptions() {
      this.chartInstance = this.$echarts.init(this.$refs.price_ref);
	  console.log(this.chartInstance)
      const initOption = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["6/1", "6/2", "6/3", "6/4", "6/5", "6/7", "7/8"],
		  
        },
        yAxis: {
          type: "value",
		   axisLine:{
			   
		   }
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            areaStyle: {
				color:'rgba(254,222,9,.2)'
			},
			 itemStyle : {  
	                 normal : {  
	                     color:'#F9D800',  
	                     lineStyle:{  
	                         color:'#F9D800'  
	                     }  
	                 }  
	             },  
          },
        ],
		tooltip:{
			show:true
		}
      };
	  this.chartInstance.setOption(initOption)
    },
}

在mounted中调用这个方法

  mounted() {
		this.initPriceOptions()
	},

成功显示