报表ECharts
上手步骤：
1.拷贝一个demo出来
2.下载js，引入js
3.需要什么报表类型，在示例文档中，把其中的option拷过来，替换demo中的option
4.把action中的查找数据库得到的数据，传到前台页面，替换相应的data
上手学习：http://echarts.baidu.com/doc/start.html
文档：http://echarts.baidu.com/doc/doc.html
示例：http://echarts.baidu.com/doc/example.html
1. 要写一个div或者其他，用于展示<divid="main"style="height:400px"></div>
2. 引入js
3. 初始化图表var myChart = echarts.init(document.getElementById('main'));
4. 拼装option
5. setOption：myChart.setOption(option);
两种引入js方式
1.模块化引入
2.引入一个文件
<scriptsrc="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
注意事项： js和div的加载顺序
Echarts最主要的事儿拼装option:
常用属性：
注意事项：
1. legend里边的值，要series里的几个name想对应
2.tooltip里的formatter，{a}、{b}搞什么飞机，请查看文档，不同的图表意思不一样，这是echarts的约定
3.我们唯一做的就是把后台传过来的数据替换 js option当中的data
1 <!DOCTYPE html> 2 <head> 3 <meta charset="utf-8"> 4 <title>ECharts</title> 5 </head> 6 <body> 7 <!-- 为ECharts准备一个具备大小（宽高）的Dom --> 8 <div id="main" style="height:400px"></div> 9 <!-- ECharts单文件引入 --> 10 <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script> 11 <script type="text/javascript"> 12 // 基于准备好的dom，初始化echarts图表 13 var myChart = echarts.init(document.getElementById('main')); 14 15 var option = { 16 tooltip: { 17 show: true 18 }, 19 legend: { 20 data:['销量'] 21 }, 22 xAxis : [ 23 { 24 type : 'category', 25 data : ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"] 26 } 27 ], 28 yAxis : [ 29 { 30 type : 'value' 31 } 32 ], 33 series : [ 34 { 35 "name":"销量", 36 "type":"bar", 37 "data":[5, 20, 40, 10, 10, 20] 38 } 39 ] 40 }; 41 42 // 为echarts对象加载数据 43 myChart.setOption(option); 44 </script> 45 </body>
上手学习：http://echarts.baidu.com/doc/start.html
文档：http://echarts.baidu.com/doc/doc.html
1. 要写一个div或者其他，用于展示<divid="main"style="height:400px"></div>
2. 引入js
3. 初始化图表var myChart = echarts.init(document.getElementById('main'));
4. 拼装option
5. setOption：myChart.setOption(option);
两种引入js方式
1.模块化引入
2.引入一个文件
<scriptsrc="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
注意事项： js和div的加载顺序
Echarts最主要的事儿拼装option:
常用属性：
注意事项：
1. legend里边的值，要series里的几个name想对应
2.
tooltip里的formatter，{a}、{b}搞什么飞机，请查看文档，不同的图表意思不一样，这是echarts的约定
demo:
<!DOCTYPE html>
<head>
<metacharset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<divid="main"style="height:400px"></div>
<!-- ECharts单文件引入 -->
<scriptsrc="http://echarts.baidu.com/build/dist/echarts.js"></script>
<scripttype="text/javascript">
// 路径配置
require.config({
paths:{
echarts:'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/bar'// 使用柱状图就加载bar模块，按需加载
],
function(ec){
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var option ={
tooltip:{
show:true
},
legend:{
data:['销量']
},
xAxis :[
{
type :'category',
data :["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
],
yAxis :[
{
type :'value'
}
],
series :[
{
"name":"销量",
"type":"bar",
"data":[5,20,40,10,10,20]
}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
浙公网安备 33010602011771号