项目中引入echarts图表的基本使用方法_在项目中引入echarts-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39691383/article/details/107975622

本文档介绍了在Vue项目中如何引入和使用Echarts，包括基本步骤：通过npm安装echarts，然后在main.js中全局引入，以及在具体组件中使用。特别强调了在使用Echarts时配置xAxis、yAxis和series的重要性，同时提到初始化容器必须有宽高以避免错误。文中还提及了滚动条功能的数据Zoom，并提供了相关参考文档。

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

项目中引入echarts图表的基本使用方法

参考文档：
在vue-cli项目中使用echarts
echarts x轴增加滚动条 dataZoom
前端数据可视化echarts.js使用指南

1、安装echarts

npm install echarts -S

2、在项目中引入

main.js文件

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

需要用到echarts的文件中：

<div id="chart" style="width:500px;height:500px" />

const echarts = require('echarts')

export default {
data(){
	return{
	 chartOption: {
	        // title: { text: '在Vue中使用echarts' },
	        tooltip: {},
	        legend: {},
	        xAxis: {
	          data: [],
	          axisLabel: { interval: 0 } // 用于显示or隐藏刻度，为0时表示显示所有刻度，1为间隔一个刻度显示
	        },
	        yAxis: {},
	        series: [
	        	{
	         	  name:'',
	        	  type:'bar', //柱状图
	        	  data:[]
	        	}
	        ]
	      }
	    }
	}
}
methods:{
	initEcharts(){
		const myChart = echarts.init(document.getElementById('chart'))
        // 绘制图表
        
        // (1)、x轴方向设置滚动条以显示更多数据
        this.chartOption={
          //关键属性代码
		  dataZoom: [{
		      type: 'slider',
		      show: true,
		      xAxisIndex: [0],
		      left: '9%',
		      bottom: -5,
		      start: 10,  // 设置为0则从第一个刻度数据开始
		      end: 90   //表示图表可见数据所占百分比，设置为100则无法滑动，
		  }]
       }
    	// 使echart图表随着浏览器的大小发生响应式变化
        window.onresize = myChart.resize
        myChart.setOption(this.chartOption)
	}
}
}