echart图表控件配置入门(一)
现在主流的web图表控件主要有hightchart、fusionchart、echart；
echart作为百度前端部门近期推出的一个基于html5的免费图表控件，以其丰富图表类型和良好的兼容性速度得到广大产品和开发人员的使用。作为一个开发人员，这里总结下echart的开发配置。
1、ECharts简介
ECharts，缩写来自Enterprise Charts，商业级数据图表，一个纯Javascript的图表库，可以流畅的运行在PC和移动设备上，兼容当前绝大部分浏览器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底层依赖轻量级的Canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
支持折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）、雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表，同时提供标题，详情气泡、图例、值域、数据区域、时间轴、工具箱等7个可交互组件，支持多图表、组件的联动和混搭展现。
Echarts官网：http://echarts.baidu.com/index.html
Echarts实例：http://echarts.baidu.com/doc/example.html
2、资源文件下载
可以在这里下载最新资源：https://github.com/ecomfe/echarts/archive/2.2.1.zip 下不了的话就去官网去下。
3、资源文件结构详解
3.1主目录结构介绍
重点：
doc 文件夹是demo示例，可以看看
build 是需要引入的开发资源包
index.html 是本地demo、文档说明的主入口
3.2 build文件夹结构介绍
dist（文件夹） : 经过合并、压缩的单文件
echarts.js : 这是包含AMD加载器的echarts主文件，需要通过script最先引入
chart（文件夹） : echarts-optimizer通过依赖关系分析同时去除与echarts.js的重复模块后为每一个图表类型单独打包成独立文件，按需加载
echarts-line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）
echarts-bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）
echarts-scatter.js : 散点图
echarts-k.js : K线图
echarts-pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
echarts-radar.js : 雷达图
echarts-map.js : 地图
echarts-force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）
echarts-chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）
echarts-funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）
echarts-gauge.js : 仪表盘
echarts-eventRiver.js : 事件河流图
source（文件夹） : 经过合并，但并没有压缩的单文件，内容同dist，可用于调试
4、开发模式一：所有图表类型一次载入方式
如果你的项目本身并不是基于模块化开发的，或者是基于CMD规范（如使用的是seajs），那么引入基于AMD模块化的echarts可能并不方便，我们建议你采用srcipt标签式引入
如果你把引用echarts的script标签放置head内在IE8-的浏览器中会出现报错，解决的办法就是把标签移动到body内（后）。
//1、引用所有资源的主文件,全部加载了
<script src="build/source/echarts-all.js" type="text/javascript"></script>
//2、指图表对象
var myChart = echarts.init(document.getElementById('div1'));
var option = {};
myChart.setOption(option);
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>echart示例 资源按需加载</title>
<script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">
require.config({
paths: {
echarts: './build/dist' //引用资源文件夹路径，注意路径
}
});
require(
[
'echarts',
'echarts/chart/line' // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径
],
function (ec) {
var myChart = ec.init(document.getElementById('div1'));
var ecConfig = require('echarts/config');
var option = {
title: {
text: '标题',
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
y: "bottom"
},
toolbox: {
show: true, //是否显示工具箱
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
//calculable: true, 容易搞错的属性，折线图、柱状图是否叠加
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
type: 'value'
}
],
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option);
}
);
</script>
</body>
</html>
5、开发模式二：模块化单文件引入（推荐）
就是通过引入加主加载器，然后按需加载所需的图表类型，优点较上一种方式加载速度更快
通过引用build/dist/echart.js文件，这是包含AMD加载器的echarts主文件，只需要引入文件，然后按需加载指定类型图表文件
//1、引用主文件
<script src="build/source/echarts.js" type="text/javascript"></script>
//2、配置资源文件夹路径
require.config({
paths: {
echarts: './build/dist' //引用资源文件夹路径，注意路径
}
});
//3、加载所需的图表类型文件
require(
[
'echarts',
'echarts/chart/line' // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径
],
function (ec) {}
}
示例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>echart示例 资源按需加载</title>
<script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">
require.config({
paths: {
echarts: './build/dist' //引用资源文件夹路径，注意路径
}
});
require(
[
'echarts',
'echarts/chart/line' // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径
],
function (ec) {
var myChart = ec.init(document.getElementById('div1'));
var ecConfig = require('echarts/config');
var option = {
title: {
text: '标题',
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
y: "bottom"
},
toolbox: {
show: true, //是否显示工具箱
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
//calculable: true, 容易搞错的属性，折线图、柱状图是否叠加
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
type: 'value'
}
],
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '联盟广告',
type: 'line',
stack: '总量',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: '视频广告',
type: 'line',
stack: '总量',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: '直接访问',
type: 'line',
stack: '总量',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: '搜索引擎',
type: 'line',
stack: '总量',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChart.setOption(option);
}
);
</script>
</body>
</html>
6、常用的图表类型
6.1柱状图
柱状图代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>echart示例 柱状图</title>
<script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>
<a href="demo_line.html" target="_blank">折线图</a> |
<a href="demo_bar.html" target="_blank">柱状图</a> |
<a href="demo_pie.html" target="_blank">饼图</a> |
<a href="demo_map.html" target="_blank">中国地图</a>
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div> <script type="text/javascript">
require.config({
paths: {
echarts: './build/dist' //引用资源文件夹路径，注意路径
}
});
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line' // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径
//'echarts/chart/bar' //柱形图
//'echarts/chart/line' //折线图
//'echarts/chart/pie' //饼图 （如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
//'echarts/chart/chord' //和弦图
//'echarts/chart/map' //地图
//'echarts/chart/radar' //雷达
//★★★★★★ 一定要注意这里，用什么类型的图表，就要引入对应的文件，只能多引不能少引 ],
function (ec) {
var myChart = ec.init(document.getElementById('div1'));
var ecConfig = require('echarts/config');
var option = {
title: {
text: '某地区蒸发量和降水量',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['蒸发量', '降水量']
},
toolbox: {//是否显示工具箱
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
//calculable: true, 容易搞错的属性，折线图、柱状图是否叠加
xAxis: [{
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}],
yAxis: [{
type: 'value'
}],
series: [
{
name: '蒸发量',
type: 'bar',
data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
},
{
name: '降水量',
type: 'bar',
data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
}
]
};
myChart.setOption(option);
}
); </script> </body>
</html>
6.2折线图
折线图代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>echart示例 折线图</title>
<script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body> <a href="demo_line.html" target="_blank">折线图</a> |
<a href="demo_bar.html" target="_blank">柱状图</a> |
<a href="demo_pie.html" target="_blank">饼图</a> |
<a href="demo_map.html" target="_blank">中国地图</a>
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">
require.config({
paths: {
echarts: './build/dist' //引用资源文件夹路径，注意路径
}
});
require(
[
'echarts',
'echarts/chart/line' // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径
//'echarts/chart/bar' //柱形图
//'echarts/chart/line' //折线图
//'echarts/chart/pie' //饼图 （如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
//'echarts/chart/chord' //和弦图
//'echarts/chart/map' //地图
//'echarts/chart/radar' //雷达
//★★★★★★ 一定要注意这里，用什么类型的图表，就要引入对应的文件，只能多引不能少引
],
function (ec) {
var myChart = ec.init(document.getElementById('div1'));
var ecConfig = require('echarts/config');
var option = {
title: {
text: '标题',
x: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['邮件营销'],
y: "bottom"
},
toolbox: {
show: true, //是否显示工具箱
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
//calculable: true, 容易搞错的属性，折线图、柱状图是否叠加
xAxis: [{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
type: 'value'
}
],
series: [
{
name: '邮件营销',
type: 'line',
stack: '总量',
data: [120, 132, 101, 134, 90, 230, 210]
}
]
};
myChart.setOption(option);
}
); </script> </body>
</html>
6.3饼状图
饼状图代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>echart示例 饼图</title>
<script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body>
<a href="demo_line.html" target="_blank">折线图</a> |
<a href="demo_bar.html" target="_blank">柱状图</a> |
<a href="demo_pie.html" target="_blank">饼图</a> |
<a href="demo_map.html" target="_blank">中国地图</a> <div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript">
require.config({
paths: {
echarts: './build/dist' //引用资源文件夹路径，注意路径
}
});
require(
[
'echarts',
'echarts/chart/funnel',
'echarts/chart/pie' // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径
//'echarts/chart/bar' //柱形图
//'echarts/chart/line' //折线图
//'echarts/chart/pie' //饼图 （如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
//'echarts/chart/chord' //和弦图
//'echarts/chart/map' //地图
//'echarts/chart/radar' //雷达
//'echarts/chart/funnel' //漏斗 //★★★★★★ 一定要注意这里，用什么类型的图表，就要引入对应的文件，只能多引不能少引
],
function (ec) {
var myChart = ec.init(document.getElementById('div1'));
var ecConfig = require('echarts/config');
var option = {
title: {
text: '某站点用户访问来源',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore: { show: true },
saveAsImage: { show: true }
}
},
//calculable: true,
series: [
{
name: '访问来源',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data: [
{ value: 335, name: '直接访问' },
{ value: 310, name: '邮件营销' },
{ value: 234, name: '联盟广告' },
{ value: 135, name: '视频广告' },
{ value: 1548, name: '搜索引擎' }
]
}
]
};
myChart.setOption(option);
}
); </script> </body>
</html>
6.4中国地图
地图代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>echart示例 中国地图</title>
<script src="build/source/echarts.js" type="text/javascript"></script>
</head>
<body> <a href="demo_line.html" target="_blank">折线图</a> |
<a href="demo_bar.html" target="_blank">柱状图</a> |
<a href="demo_pie.html" target="_blank">饼图</a> |
<a href="demo_map.html" target="_blank">中国地图</a>
<div id="div1" style="width:900px;height:400px;border:1px solid #dddddd;margin:10px auto;"></div>
<script type="text/javascript"> require.config({
paths: {
echarts: './build/dist' //引用资源文件夹路径，注意路径
}
});
require(
[
'echarts',
'echarts/chart/map' // 按需加载所需图表，用到什么类型就加载什么类型，这里不需要考虑路径
//'echarts/chart/bar' //柱形图
//'echarts/chart/line' //折线图
//'echarts/chart/pie' //饼图 （如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）
//'echarts/chart/chord' //和弦图
//'echarts/chart/map' //地图
//'echarts/chart/radar' //雷达
//★★★★★★ 一定要注意这里，用什么类型的图表，就要引入对应的文件，只能多引不能少引
],
function (ec) {
var myChart = ec.init(document.getElementById('div1'));
var ecConfig = require('echarts/config');
var option = {
title: {
text: 'iphone销量',
subtext: '纯属虚构',
x: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
x: 'left',
data: ['iphone3', 'iphone4', 'iphone5']
},
dataRange: {
min: 0,
max: 2500,
x: 'left',
y: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
x: 'right',
y: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
restore: { show: true },
saveAsImage: { show: true }
}
},
roamController: {
show: true,
x: 'right',
mapTypeControl: {
'china': true
}
},
series: [
{
name: 'iphone3',
type: 'map',
mapType: 'china',
roam: false,
itemStyle: {
normal: { label: { show: true} },
emphasis: { label: { show: true} }
},
data: [
{ name: '北京', value: Math.round(Math.random() * 1000) },
{ name: '天津', value: Math.round(Math.random() * 1000) },
{ name: '上海', value: Math.round(Math.random() * 1000) },
{ name: '重庆', value: Math.round(Math.random() * 1000) },
{ name: '河北', value: Math.round(Math.random() * 1000) },
{ name: '河南', value: Math.round(Math.random() * 1000) },
{ name: '云南', value: Math.round(Math.random() * 1000) },
{ name: '辽宁', value: Math.round(Math.random() * 1000) },
{ name: '黑龙江', value: Math.round(Math.random() * 1000) },
{ name: '湖南', value: Math.round(Math.random() * 1000) },
{ name: '安徽', value: Math.round(Math.random() * 1000) },
{ name: '山东', value: Math.round(Math.random() * 1000) },
{ name: '新疆', value: Math.round(Math.random() * 1000) },
{ name: '江苏', value: Math.round(Math.random() * 1000) },
{ name: '浙江', value: Math.round(Math.random() * 1000) },
{ name: '江西', value: Math.round(Math.random() * 1000) },
{ name: '湖北', value: Math.round(Math.random() * 1000) },
{ name: '广西', value: Math.round(Math.random() * 1000) },
{ name: '甘肃', value: Math.round(Math.random() * 1000) },
{ name: '山西', value: Math.round(Math.random() * 1000) },
{ name: '内蒙古', value: Math.round(Math.random() * 1000) },
{ name: '陕西', value: Math.round(Math.random() * 1000) },
{ name: '吉林', value: Math.round(Math.random() * 1000) },
{ name: '福建', value: Math.round(Math.random() * 1000) },
{ name: '贵州', value: Math.round(Math.random() * 1000) },
{ name: '广东', value: Math.round(Math.random() * 1000) },
{ name: '青海', value: Math.round(Math.random() * 1000) },
{ name: '西藏', value: Math.round(Math.random() * 1000) },
{ name: '四川', value: Math.round(Math.random() * 1000) },
{ name: '宁夏', value: Math.round(Math.random() * 1000) },
{ name: '海南', value: Math.round(Math.random() * 1000) },
{ name: '台湾', value: Math.round(Math.random() * 1000) },
{ name: '香港', value: Math.round(Math.random() * 1000) },
{ name: '澳门', value: Math.round(Math.random() * 1000) }
]
},
{
name: 'iphone4',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true} },
emphasis: { label: { show: true} }
},
data: [
{ name: '北京', value: Math.round(Math.random() * 1000) },
{ name: '天津', value: Math.round(Math.random() * 1000) },
{ name: '上海', value: Math.round(Math.random() * 1000) },
{ name: '重庆', value: Math.round(Math.random() * 1000) },
{ name: '河北', value: Math.round(Math.random() * 1000) },
{ name: '安徽', value: Math.round(Math.random() * 1000) },
{ name: '新疆', value: Math.round(Math.random() * 1000) },
{ name: '浙江', value: Math.round(Math.random() * 1000) },
{ name: '江西', value: Math.round(Math.random() * 1000) },
{ name: '山西', value: Math.round(Math.random() * 1000) },
{ name: '内蒙古', value: Math.round(Math.random() * 1000) },
{ name: '吉林', value: Math.round(Math.random() * 1000) },
{ name: '福建', value: Math.round(Math.random() * 1000) },
{ name: '广东', value: Math.round(Math.random() * 1000) },
{ name: '西藏', value: Math.round(Math.random() * 1000) },
{ name: '四川', value: Math.round(Math.random() * 1000) },
{ name: '宁夏', value: Math.round(Math.random() * 1000) },
{ name: '香港', value: Math.round(Math.random() * 1000) },
{ name: '澳门', value: Math.round(Math.random() * 1000) }
]
},
{
name: 'iphone5',
type: 'map',
mapType: 'china',
itemStyle: {
normal: { label: { show: true} },
emphasis: { label: { show: true} }
},
data: [
{ name: '北京', value: Math.round(Math.random() * 1000) },
{ name: '天津', value: Math.round(Math.random() * 1000) },
{ name: '上海', value: Math.round(Math.random() * 1000) },
{ name: '广东', value: Math.round(Math.random() * 1000) },
{ name: '台湾', value: Math.round(Math.random() * 1000) },
{ name: '香港', value: Math.round(Math.random() * 1000) },
{ name: '澳门', value: Math.round(Math.random() * 1000) }
]
}
]
};
myChart.setOption(option);
}
); </script> </body>
</html>
如果需要完成代码，站内找我，发你邮箱；
以上demo的目录结构，资源引用一定要注意路径问题
下一节介绍如何通过后台数据请求，生成图表数据。《echart图表控件配置入门(二)常用图表数据动态绑定》
下下节介绍中国地图省市切换和数据请求
echart图表控件配置入门(一)的更多相关文章
- echart图表控件配置入门(二)常用图表数据动态绑定
上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...
- 图表控件== 百度 echarts的入门学习
花了3天的时间 去学习跟试用之前两款的图表控件 hightcharts(商业,人性化,新手非常方便试用,图表少了点) 跟chartjs==>搭配vue更好 控件,整体而言都还可以. http:/ ...
- 在AngularJS中的使用Highcharts图表控件
一.Highcharts简介 Highcharts是一款非常好用的前端图表控件,正如其中文网介绍的那样:功能强大.开源.美观.图表丰富.兼容绝大多数浏览器的纯js图表库. 如果你的项目是基于jquer ...
- 图表控件的学习===》hightChart 和 Chartjs的使用
hightChart : 比较旧的图表控件 商业需要授权 Chartjs 免费开源 刚开始使用了下 hightchart 然后参考示例 建了对应的参数配置的类, 也顺利的集合到后台动态传输. 后 ...
- Atitit.js图表控件总结
Atitit.js图表控件总结 1. 为什么要使用图表1 2. 图表分类1 3. 数据可视化的优点1 4. 流行的js图表类库1 5. 参考2 1. 为什么要使用图表 因为要可视化 2. 图表分类 条 ...
- Echarts图表控件使用总结2(Line，Bar)—问题篇
Echarts图表控件使用总结1(Line,Bar):http://www.cnblogs.com/hanyinglong/p/Echarts.html 1.前言 a.前两天简单写了一篇在MVC中如何 ...
- Echarts图表控件使用总结1(Line，Bar)
问题篇(详解):http://www.cnblogs.com/hanyinglong/p/4708337.html 1.前言 a.在系统开发过程中可能会使用到图表控件,一个好的图标控件可以使我们的网站 ...
- 转：Highcharts图表控件的使用
摘要 Highcharts图表控件是目前使用最为广泛的图表控件.本文将从零开始逐步为你介绍Highcharts图表控件.通过本文,你将学会如何配置Highcharts以及动态生成Highchart图表 ...
- .net chart(图表)控件的使用-System.Windows.Forms.DataVisualization.dll
这个案例指在介绍微软这套免费又功能强大的图表控件Microsoft Chart Controls for Microsoft .NET Framework 3.5,通过它,可让您的项目及报表,轻松套用 ...
随机推荐
- android 四种堆状态
总结下: ====> 建议首先阅读下面两篇文章,这样才可以更好的理解Activity的加载模式: Android的进程,线程模型 http://www.cnblogs.com/ghj1976/a ...
- 文件相关操作工具类——FileUtils.java
文件相关操作的工具类,创建文件.删除文件.删除目录.复制.移动文件.获取文件路径.获取目录下文件个数等,满足大多数系统需求. 源码如下:(点击下载 FileUtils.java) import jav ...
- poj 1017 Packets 裸贪心
Packets Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 43189 Accepted: 14550 Descrip ...
- Ubuntu 12.04 LTS(64bit) 环境下JDK、 Eclipse、 ADT、 快捷图标
一.在FriendlyARM,Tiny4412,,安装包下可补充: (按照手册添加openjdk-6-jdk 后) 安装JDK (Java),选择需要的JDK,或者全部安装. a) OpenJDK-6 ...
- < %=...%>< %#... %>< % %>< %@ %>具体意义
< %=...%>< %#... %>< % %>< %@ %>< %#... %>: 是在绑定控件DataBind()方法执行时被执行,用 ...
- 【转】PWM占空比和分辨率
占空比是接通时间与周期之比冲量相等而形状不同的窄脉冲加在具有惯性的环节上时,其效果基本相同占空比:就是输出的PWM中,高电平保持的时间与该PWM的时钟周期的时间之比,如一个PWM的频率是1000Hz, ...
- HDU (线段树 单点更新) I Hate It
和上一道题没什么变化,只不过把单点增减变成了单点替换,把区间求和变成了区间求最大值. #include <cstdio> #include <algorithm> using ...
- CodeForces ZeptoLab Code Rush 2015
拖了好久的题解,想想还是补一下吧. A. King of Thieves 直接枚举起点和5个点之间的间距,进行判断即可. #include <bits/stdc++.h> using na ...
- 如何向hadoop集群定时提交一个jar作业？
除了使用Hive,Pig来执行一个MapReduce任务,不需要专门的把项目打成jar包,提交执行,或者定时执行,因为Hive,Pig这些开源框架已经,帮我们自动打包上传了. 而有些时候,我们自己手写 ...
- UVa 129 Krypton Factor【回溯】
学习的紫书的回溯,理解起来还是好困难的说啊= = #include<iostream> #include<cstdio> #include<cstring> #in ...