Echarts3.x如何实现

长江 · 发表于 2017-12-3 22:30:40

起步中的：/UI2/demo/misc/echarts是2.x的示例现在是echarts3.x的和以前大有不同，希望起步更新下示例特别是和地图结合的示例。

jishuang · 发表于 2017-12-4 10:06:06

可以到网上查找html5中怎么集成，平台中是一样的

长江 · 发表于 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 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://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>
如何实现？请求解。

长江 · 发表于 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>

jishuang · 发表于 2017-12-6 10:16:06

直接这样写就可以

长江 · 发表于 2017-12-8 21:51:48

直接可以写？

jishuang · 发表于 2017-12-11 09:34:17

可以

		自动登录	找回密码
密码			注册

[结贴] Echarts3.x如何实现