Echars表格教程

Echarts统计图

一．使用

1.导入echarts.min.js

<script type="text/javascript" src="${stylePath}/js/echarts.common.min.js"></script> 

 

2.导入图形样式js

line.js : 折线图（如需折柱动态类型切换，require时还需要echarts/chart/bar）

· bar.js : 柱形图（如需折柱动态类型切换，require时还需要echarts/chart/line）

· scatter.js : 散点图

· k.js : K线图

· pie.js : 饼图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/funnel）

· radar.js : 雷达图

· map.js : 地图

· force.js : 力导向布局图（如需力导和弦动态类型切换，require时还需要echarts/chart/chord）

· chord.js : 和弦图（如需力导和弦动态类型切换，require时还需要echarts/chart/force）

· funnel.js : 漏斗图（如需饼漏斗图动态类型切换，require时还需要echarts/chart/pie）

· gauge.js : 仪表盘

· eventRiver.js : 事件河流图

· treemap.js : 矩阵树图

· venn.js : 韦恩图

 

二．统计图样式

1.统计图类型

type: 'bar',    //统计图类型  bar圆柱图/line折线图/pie饼状图/scatter离散图/gauge仪表盘

funnel漏斗图/tree树状图/....

 

2.统计图文字样式

textStyle

名称	默认值	描述
{color} color	各异	颜色
{string} decoration	'none'	修饰，仅对tooltip.textStyle生效
{string} align	各异	水平对齐方式，可选为：'left' | 'right' | 'center'
{string} baseline	各异	垂直对齐方式，可选为：'top' | 'bottom' | 'middle'
{string} fontFamily	'Arial, Verdana, sans-serif'	字体系列
{number} fontSize	12	字号 ，单位px
{string} fontStyle	'normal'	样式，可选为：'normal' | 'italic' | 'oblique'
{string | number}fontWeight	'normal'	粗细，可选为：'normal' | 'bold' | 'bolder' | 'lighter' | 100 | 200 |... | 900

 

 

 

 

 

 

3.统计图背景颜色

legend: {

               data:['销量'],

               fontColor:"red"   //文字颜色

           },

           backgroundColor:{

           color:"#ff0000"   //背景颜色

           },

           xAxis: {

               data: []

           },

 

4.柱状图宽度

   barWidth:70    //柱状图的宽度

 

5.柱状图的颜色

 itemStyle: {

                    normal: {

//好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，

                        color: function(params) {

                            // build a color map as your need.

                            var colorList = [

                              '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', //一串自定义颜色

                               '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',

                               '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'

                            ];

                            return colorList[params.dataIndex]   //通过数值对应的索引来对应不同的颜色

                        }, //以下为是否显示，显示位置和显示格式的设置了                        

label: {

                            show: true,

                            position: 'top',//                             formatter: '{c}'

                            formatter: '{b}\n{c}'

                        }

                    }

                },

 

在series中放入，例如

  series: [{

                   // 根据名字对应到相应的系列

                   name: '销量',

                   data: data1.dishCount,   //获取数据的名称

                   barWidth:70，    //柱状图的宽度

                 itemStyle: {....}

 

               }]

 

 

6.折线图的颜色

itemStyle : {  

                       normal : {  

                           color:'red',  //圈圈的颜色16进制和英文都可以

                           lineStyle:{  

                               color:'yellow'  //线的颜色

                           }  

                       }  

                   },

 

在series中放入，例如

  series: [{

                   // 根据名字对应到相应的系列

                   name: '销量',

                   data: data1.dishCount,   //获取数据的名称

                   barWidth:70，    //柱状图的宽度

                 itemStyle: {....}

 

               }]

 

7.统计图颜色

color:['#62d1de','#54d6b6','#a6db69','#ffd454','#ffa361','#d1d1d1'],//颜色

 

三. 统计图实现

0.数据获取

@RequestMapping("Countlist.dhtml")

@ResponseBody

 public String Countlist(HttpServletRequest request,Model model) throws UnsupportedEncodingException{

 List<SaleCount> list = saleService.saleCountlist(); 

HashMap<String, Object> map = new HashMap<String,Object>();

   List<String> dishName = new ArrayList<String>();

   List<String> dishCount = new ArrayList<String>();

   for (SaleCount saleCount : list) {

   dishName.add(saleCount.getDishName());

   dishCount.add(saleCount.getDishCount().toString());

   }  

   map.put("dishName", dishName);

   map.put("dishCount", dishCount);

   Gson gson = new Gson();

   return gson.toJson(map);

  }

  

1.柱状图

var myChart = echarts.init(document.getElementById('container'));  //可以是一个div的ID名

       myChart.setOption({

           title: {

               text: '菜品名称/销量'  //柱状图的名称

           },

           tooltip: {},

           legend: {

               data:['销量']    //纵坐标的名称

           },

           xAxis: {

               data: []

           },

           yAxis: {},

           series: [{

               name: '销量',    //横坐标的名称

               type: 'bar',    //统计图类型  bar圆柱图/line折线图/pie饼状图/scatter离散图

               data: []

           }]

       });

 

       // 异步加载数据

       $.get('${contextpath}/saleInfo/sale/Countlist.dhtml').done(function (data) {

       var data1=$.parseJSON(data);

           // 填入数据

           myChart.setOption({

               xAxis: {

               name: '菜品',

                   data: data1.dishName   //获取的数据名称

               },

               series: [{

                   // 根据名字对应到相应的系列

                   name: '销量',

                   data: data1.dishCount,   //获取数据的名称

                   barWidth:70    //柱状图的宽度

               }]

           });

       });

       

       

2.折线图

var myChart = echarts.init(document.getElementById('container'));  //可以是一个div的ID名

       myChart.setOption({

           title: {

               text: '菜品名称/销量'  //柱状图的名称

           },

           tooltip: {},

           legend: {

               data:['销量']    //纵坐标的名称

           },

           xAxis: {

               data: []

           },

           yAxis: {},

           series: [{

               name: '销量',    //横坐标的名称

               type: 'line',    //统计图类型  bar圆柱图/line折线图/pie饼状图/scatter离散图

               data: []

           }]

       });

 

       // 异步加载数据

       $.get('${contextpath}/saleInfo/sale/Countlist.dhtml').done(function (data) {

       var data1=$.parseJSON(data);

           // 填入数据

           myChart.setOption({

               xAxis: {

               name: '菜品',

                   data: data1.dishName   //获取的数据名称

               },

               series: [{

                   // 根据名字对应到相应的系列

                   name: '销量',

                   data: data1.dishCount,   //获取数据的名称

                   barWidth:70    //柱状图的宽度

               }]

           });

       });

 

 

 

3.多柱状图

var myChart = echarts.init(document.getElementById('container'));

       // 显示标题，图例和空的坐标轴

       myChart.setOption({

           title: {

               text: '菜品名称/销量'

           },

           tooltip: {},

           legend: {

               data:['销量']

           },

           

           xAxis: {

               data: []

           },

           yAxis: {},

           color:['#62d1de','#54d6b6','#a6db69','#ffd454','#ffa361','#d1d1d1'],//颜色

           series: [{

               name: '销量',

               type: 'bar',

               data: []

           },{

               name: '销量',

               type: 'bar',

               data: []

           }]

       });

 

       // 异步加载数据

       $.get('${contextpath}/saleInfo/sale/Countlist.dhtml').done(function (data) {

       var data1=$.parseJSON(data);

           // 填入数据

           myChart.setOption({

               xAxis: [{

               name: '菜品',

                   data: data1.dishName

               },{

               name: '菜品1',

                   data: data1.dishName

               }],

               series: [{

                   // 根据名字对应到相应的系列

                   name: '销量',

                   data: data1.dishCount

               },{

                   // 根据名字对应到相应的系列

                   name: '销量1',

                   data: data1.dishCount

               }]

           });

       });

 

 

4.柱状图+折线图

var myChart = echarts.init(document.getElementById('container'));

       // 显示标题，图例和空的坐标轴

       myChart.setOption({

           title: {

               text: '菜品名称/销量'

           },

           tooltip: {},

           legend: {

               data:['销量']

           },

           xAxis: {

               data: []

           },

           yAxis: {},

           series: [{

               name: '销量',

               type: 'bar',

               data: []

           },{

               name: '销量',

               type: 'line',

               data: []

           }]

       });

 

       // 异步加载数据

       $.get('${contextpath}/saleInfo/sale/Countlist.dhtml').done(function (data) {

       var data1=$.parseJSON(data);

           // 填入数据

           myChart.setOption({

               xAxis: {

               name: '菜品',

                   data: data1.dishName

               },

               series: [{

                   // 根据名字对应到相应的系列

                   name: '销量',

                   data: data1.dishCount

               },{

                   // 根据名字对应到相应的系列

                   name: '销量',

                   data: data1.dishCount

               }]

           });

       });