echarts的引入和使用

本文介绍了ECharts图表库的两种引入方式:标签式单文件引入和模块化单文件引入,并提供了具体的代码示例。

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

1.引入方式一,标签式单文件引入

直接引入echarts-all.js,使用起来比较简单

在jsp或html页面放一个div,注意这个放echarts的div一定要给宽度和高度

<div id="echarts_post" style="width:300px;height:400px;"></div>

在javascript块引入,src按需修改

<script type="text/javascript" src="${ctx}/res/js/echarts-all.js"></script>

一个简单的例子,附上代码

<script type="text/javascript">
$(function(){
	postChart();
});
//学员职务统计图
function postChart(){
	//这个echarts对象应该是在echarts-all.js文件里面初始化好的,所以直接拿来用,
	var myChart = echarts.init(document.getElementById('echarts_post')); 
	var option = {
	    title : {
	        text: '学员职务统计',
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	        data:["科员","副科级","正科级","副处级","处级"]
	    },
	  
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : ["科员","副科级","正科级","副处级","处级"],
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:'人数',
	            type:'bar',
	            data:[13,9,5,4,2],
	        },
	        
	    ]
	};
	myChart.setOption(option); 
}
</script>

2.引入方式二,模块化单文件引入

引入echarts包下的echarts.js

在项目中加入echarts开发包,目录结构如下:

引入echarts包下的echarts.js,src按需修改
<script type="text/javascript" src="${ctx}/res/js/echarts/echarts.js"></script>
附上代码
<script type="text/javascript">
var my_ec;//自定义变量,用来保存echarts对象
$(function(){
	//路径配置
	require.config({  
        paths:{   
            "echarts" : "/proj/res/js/echarts",  //proj是我项目的名称
        }  
    });  
	//使用
	require(  
       [  
           "echarts",  
           "echarts/chart/pie", // 使用饼图就加载pie模块,按需加载  
           "echarts/chart/bar", // 使用柱状图就加载bar模块,按需加载
       ],
       function(ec){
    	   my_ec = ec;//将echarts对象赋值给自定义的变量
    	   postChart();
    	}
    );
});
//学员职务统计图
function postChart(){
	var myChart = my_ec.init(document.getElementById('echarts_post')); 
	var option = {
	    title : {
	        text: '学员职务统计',
	    },
	    tooltip : {
	        trigger: 'axis'
	    },
	    legend: {
	        data:["学员人数"],
	        y : "bottom",
	    },
	  
	    calculable : true,
	    xAxis : [
	        {
	            type : 'category',
	            data : ["科员","副科级","正科级","副处级","处级"],
	        }
	    ],
	    yAxis : [
	        {
	            type : 'value'
	        }
	    ],
	    series : [
	        {
	            name:"学员人数",
	            type:'bar',
	            data:[13,9,5,4,2],
	        },
	        
	    ]
	};
	
	myChart.setOption(option); 
}
</script>


效果如下:

### 正确引入 ECharts 到 Vue 项目的两种方式 在 Vue 项目中,可以通过以下两种常见的方式正确引入 ECharts 库: #### 方法一:全局引入 ECharts 通过在 `main.js` 文件中进行全局引入,可以让整个项目中的组件都能访问到 ECharts 实例。具体实现如下: ```javascript // main.js 中的代码 import echarts from 'echarts'; // 引入 ECharts Vue.prototype.$echarts = echarts; // 将 ECharts 挂载到 Vue 的原型上 ``` 这样,在任何 Vue 组件中都可以通过 `this.$echarts` 来调用 ECharts[^1]。 #### 方法二:局部按需引入 ECharts 对于只需要在特定页面使用的场景,可以采用局部按需引入的方式来减少打包体积。以下是具体的实现方法: ```javascript // 在某个组件文件中 import * as echarts from 'echarts'; export default { mounted() { const chartDom = document.getElementById('chart'); // 获取图表容器 DOM const myChart = echarts.init(chartDom); // 初始化 ECharts 图表实例 const option = { /* 配置项 */ }; myChart.setOption(option); // 设置图表配置 } }; ``` 这种方式不需要修改全局配置,适合于只在少数几个页面使用 ECharts 的情况[^2]。 --- 需要注意的是,在实际开发过程中可能会遇到一些常见的错误提示。这些错误通常与依赖未正确安装、引入路径不匹配或者初始化逻辑有问题有关。因此,建议开发者按照官方文档的要求逐步排查问题,并确保已正确完成以下操作: - 使用命令 `npm install echarts --save` 安装最新稳定版 ECharts- 如果需要使用高级功能(如 3D 地图),则额外安装兼容版本的扩展包,例如 `echarts-gl` 或者其他插件[^5][^3]。 最后提醒一点,当尝试自定义主题样式时可参考专门教程来调整视觉效果[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值