ECharts

1.引入ECharts需要的jar包

<!-- <script src="https://cdn.bootcss.com/echarts/4.1.0/echarts.js"></script> -->
<!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
<script src="../../resources/echarts/dist/echarts.min.js"></script>
<script src="../../resources/js/jquery-3.4.1.min.js"></script>

2.柱状图-前端

<div id="main" style="width: 600px; height: 400px;"></div>
	<script type="text/javascript">
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));

		// 指定图表的配置项和数据
		var option = {
			title : {
				text : 'ECharts 入门示例'
			},
			tooltip : {},
			legend : {
				data : [ '销量' ]
			},
			xAxis : {
				data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
			},
			yAxis : {},
			series : [ {
				name : '销量',
				type : 'bar',
				data : [Math.random(5), Math.random(20), Math.random(36), Math.random(10), Math.random(10),Math.random(20)]
			} ]
		};

		// 使用刚指定的配置项和数据显示图表。
		myChart.setOption(option);
	</script>

3.折线图-前端

<div id="main" style="width: 600px; height: 400px;"></div>
		<script type="text/javascript">
			var myChart = echarts.init(document.getElementById('main'));

			window.onload= function(){
				$.ajax({
					type: 'get',
					url : '/line/charts',
					dataType: 'json',
// 					success: (data, statusText, xhr) => {
					success:function(data){
//	 					$.get('data.json', function(data) { //与服务器连接成功
							myChart.setOption(option = {
								title: {
									text: 'ECharts 异步加载数据'
								},
								tooltip: {},
								legend: {
									data: ['访问量']
								},
								xAxis: {
									// 横坐标值：data.name
									data: data.categories
								},
								yAxis: {},
								series: [{
									name: '访问量',
									type: 'line',
									// data:data.data[200,100,350,90,11]
									data: data.data
								}]
							});
//	 					});
					}
				})
			}
		</script>

4.个性化图表样式

<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>
<input type="button" value="reset" onclick="reset()"/>
<script type="text/javascript">
	function reset(){
		window.location.reload()
	}
	
	// 基于准备好的dom，初始化echarts实例
	var myChart = echarts.init(document.getElementById('main'));
	myChart.setOption(
		option = {
			backgroundColor: '#2c343c',
			visualMap: {
				show: false,
				min: 80,
				max: 600,
				inRange: {
					colorLightness: [0, 1]
				}
			},
			series: [{
				name: '访问来源',
				type: 'pie',
				radius: '55%',
				data: [{
						value: 235,
						name: '视频广告'
					},
					{
						value: 274,
						name: '联盟广告'
					},
					{
						value: 310,
						name: '邮件营销'
					},
					{
						value: 335,
						name: '直接访问'
					},
					{
						value: 400,
						name: '搜索引擎'
					}
				],
				roseType: 'angle',
				label: {
					normal: {
						textStyle: {
							color: 'rgba(255, 255, 255, 0.3)'
						}
					}
				},
				labelLine: {
					normal: {
						lineStyle: {
							color: 'rgba(255, 255, 255, 0.3)'
						}
					}
				},
				itemStyle: {
					normal: {
						color: '#c23531',
						shadowBlur: 200,
						shadowColor: 'rgba(0, 0, 0, 0.5)'
					}
				}
			}]
		}
	)
</script>

5.异步加载图表

 <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
 <div id="main" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('main'));
      function fetchData(cb) {
          // 通过 setTimeout 模拟异步加载
          setTimeout(function () {
              cb({
                  categories: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
                  data: [5, 20, 36, 10, 10, 20]
              });
          }, 1000);
      }
      myChart.setOption(option = {
          title: {
              text: '异步数据加载示例'
          },
          tooltip: {},
          legend: {
              data: ['销量']
          },
          xAxis: {
              data: []
          },
          yAxis: {},
          series: [{
              name: '销量',
              type: 'bar',
              data: []
          }]
      });

myChart.showLoading();

      fetchData(function (data) {
	myChart.hideLoading();
          myChart.setOption({
              xAxis: {
                  data: data.categories
              },
              series: [{
                  // 根据名字对应到相应的系列
                  name: '销量',
                  data: data.data
              }]
          });
      });

  </script>

)