Java Echarts 一页面多图表

主页面 div
页面需要整合echarts.js 和 china.js（中国地图）

 		<div id="main" style="width: 50%;height:400px;float: left">
 				//中国地图
 		 </div>
        <div id="user2" style="width: 50%;height:400px;float: right">
        	//折线图   注意 id不能用user   图表填充不了
        </div>
        <div id="userClass" style="width: 500px;height:400px;">
        	//饼图
         </div>

页面加载完成

	 $(function () {
           index()
        })

        function index() {
            //用户地图展示
            initDataTouristProvince()
            //会员折线图
            initDataReaderByTime()
            //分类用户饼图
            initDataReaderClassByTime()
        }

一、地图

 //省份地图
 			//请求数据
        function initDataTouristProvince() {
			 var url = "/touristAnalyse2Province";
            jQuery.ajax({
                url : url, //处理测试页面,注意返回内容，成功返回
                dataType : 'json',
                data:{},
                type : "post",
                success : function(msg) {
                    console.log(msg.data)   //返回json字符串  必须是name  value的json对象
                   var  provinceData = JSON.parse(msg.data);
                   setMapProvince(provinceData)
                }
            });
        }
		//填充
	 //地图
        function setMapProvince(provinceData) {
            var myChart = echarts.init(document.getElementById('main'));  //获取div
            var optionMap = {
                backgroundColor: '#FFFFFF',
                title: {
                    text: '全国用户大数据',
                    subtext: '',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item'
                },
                //左侧小导航图标
                visualMap: {
                    show : true,
                    x: 'left',
                    y: 'center',
                    splitList: [
                        {start: 500, end:600},{start: 400, end: 500},
                        {start: 300, end: 400},{start: 200, end: 300},
                        {start: 100, end: 200},{start: 0, end: 100},
                    ],
                    color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea']
                },

                //配置属性
                series: [{
                    name: '数据',
                    type: 'map',
                    mapType: 'china',
                    roam: true,
                    label: {
                        normal: {
                            show: true  //省份名称
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data:provinceData  //数据   [{"name":"广东","value":1},{"name":"北京","value":3},{"name":"陕西","value":1}]
                }]
            };
            //使用制定的配置项和数据显示图表
            myChart.setOption(optionMap);
        }

二、折线图

//会员折线
        function initDataReaderByTime() {
            var url = "/userAnalyse";
            jQuery.ajax({
                url : url, //处理测试页面,注意返回内容，成功返回
                dataType : 'json',
                data:{},
                type : "post",
                success : function(msg) {
                    console.log(msg.times)  //  ["2018-10-28","2018-10-29"]
                    console.log(msg.counts)  //   ["400","1274"]
				   var  times = JSON.parse(msg.times);
                    var  counts = JSON.parse(msg.counts);
                    setUserAnalyse(times,counts)
                }
            });
        }

 function setUserAnalyse(times,counts) {
            var userChart = echarts.init(document.getElementById('user2'));
            option = {
                title: {
                    text: '全国会员数据',
                    subtext: '',
                    x:'center'
                },
                xAxis: {
                    type: 'category',
                    data: times   //数据
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: counts,  //数据
                    type: 'line',
                    smooth: true
                }]
            };
            userChart.setOption(option);
        }

三、饼图

//会员阅读分类
        function initDataReaderClassByTime() {
            var url = "/userBookClassAnalyse";
            jQuery.ajax({
                url : url, //处理测试页面,注意返回内容，成功返回
                dataType : 'json',
                data:{ },
                type : "post",
                success : function(msg) {
					//数据必须对应
                    console.log(msg.data) // ["男频", "女频", "轻小说"]
                    console.log(msg.names)  // [{"name":"男频","value":5},{"name":"女频","value":3},{"name":"轻小说","value":36}]
   var  times = JSON.parse(msg.data);
                    var  names = msg.names;
                    setUserClassAnalyse(times,names)
                }
            });
        }

 function setUserClassAnalyse(times,names) {
            var myChartClass = echarts.init(document.getElementById('userClass'));
            option = {
                title : {
                    text: '用户阅读分类',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: names
                },
                color:['blueviolet', 'yellow','red','green'],
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:times,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChartClass.setOption(option);
        }