Webstorm+Webpack+echarts
ECharts 特性介绍
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
1、npm 安装 ECharts
在 3.1.1 版本之前 ECharts 在 npm 上的 package 是非官方维护的，从 3.1.1 开始由官方 EFE 维护 npm 上 ECharts 和 zrender 的 package。
你可以使用如下命令通过 npm 安装 ECharts
npm install echarts --save
完成，如下图所示：
文件结构，在node_modules文件下，多了echarts和zrender两个文件夹。
2、在index.js文件中引入 ECharts（柱状图）
var echarts = require('echarts');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
myChart.setOption({
title: { text: 'ECharts 入门示例' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
index.js全部文件
/**
* Created by on 2017/1/5.
*/
var $=require('jquery');
var echarts = require('echarts');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制柱状图
myChart.setOption({
title: { text: 'ECharts 入门实例' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
注意：在index.html中添加一个准备好的dom，初始化echarts。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<h1>Hello world</h1>
<button>提交</button>
<script src="./bundle.js"></script>
</body>
</html>
2.1运行看结果
3、在index.js文件中引入 ECharts（南丁格尔图图）
/**
* Created by on 2017/1/5.
*/
var $=require('jquery');
var echarts = require('echarts');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var myChart_01 = echarts.init(document.getElementById('main_01'));
// 绘制柱状图
myChart.setOption({
title: { text: 'ECharts 柱状图' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
});
//饼图（南丁格尔图）
myChart_01.setOption({
title: { text: 'ECharts 南丁格尔图' },
//设置背景颜色
// backgroundColor: '#2c343c',
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data:[
{value:400, name:'搜索引擎'},
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:274, name:'联盟广告'},
{value:235, name:'视频广告'}
],
roseType: 'angle',//南丁格尔图
itemStyle: {
normal: {
shadowBlur: 200,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
document.addEventListener('DOMContentLoaded',function(){
console.log('hi');
$('button').click(function(){alert('I LOVE YOU1')});
});
注意：在index.html里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom（柱状图） -->
<div id="main" style="width: 600px;height:400px;"></div>
<!--南丁格尔图-->
<div id="main_01" style="width: 600px;height:400px; "></div>
<h1>Hello world</h1>
<button>提交</button>
<script src="./bundle.js"></script>
</body>
</html>
3.1运行看结果
Ps：可以参考官方文档：http://echarts.baidu.com/tutorial.html#ECharts%20%E7%89%B9%E6%80%A7%E4%BB%8B%E7%BB%8D