Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）
Posted saucxs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）相关的知识，希望对你有一定的参考价值。
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
以上是关于Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）的主要内容，如果未能解决你的问题，请参考以下文章