起步软件技术论坛
搜索
 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 6674|回复: 6

[结贴] Echarts3.x如何实现

[复制链接]

2

主题

25

帖子

135

积分

初级会员

Rank: 2

积分
135
QQ
发表于 2017-12-3 22:30:40 | 显示全部楼层 |阅读模式
版本: BeX5V3.5 小版本号:
数据库: MS SQLServer 服务器操作系统: Windows 应用服务器: Tomcat
客户端操作系统: Windows 7 浏览器: Chrome
起步中的:/UI2/demo/misc/echarts是2.x的示例现在是echarts3.x的和以前大有不同,希望起步更新下示例特别是和地图结合的示例。

91

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
35878
发表于 2017-12-4 10:06:06 | 显示全部楼层
可以到网上查找html5中怎么集成,平台中是一样的
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴
回复 支持 反对

使用道具 举报

2

主题

25

帖子

135

积分

初级会员

Rank: 2

积分
135
QQ
 楼主| 发表于 2017-12-5 21:30:30 | 显示全部楼层
本帖最后由 长江 于 2017-12-5 21:32 编辑

我用Echarts3.x做柱形图,线图没有问题,但在与地图组合就搞不定,如下示例图:
D:\Personal\Desktop\Echart示例1.png
示例代码:
<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
        <!-- 该div就是地图的div,通过调整该div的style就可以调整地图大小和位置 -->
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
       <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script> -->
       <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script> -->
       <!-- <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script> -->
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IdUlL0IiiOYzevqWjckTktoL9xvAIHSX"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript">
       //对container进行初始化
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};


var data = [
    {name: '海门', value: 9},
    {name: '鄂尔多斯', value: 12},
    {name: '招远', value: 12},
    {name: '舟山', value: 12},
    {name: '齐齐哈尔', value: 14},
    {name: '盐城', value: 15},
    {name: '赤峰', value: 16},
    {name: '青岛', value: 18},
    {name: '乳山', value: 18},
。。。。。。省略
    {name: '大庆', value: 279}
];

var geoCoordMap = {
    '海门':[121.15,31.89],
    '鄂尔多斯':[109.781327,39.608266],
    '招远':[120.38,37.35],
    '舟山':[122.207216,29.985295],
    '齐齐哈尔':[123.97,47.33],
    '盐城':[120.13,33.38],
    '赤峰':[118.87,42.28],
    '青岛':[120.33,36.07],
    '乳山':[121.52,36.89],
    '金昌':[102.188043,38.520089],
    '泉州':[118.58,24.93],
    '莱西':[120.53,36.86],
    '日照':[119.46,35.42],
    '胶南':[119.97,35.88],
    '南通':[121.05,32.08],
    '拉萨':[91.11,29.97],
。。。。。。省略
       style: api.style({
            fill: color,
            stroke: echarts.color.lift(color)
        })
    };
}

var option = {
    backgroundColor: '#404a59',
    title: {
        text: '全国主要城市空气质量',
        subtext: 'data from PM25.in',
        sublink: 'http://www.pm25.in',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip : {
        trigger: 'item'
    },
    bmap: {
        center: [104.114129, 37.550339],
        zoom: 5,
        roam: true,
        mapStyle: {
            styleJson: [
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": {
                            "color": "#044161"
                        }
                    },
。。。。。。省略
           itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        },
        {
            type: 'custom',
            coordinateSystem: 'bmap',
            //renderItem: renderItem,
            itemStyle: {
                normal: {
                    opacity: 0.5
                }
            },
            animation: false,
            silent: true,
            data: [0],
            z: -10
        }
    ]
};
myChart.setOption(option);
       </script>
   </body>
</html>
如何实现?请求解。
回复 支持 反对

使用道具 举报

2

主题

25

帖子

135

积分

初级会员

Rank: 2

积分
135
QQ
 楼主| 发表于 2017-12-5 21:33:37 | 显示全部楼层
不知如何加载如下2个:      
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IdUlL0IiiOYzevqWjckTktoL9xvAIHSX"></script>
  <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
回复 支持 反对

使用道具 举报

91

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
35878
发表于 2017-12-6 10:16:06 | 显示全部楼层
直接这样写就可以
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴
回复 支持 反对

使用道具 举报

2

主题

25

帖子

135

积分

初级会员

Rank: 2

积分
135
QQ
 楼主| 发表于 2017-12-8 21:51:48 | 显示全部楼层
直接可以写?
回复 支持 反对

使用道具 举报

91

主题

13万

帖子

3万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
35878
发表于 2017-12-11 09:34:17 | 显示全部楼层
可以
远程的联系方法QQ1392416607,添加好友时,需在备注里注明其论坛名字及ID,公司等信息
发远程时同时也发一下帖子地址,方便了解要解决的问题  WeX5教程  WeX5下载



如按照该方法解决,请及时跟帖,便于版主结贴
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|手机版|X3技术论坛|Justep Inc.    

GMT+8, 2024-3-28 17:39 , Processed in 0.075678 second(s), 25 queries .

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表