欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

在webpack中echarts的使用安装教程

程序员文章站 2022-05-16 21:11:40
webpack中使用echarts 1、安装echarts npm install echarts --save 2、全量引入echarts var echarts...

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');//引入图例

柱状图示例:

<p class="zztChart ui-chart" id="zztChart"></p>
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]
		        }
		    ]
		});