您的位置：首页 > Web前端 > Webpack

Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程（柱状图，南丁格尔图）

2017-01-05 17:12 841 查看
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航