123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 |
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <script src="esl.js"></script>
- <script src="config.js"></script>
- <script src="lib/jquery.min.js"></script>
- <script src="lib/facePrint.js"></script>
- </head>
- <body>
- <style>
- html, body, #main {
- width: 100%;
- height: 100%;
- margin: 0;
- }
- </style>
- <div id="main"></div>
- <script>
- require([
- 'echarts',
- 'echarts/chart/map',
- 'echarts/component/title',
- 'echarts/component/legend',
- 'echarts/component/visualMap',
- 'echarts/component/markPoint'
- ], function (echarts) {
- require(['map/js/china'], function () {
- var chart = echarts.init(document.getElementById('main'));
- var itemStyle = {
- normal:{
- borderColor: 'rgba(0, 0, 0, 0.2)'
- },
- emphasis:{
- shadowOffsetX: 0,
- shadowOffsetY: 0,
- shadowBlur: 20,
- borderWidth: 0,
- shadowColor: 'rgba(0, 0, 0, 0.5)'
- }
- }
- chart.setOption({
- title : {
- text: 'iphone销量',
- subtext: '纯属虚构',
- left: 'center'
- },
- legend: {
- orient: 'vertical',
- left: 'left',
- data:['iphone3','iphone4','iphone5']
- },
- visualMap: {
- min: 0,
- max: 1500,
- left: 'left',
- top: 'bottom',
- text:['高','低'], // 文本,默认为数值文本
- calculable : true
- },
- selectedMode: 'single',
- series : [
- {
- name: 'iphone3',
- type: 'map',
- map: 'china',
- itemStyle: itemStyle,
- showLegendSymbol: true,
- zoom: 10,
- roam: true,
- center: [115.97, 29.71],
- markPoint: {
- data: [{
- coord: [115.97, 29.71]
- }]
- },
- label: {
- normal: {
- show: true
- },
- emphasis: {
- 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: itemStyle,
- showLegendSymbol: true,
- label: {
- normal: {
- show: true
- },
- emphasis: {
- 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: itemStyle,
- showLegendSymbol: true,
- label: {
- normal: {
- show: true
- },
- emphasis: {
- 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)}
- ]
- }
- ]
- });
- });
- });
- </script>
- </body>
- </html>
|