一步一步教你用 echarts
来源:互联网 发布:sql查询分析器在哪 编辑:程序博客网 时间:2024/05/01 05:51
一步一步教你用 echarts
首先上 http://echarts.baidu.com/index.html
下载这个文档
解压后找到文件夹:
****\echarts-2.1.10\doc\example\www\js
会发现里面有echarts文件夹以及echarts.js
这个插件最主要就是用这些东西了
另外:用build文件夹里面的也可以,我习惯用example里面的文件,
自己选择吧!
然后就是建立一个工程项目(jsp的也好,asp.net也行,什么网站都可以),
把上面说的文件放进去,
下面给一段例子:
<html>
<head>
<title>Index</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div id="main" style="height:400px;"></div>
</div>
<!-- echarts js -->
<script src="../../Scripts/echarts/echarts.js" type="text/javascript"></script>
<!-- my script -->
<script type="text/javascript">
require.config({
paths: {
echarts: '/Scripts/echarts' //这句话的意思是你的echarts.js放在哪里
}
});
require(
[
'echarts',
'echarts/chart/line', //这里的意思是你要用到哪一些图形,比如折线、柱状、饼状
'echarts/chart/bar',
'echarts/chart/pie'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
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>
首先上 http://echarts.baidu.com/index.html
下载这个文档
解压后找到文件夹:
****\echarts-2.1.10\doc\example\www\js
会发现里面有echarts文件夹以及echarts.js
这个插件最主要就是用这些东西了
另外:用build文件夹里面的也可以,我习惯用example里面的文件,
自己选择吧!
然后就是建立一个工程项目(jsp的也好,asp.net也行,什么网站都可以),
把上面说的文件放进去,
下面给一段例子:
<html>
<head>
<title>Index</title>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- 可选的Bootstrap主题文件(一般不用引入) -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div id="main" style="height:400px;"></div>
</div>
<!-- echarts js -->
<script src="../../Scripts/echarts/echarts.js" type="text/javascript"></script>
<!-- my script -->
<script type="text/javascript">
require.config({
paths: {
echarts: '/Scripts/echarts' //这句话的意思是你的echarts.js放在哪里
}
});
require(
[
'echarts',
'echarts/chart/line', //这里的意思是你要用到哪一些图形,比如折线、柱状、饼状
'echarts/chart/bar',
'echarts/chart/pie'
],
function (ec) {
var myChart = ec.init(document.getElementById('main'));
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>
0 0
- 一步一步教你用 echarts
- 一步一步教你用JCA
- 一步一步教你用JCA
- 一步一步教你用 java 生成二维码
- 一步一步教你用 java 生成二维码
- 一步一步教你用 java 生成二维码
- 一步一步教你用CSS画爱心
- 一步一步教你用 java 生成二维码
- 一步一步教你用 java生成二维码
- 一步一步教你学界面换肤。
- 一步一步教你配置vnc
- 教你一步一步使用django
- 一步一步教你调试JNI
- 一步一步教你注册MyEclipse
- 一步一步教你Socket编程
- 一步一步教你安装openstack
- 一步一步教你使用SpringSecurity
- 一步一步教你使用CodeFisrt
- Sublime Text 3 license
- iOS版 ShareSdk 2.10.2才开始支持x64系统, 请更新
- 打印Z形数
- TFS 使用文档 - 部署篇
- (复习)数据库连接及基本操作
- 一步一步教你用 echarts
- Android.mk 与AIDL 编译问题
- Android手势监听(GestureDetector类)
- django cpu监控之三-----izip数据转换
- 82进程清理widget逻辑的实现
- MongoDB的数据库连接(命令行方式)
- AFNetworking 报错 Request failed: unacceptable content-type: text/html
- C++之父:C++ 的五个普遍误解(1)
- Cocos2d-x NO_BORDER适配