在webpack中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]
		        }
		    ]
		});