官方网址 ：
http://echarts.baidu.com/
example :
http://echarts.baidu.com/examples.html
echarts初始配置（入门教程）：
http://www.tuicool.com/articles/zYfAJfm
学习笔记（示例代码）：
- echarts 官网 使用方法： http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
- 使用注意： 代码中总是会有个 对象 app 的方法 调用。
- 只要自己 新建一个对象 app 即可。所有的方法 也都能调用了。 var app = { }；
<!DOCTYPE
html
>
< html >
< head lang= "en" >
< meta charset= "UTF-8" >
< title ></ title >
<!--<script src="jquery-1.8.2.min.js"></script>-->
< script src= "echart.js" ></ script >
</ head >
< body >
< div id= "main" style= " width: 600 px; height: 400 px; " ></ div >
< script >
< html >
< head lang= "en" >
< meta charset= "UTF-8" >
< title ></ title >
<!--<script src="jquery-1.8.2.min.js"></script>-->
< script src= "echart.js" ></ script >
</ head >
< body >
< div id= "main" style= " width: 600 px; height: 400 px; " ></ div >
< script >
var myChart = echarts.init(document.getElementById('main'));
var app = {};
var
dataseries = [
15,
20,
46,
10,
10,
20,
10,
24];
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:[ '销量']
},
xAxis: {
data: [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "护肤品", '彩妆']
},
yAxis: {},
series: [{
name: '销量',
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:[ '销量']
},
xAxis: {
data: [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "护肤品", '彩妆']
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: dataseries // 我自己研究，可以后台动态获取数据，进行填充
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart. setOption( option);
</ script >
</ body >
</ html >
};
// 使用刚指定的配置项和数据显示图表。
myChart. setOption( option);
</ script >
</ body >
</ html >
- 网络上常见的 图表代码样例，但是不太好修改（我没有找到好的维护方式）
不同的表格 只要改变
option 数据 即可。
<
body
>
< div id= "main" style= " width: 600 px; height: 400 px; border: 1 px solid red; " ></ div >
< script src= "jquery-1.8.2.min.js" ></ script >
< script src= "echarts.js" ></ script >
< script >
// 路径配置
require. config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// // 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec. init( document. getElementById( 'main'));
//设置数据
var option = {
//设置标题
title:{
text: '销量图',
subtext: '纯属捏造，如有雷同，人品爆发。'
},
//设置提示
tooltip: {
show: true
},
//设置图例
legend: {
data:[ '销量']
},
//设置坐标轴
xAxis : [
{
type : 'category',
data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子", "围巾"]
}
],
yAxis : [
{
type : 'value'
}
],
//设置数据
series : [
//条形图
{
"name": "销量",
"type": "bar",
"data":[ 5, 20, 38, 10, 24, 20, 24, 32]
},
//折线图
{
"name": "销量",
"type": "line",
"data":[ 5, 20, 38, 10, 24, 20, 24, 32],
//绘制平均线
markLine : {
data : [
{ type : 'average', name: '平均值'}
]
},
//绘制最高最低点
markPoint : {
data : [
{ type : 'max', name: '最大值'},
{ type : 'min', name: '最小值'}
]
}
}
]
};
// 为echarts对象加载数据
myChart. setOption( option);
}
);
</ script >
</ body >
< div id= "main" style= " width: 600 px; height: 400 px; border: 1 px solid red; " ></ div >
< script src= "jquery-1.8.2.min.js" ></ script >
< script src= "echarts.js" ></ script >
< script >
// 路径配置
require. config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// // 使用
require(
[
'echarts',
'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
'echarts/chart/line'
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec. init( document. getElementById( 'main'));
//设置数据
var option = {
//设置标题
title:{
text: '销量图',
subtext: '纯属捏造，如有雷同，人品爆发。'
},
//设置提示
tooltip: {
show: true
},
//设置图例
legend: {
data:[ '销量']
},
//设置坐标轴
xAxis : [
{
type : 'category',
data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子", "帽子", "围巾"]
}
],
yAxis : [
{
type : 'value'
}
],
//设置数据
series : [
//条形图
{
"name": "销量",
"type": "bar",
"data":[ 5, 20, 38, 10, 24, 20, 24, 32]
},
//折线图
{
"name": "销量",
"type": "line",
"data":[ 5, 20, 38, 10, 24, 20, 24, 32],
//绘制平均线
markLine : {
data : [
{ type : 'average', name: '平均值'}
]
},
//绘制最高最低点
markPoint : {
data : [
{ type : 'max', name: '最大值'},
{ type : 'min', name: '最小值'}
]
}
}
]
};
// 为echarts对象加载数据
myChart. setOption( option);
}
);
</ script >
</ body >
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
