echarts 地图为什么出来的效果如下

zzbutcher 发布于 2016/06/02 21:22
阅读 472
收藏 0

<%@ page language="java" import="java.util.*"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'MyJsp.jsp' starting page</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->

  </head>
 
  <body>
    <div id="main" style="width: 98%; height: 500px;border: 1px solid #ccc; padding: 10px;"></div>
    <script type="text/javascript" src="./echarts-all.js"></script>
    <script type="text/javascript" src="./jquery-1.4.2.min.js"></script>

    <script type="text/javascript">

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

    option = {
       title : {
           text: 'iphone销量',
           subtext: '纯属虚构',
           x:'center'
       },

       tooltip : {
           trigger: 'item'
       },
       legend: {
           orient: 'vertical',
           x:'left',
           data:['iphone3','iphone4','iphone5']
       },
       dataRange: {
           min: 0,
           max: 2500,
           x: 'left',
           y: 'bottom',
           text:['高','低'],           // 文本,默认为数值文本
           calculable : true
       },
       toolbox: {
           show: true,
           orient : 'vertical',
           x: 'right',
           y: 'center',
           feature : {
               mark : {show: true},
               dataView : {show: true, readOnly: false},
               restore : {show: true},
               saveAsImage : {show: true}
           }
       },
       roamController: {
           show: true,
           x: 'right',
           mapTypeControl: {
               'china': true
           }
       },
       series : [
           {
               name: 'iphone3',
               type: 'map',
               mapType: 'china',
               roam: false,
               itemStyle:{
                   normal:{label:{show:true}},
                   emphasis:{label:{show:true}}
               },
               data:[
                   {name: '北京',value: Math.round(Math.random()*1000)},
                   {name: '天津',value: Math.round(Math.random()*1000)},
                   {name: '上海',value: Math.round(Math.random()*1000)},
                   {name: '重庆',value: Math.round(Math.random()*1000)},
                   {name: '河北',value: Math.round(Math.random()*1000)},
                   {name: '河南',value: Math.round(Math.random()*1000)},
                   {name: '云南',value: Math.round(Math.random()*1000)},
                   {name: '辽宁',value: Math.round(Math.random()*1000)},
                   {name: '黑龙江',value: Math.round(Math.random()*1000)},
                   {name: '湖南',value: Math.round(Math.random()*1000)},
                   {name: '安徽',value: Math.round(Math.random()*1000)},
                   {name: '山东',value: Math.round(Math.random()*1000)},
                   {name: '新疆',value: Math.round(Math.random()*1000)},
                   {name: '江苏',value: Math.round(Math.random()*1000)},
                   {name: '浙江',value: Math.round(Math.random()*1000)},
                   {name: '江西',value: Math.round(Math.random()*1000)},
                   {name: '湖北',value: Math.round(Math.random()*1000)},
                   {name: '广西',value: Math.round(Math.random()*1000)},
                   {name: '甘肃',value: Math.round(Math.random()*1000)},
                   {name: '山西',value: Math.round(Math.random()*1000)},
                   {name: '内蒙古',value: Math.round(Math.random()*1000)},
                   {name: '陕西',value: Math.round(Math.random()*1000)},
                   {name: '吉林',value: Math.round(Math.random()*1000)},
                   {name: '福建',value: Math.round(Math.random()*1000)},
                   {name: '贵州',value: Math.round(Math.random()*1000)},
                   {name: '广东',value: Math.round(Math.random()*1000)},
                   {name: '青海',value: Math.round(Math.random()*1000)},
                   {name: '西藏',value: Math.round(Math.random()*1000)},
                   {name: '四川',value: Math.round(Math.random()*1000)},
                   {name: '宁夏',value: Math.round(Math.random()*1000)},
                   {name: '海南',value: Math.round(Math.random()*1000)},
                   {name: '台湾',value: Math.round(Math.random()*1000)},
                   {name: '香港',value: Math.round(Math.random()*1000)},
                   {name: '澳门',value: Math.round(Math.random()*1000)}
               ]
           },
           {
               name: 'iphone4',
               type: 'map',
               mapType: 'china',
               itemStyle:{
                   normal:{label:{show:true}},
                   emphasis:{label:{show:true}}
               },
               data:[
                   {name: '北京',value: Math.round(Math.random()*1000)},
                   {name: '天津',value: Math.round(Math.random()*1000)},
                   {name: '上海',value: Math.round(Math.random()*1000)},
                   {name: '重庆',value: Math.round(Math.random()*1000)},
                   {name: '河北',value: Math.round(Math.random()*1000)},
                   {name: '安徽',value: Math.round(Math.random()*1000)},
                   {name: '新疆',value: Math.round(Math.random()*1000)},
                   {name: '浙江',value: Math.round(Math.random()*1000)},
                   {name: '江西',value: Math.round(Math.random()*1000)},
                   {name: '山西',value: Math.round(Math.random()*1000)},
                   {name: '内蒙古',value: Math.round(Math.random()*1000)},
                   {name: '吉林',value: Math.round(Math.random()*1000)},
                   {name: '福建',value: Math.round(Math.random()*1000)},
                   {name: '广东',value: Math.round(Math.random()*1000)},
                   {name: '西藏',value: Math.round(Math.random()*1000)},
                   {name: '四川',value: Math.round(Math.random()*1000)},
                   {name: '宁夏',value: Math.round(Math.random()*1000)},
                   {name: '香港',value: Math.round(Math.random()*1000)},
                   {name: '澳门',value: Math.round(Math.random()*1000)}
               ]
           },
           {
               name: 'iphone5',
               type: 'map',
               mapType: 'china',
               itemStyle:{
                   normal:{label:{show:true}},
                   emphasis:{label:{show:true}}
               },
               data:[
                   {name: '北京',value: Math.round(Math.random()*1000)},
                   {name: '天津',value: Math.round(Math.random()*1000)},
                   {name: '上海',value: Math.round(Math.random()*1000)},
                   {name: '广东',value: Math.round(Math.random()*1000)},
                   {name: '台湾',value: Math.round(Math.random()*1000)},
                   {name: '香港',value: Math.round(Math.random()*1000)},
                   {name: '澳门',value: Math.round(Math.random()*1000)}
               ]
           }
       ]
    };

    myChart.setOption(option);

    </script>

  </body>

</html>  
 
  </body>
</html>

加载中
0
NicoleLikeLake
NicoleLikeLake
没看见引入china.js阿,另外页面设定下utf-8编码吧
返回顶部
顶部