webpack中使用echarts

最新推荐文章于 2024-03-05 08:53:39 发布

凡夫俗子Z

最新推荐文章于 2024-03-05 08:53:39 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： web前端开发文章标签： vue echarts webpack

本文链接：https://blog.youkuaiyun.com/u012499210/article/details/78596892

web前端开发专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍如何在Webpack项目中引入并使用ECharts图表库，包括安装步骤、全量及按需加载方式，并提供柱状图配置实例。

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

webpack中使用echarts

1、安装echarts

npm install echarts --save

2、全量引入echarts  
var echarts = require('echarts');
3、按需引入echarts
// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
require("echarts/lib/chart/line");//引入折线图
require("echarts/lib/chart/bar");//引入柱状图
	
require("echarts/lib/chart/pie");//引入饼图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');//引入提示
require('echarts/lib/component/title');//引入标题
require('echarts/lib/component/legend');//引入图例
柱状图示例:
<div class="zztChart ui-chart" id="zztChart"></div>
var myChart = echarts.init(document.getElementById('zztChart'));
		myChart.setOption({
		    title: {
		        text: '世界人口总量',
		        subtext: '数据来自网络'
		    },
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'shadow'
		        }
		    },
		    legend: {
		        data: ['2011年', '2012年']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis: {
		    	type: 'category',
		        data: ['巴西','印尼','美国','印度','中国','世界人口(万)']
		       
		    },
		    yAxis: {
		         type: 'value',
		        boundaryGap: [0, 0.01]
		    },
		    series: [
		        {
		            name: '2011年',
		            type: 'bar',
		            data: [18203, 23489, 29034, 104970, 131744, 630230]
		        },
		        {
		            name: '2012年',
		            type: 'bar',
		            data: [19325, 23438, 31000, 121594, 134141, 681807]
		        }
		    ]
		});
echarts官网  http://echarts.baidu.com/index.html