Echarts/highcharts:图表库的模型框架---pie/bar折线图、reverse、sort、toolbox、拖动dataZoom、x轴axisLabel

 sort：按规则排序

this.Names=this.Names.sort((a, b) => a['Id'] - b['Id'])

reverse：倒序

this.arr=this.arr.reverse()

var option 

var  thiscolorMax= ['#FA7F65', '#32DADD', '#FCD300']
var  thiscolor= ['#FA7F65', '#32DADD', '#FCD300','#00CC00'
      ,'#2CC986','EB6876','#FB0047','#D66224','#FD5E37'],
var title = { text: '暂无数据', left: 'center', bottom: 242 }
var option = {
        color: thisthiscolor,
color: thisthiscolor,
 

        title: this.list.length=== 0 ? title : '',
}


var option = {
        title: arr.length=== 0 ? title :{},

}

var myChart = echarts.init(document.getElementById('main'), 'macarons')
      myChart.off('click')
      // 解决数据遗留问题
      myChart.clear()
// 解决数据遗留问题
      myChart.clear()
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)

toolbox

toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            magicType: {
              show: true,
              type: ['line', 'bar']

            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },

解决x轴文字显现不全

xAxis: {
         
          axisLabel: {
            interval: 0
          }
        },

axisLabel:{
    		    interval: 0
    	    }

1. start: 30, //数据窗口范围的起始百分比,表示30%
2. end: 70,

let start = 0
      let end = 40
      if (arr.length > 10) {
        start = 0
        end = 20
        end = ((5 / arr.length) * 100).toFixed(1)
      }

dataZoom: {
          realtime: false, //拖动滚动条时是否动态的更新图表数据
          height: 16, //滚动条高度
          start: start, //滚动条开始位置（共100等份）
          end: end //结束位置（共100等份）
        },

dataZoom=[                                      //区域缩放
    {
        id: 'dataZoomX',
        show:true,                              //是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。
        backgroundColor:"rgba(47,69,84,0)",  //组件的背景颜色
        type: 'slider',                         //slider表示有滑动块的，inside表示内置的
        dataBackground:{                        //数据阴影的样式。
            lineStyle:mylineStyle,              //阴影的线条样式
            areaStyle:myareaStyle,              //阴影的填充样式
        },
        fillerColor:"rgba(167,183,204,0.4)",  //选中范围的填充颜色。
        borderColor:"#ddd",                     //边框颜色。
        filterMode: 'filter',                   //'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
                                                  //'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
                                                  //'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
                                                  //'none': 不过滤数据，只改变数轴范围。
        xAxisIndex:0,                            //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
        yAxisIndex:[0,2],                        //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
        radiusAxisIndex:3,                       //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
        angleAxisIndex:[0,2],                    //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
        start: 30,                                //数据窗口范围的起始百分比,表示30%
        end: 70,                                  //数据窗口范围的结束百分比,表示70%
        startValue:10,                           //数据窗口范围的起始数值
        endValue:100,                            //数据窗口范围的结束数值。
        orient:"horizontal",                    //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
        zoomLock:false,                          //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
        throttle:100,                             //设置触发视图刷新的频率。单位为毫秒（ms）。
        zoomOnMouseWheel:true,                  //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
        moveOnMouseMove:true,                   //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
        left:"center",                           //组件离容器左侧的距离,'left', 'center', 'right','20%'
        top:"top",                                //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
        right:"auto",                             //组件离容器右侧的距离,'20%'
        bottom:"auto",                            //组件离容器下侧的距离,'20%'
 
    },
    {
        id: 'dataZoomY',
        type: 'inside',
        filterMode: 'empty',
        disabled:false,                         //是否停止组件的功能。
        xAxisIndex:0,                           //设置 dataZoom-inside 组件控制的 x轴,可以用数组表示多个轴
        yAxisIndex:[0,2],                       //设置 dataZoom-inside 组件控制的 y轴,可以用数组表示多个轴
        radiusAxisIndex:3,                      //设置 dataZoom-inside 组件控制的 radius 轴,可以用数组表示多个轴
        angleAxisIndex:[0,2],                   //设置 dataZoom-inside 组件控制的 angle 轴,可以用数组表示多个轴
        start: 30,                               //数据窗口范围的起始百分比,表示30%
        end: 70,                                  //数据窗口范围的结束百分比,表示70%
        startValue:10,                           //数据窗口范围的起始数值
        endValue:100,                            //数据窗口范围的结束数值。
        orient:"horizontal",                    //布局方式是横还是竖。不仅是布局方式，对于直角坐标系而言，也决定了，缺省情况控制横向数轴还是纵向数轴。'horizontal'：水平。'vertical'：竖直。
        zoomLock:false,                          //是否锁定选择区域（或叫做数据窗口）的大小。如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
        throttle:100,                             //设置触发视图刷新的频率。单位为毫秒（ms）。
        zoomOnMouseWheel:true,                   //如何触发缩放。可选值为：true：表示不按任何功能键，鼠标滚轮能触发缩放。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标滚轮能触发缩放。'ctrl'：表示按住 ctrl 和鼠标滚轮能触发缩放。'alt'：表示按住 alt 和鼠标滚轮能触发缩放。
        moveOnMouseMove:true,                    //如何触发数据窗口平移。true：表示不按任何功能键，鼠标移动能触发数据窗口平移。false：表示鼠标滚轮不能触发缩放。'shift'：表示按住 shift 和鼠标移动能触发数据窗口平移。'ctrl'：表示按住 ctrl 和鼠标移动能触发数据窗口平移。'alt'：表示按住 alt 和鼠标移动能触发数据窗口平移。
    }
]

1.导入 Echarts/highcharts资源文件

2.在html中准备一个层

<div id="container" style="min-width:700px;height:400px"></div>

3. 找到折线图的静态代码

<script type="text/javascript">
    $(function () {

        $('#container').highcharts({
            title: {
                text: 'cn年度销售报表',
                x: -20 //center
            },
            subtitle: {
                text: 'Source: cn.mysql',
                x: -20
            },
            xAxis: {
                categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
            },
            yAxis: {
                title: {
                    text: '万($)'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: '万($)'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'cn',
                data: [29.9, 71.5, 36.4, 49.2, 14.0, 16.0, 15.6, 28.5, 26.4, 14.1, 95.6, 54.4]
            }]
        });

    });
</script>

将如上copy至html

4.运行。

即可看到折线图的效果。

当然，仅仅是这样，仍然是不够的。

下面，动态加载从数据库中拿取的数据。

<script type="text/javascript">
    $.post('bar.action', function (result) {
        $('#container').highcharts({
            series: [{
                name: 'cn',
                data: result.value
            }]
        });
    }, 'json')
</script>

如上，即可将Ajax加载的数据放到折线图中展示。

@ResponseBody
    @RequestMapping("bar")
    public Map<String, Object> bar() {
        Map<String, Object> map = new HashMap<>();
        double[] values = {23, 13.9, 13.1, 12, 24.3, 43.3, 45, 23.9, 33.3, 25, 26.9, 10};
        map.put("value", values);
        return map;
    }

这是SpringMVC模式下产生的格式数据

当然，values可以是从数据库里查出的list

high：

<div align="center">
     <div id="container" style="width: 800px; height: 500px;"></div>
</div>

<script type="text/javascript">
  		Highcharts.chart('container', {
		chart: {
				type: 'line'
		},
		title: {
				text: '全球各大洲人口增长历史及预测'
		},
		subtitle: {
				text: '数据来源: 世界国联'
		},
		xAxis: {
				categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
				tickmarkPlacement: 'on',
				title: {
						enabled: false
				}
		},
		yAxis: {
				title: {
						text: '十亿'
				},
				labels: {
						formatter: function () {
								return this.value / 1000;
						}
				}
		},
		tooltip: {
				split: true,
				valueSuffix: ' 百万'
		},
		plotOptions: {
				area: {
						stacking: 'normal',
						lineColor: '#666666',
						lineWidth: 1,
						marker: {
								lineWidth: 1,
								lineColor: '#666666'
						}
				}
		},
		series: [{
				name: '亚洲',
				data: [502, 635, 809, 947, 1402, 3634, 5268]
		}, {
				name: '非洲',
				data: [106, 107, 111, 133, 221, 767, 1766]
		}, {
				name: '欧洲',
				data: [163, 203, 276, 408, 547, 729, 628]
		}, {
				name: '美洲',
				data: [18, 31, 54, 156, 339, 818, 1201]
		}, {
				name: '大洋洲',
				data: [2, 2, 2, 6, 13, 30, 46]
		}]
});
</script>

静态的图表，数据格式相差无几。

pie：

<script type="text/javascript">
        // 绘制图表
        var myChart = echarts.init(document.getElementById('pie'));
       myChart.setOption({
       title:{
                text:'神天股东分红表'
            },
       tooltip : {
       show : 'true'
            },
      series : [{
            type: 'pie',
            data:[
            
            ]
        }
    ]
})

  </script>
  
<script type="text/javascript">
$(function() {
$.post(
		'pie.do',
		function(result){
			myChart.setOption( {
				series : {
					data : result
				}
			});
		},'json'
	)
})
</script>

这是pie饼图

JSONArray json=new JSONArray();
		
		List<User> list=DataDao.queryAllUser();
		for (User user : list) {
			JSONObject obj=new JSONObject();
			obj.put("value",user.getUmoney());
			obj.put("name", user.getUname());
			json.add(obj);
		}
		
//		int[] in={11, -2, 93, 13, 35};
//		String[] str={"³ÄÉÀ", "ÑòëÉÀ", "Ñ©·ÄÉÀ", "¿ã×Ó", "¸ß¸úЬ"};
		
//		for(int i=0;i<in.length;i++){
//			JSONObject obj=new JSONObject();
//			obj.put("value",in[i]);
//			obj.put("name", str[i]);
//			json.add(obj);
//		}
		
		resp.setContentType("text/plain;charset=utf-8");
        PrintWriter out=resp.getWriter();
		out.print(json.toJSONString());

这是转发fastjson封装的json、

后面会有更高级的转发方式