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>