eCharts的随笔

1.散点图中找最优记录

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title></title>
  6     <meta charset="utf-8" />
  7     <link rel="stylesheet" href="style/style.css">
  8     <script src="js/echarts.common.min.js"></script>
  9 </head>
 10 <body>
 11     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 12     <div id="main" style="width: 620px;height:400px;"></div>
 13     <script type="text/javascript">
 14         // 基于准备好的dom，初始化echarts实例
 15         var myChart = echarts.init(document.getElementById('main'));
 16         var data = [[],[]];
 17         var showVal = [[3, 200099, "顺丰"], [2, 500039, "腾讯"], [5, 188669, "中科"], [4, 900009, "华为"], [3, 333339, "阿里"], [4, 233339, "万达"], [2, 433339, "中信"], [7, 388889, "中科"], [6, 388889, "kkk"], [4, 233359, 'lekd']];
 18         showVal = showVal.sort(function (a, b) {
 19             if (a[0] == b[0]) {
 20                 return a[1]>b[1]
 21             }
 22             return a[0] < b[0]
 23         });
 24         var schema = [
 25             { name: 'money', index: 0, text: '金额' },
 26             { name: 'selUser', index: 1, text: '选择中标人' }
 27         ];
 28         for (var i = 0; i < showVal.length; i++) {
 29             var a= [];
 30             if (showVal[0][1] == showVal[i][1]) {
 31                 if (showVal[0][0] == showVal[i][0]) {
 32                     data[0].push(showVal[i]);
 33                 } else {
 34                     data[1].push(showVal[i]);
 35                 }
 36             } else { 
 37                 data[1].push(showVal[i]);
 38             }
 39         }
 40         option = {
 41             backgroundColor: new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
 42                 offset: 0,
 43                 color: '#fff'
 44             }, {
 45                 offset: 1,
 46                 color: '#fff'
 47             }]),
 48             title: {
 49                 left :'35%',
 50                 text: '寻找纸板插入物, 纸板供应商',
 51                 textStyle:{
 52                     color: '#354052',
 53                     fontSize:16
 54                     }
 55             },
 56             //系列标记
 57             legend: {
 58                 y: 'bottom',
 59                 data: ['投标', '最佳出价'],
 60                 itemGap:40,
 61             },
 62             //提示框的事例
 63             tooltip: {
 64                 padding: 10,
 65                 backgroundColor: '#222',
 66                 borderColor: '#777',
 67                 borderWidth: 1,
 68                 formatter: function (obj) {
 69                     var value = obj.value;
 70                     return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
 71                         + value[2]
 72                         + '</div>'
 73                         + schema[0].text + '：' + value[1] + '<br>'
 74                         + '选择中标人<br>'
 75                 }
 76             },
 77             //x坐标的设置
 78             xAxis: {
 79                 name: '供应商评分',
 80                 nameTextStyle: {
 81                     color: '#7F8FA4',
 82                     fontSize: 12
 83                 },
 84                 axisLine: {
 85                     lineStyle: {
 86                         color: '#979797'
 87                     }
 88                 },
 89                 splitLine: {
 90                     lineStyle: {
 91                         color: '#D8D8D8',
 92                         type: 'dashed',
 93                     }
 94                 }
 95             },
 96             //y坐标的设置
 97             yAxis: {
 98                 name: '投标金额',
 99                 //坐标轴名称
100                 nameTextStyle: {
101                     color: '#7F8FA4',
102                     fontSize: 12
103                 },
104                //坐标轴的设置
105                 axisLine: {
106                     lineStyle: {
107                         color: '#979797'
108                     }
109                 },
110                 //坐标轴的分割线
111                 splitLine: {
112                     lineStyle: {
113                         color: '#D8D8D8',
114                         type: 'dashed',
115                     }
116                 },
117                 scale: true
118             },
119             series: [{
120                 name: '最佳出价',
121                 data: data[0],
122                 type: 'scatter',
123                 symbolSize: function (data) {
124                     return Math.sqrt(data[1]) / 5e2 * 10;
125                 },
126                 itemStyle: {
127                     normal: {
128                         shadowBlur: 10,
129                         shadowColor: 'rgba(255,128,5,0.5)',
130                         shadowOffsetY: 5,
131                         color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
132                             offset: 0,
133                             color: '#FF8005 '
134                         }, {
135                             offset: 1,
136                             color: '#FF8005'
137                         }])
138                     }
139                 }, markLine: {
140                     silent: true,
141                     lineStyle: {
142                         normal: {
143                             type: 'solid',
144                         }
145                     },
146                     data: [{
147                         yAxis: data[1][7][1]
148                     }],
149                     label: {
150                         normal: {
151                             formatter:'机会金额'
152                         }
153                     }
154                         
155                 }
156             }, {
157                 name: '投标',
158                 data: data[1],
159                 type: 'scatter',
160                 symbolSize: function (data) {
161                     return Math.sqrt(data[1]) / 5e2 * 10;
162                 },
163                 itemStyle: {
164                     normal: {
165                         shadowBlur: 10,
166                         shadowColor: 'rgba(55,178,72,0.5)',
167                         shadowOffsetY: 5,
168                         color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
169                             offset: 0,
170                             color: '#37B248'
171                         }, {
172                             offset: 1,
173                             color: '#37B248'
174                         }])
175                     }
176                 },
177                 
178             }]
179         };
180         // 使用刚指定的配置项和数据显示图表。
181         myChart.setOption(option);
182     </script>
183 </body>
184 </html>

2地图中的特殊标记

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title></title>
  6     <meta charset="utf-8" />
  7     <link rel="stylesheet" href="style/style.css">
  8     <script src="js/echarts.common.min.js"></script>   
  9     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
 10     <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
 11 </head>
 12 <body>
 13     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
 14     <div id="main" style="width: 600px;height:400px;"></div>
 15     <script type="text/javascript">
 16         // 基于准备好的dom，初始化echarts实例
 17         var myChart = echarts.init(document.getElementById('main'));
 18         function randomData() {
 19             return Math.round(Math.random() * 1000);
 20         }
 21         var pricePoint = [[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], [102.188043, 38.520089]];
 22         var geoCoordMap = {
 23             '海门': [121.15, 31.89],
 24             '鄂尔多斯': [109.781327, 39.608266],
 25             '招远': [120.38, 37.35],
 26             '舟山': [122.207216, 29.985295],
 27             '齐齐哈尔': [123.97, 47.33],
 28             '盐城': [120.13, 33.38],
 29             '赤峰': [118.87, 42.28],
 30             "金昌": [102.188043, 38.520089],
 31         };
 32         var geoData = [
 33             { name: "海门", value: 9 },
 34             { name: "鄂尔多斯", value: 12 },
 35             { name: "招远", value: 12 },
 36             { name: "舟山", value: 12 },
 37             { name: "齐齐哈尔", value: 14 },
 38             { name: "盐城", value: 15 },
 39             { name: "赤峰", value: 16 },
 40             { name: "金昌", value: 19 }
 41         ]
 42         //获取唯一识别的值
 43         var selName = geoCoordMap.金昌.toString();
 44         var convertData = function (data, geoCoord1) {
 45             var res = [];
 46             for (var i = 0; i < data.length; i++) {
 47                 var geoCoord = geoCoord1[data[i].name];
 48                 if (geoCoord) {
 49                     res.push({
 50                         name: data[i].name,
 51                         value: geoCoord.concat(data[i].value)
 52                     });
 53                 }
 54             }
 55             return res;
 56         };
 57         var setTip = function (data) {
 58             var res = [];
 59             if(data&&data.length>0){
 60                 for(var i=0;i<data.length;i++){
 61                     res.push({
 62                         coord: data[i],
 63                         label: {
 64                             normal: { show: false }
 65                         },
 66                         symbol: data[i].toString() != selName ? 'image://image/page.png' : 'image://image/page1.png',
 67                     })
 68                 }
 69             }
 70             return res
 71         }
 72         option = {
 73             backgroundColor: '#fff',
 74             title: {
 75                 text: '全国主要城市空气质量',
 76                 x: 'center',
 77                 textStyle: {
 78                     color: '#fff'
 79                 }
 80             },
 81             tooltip: {
 82                 trigger: 'item',
 83                 formatter: function (params) {
 84                     return params.name + ' : ' + params.value[2];
 85                 }
 86             },
 87             geo: {
 88                 map: 'china',
 89                 label: {
 90                     emphasis: {
 91                         show: false
 92                     }
 93                 },
 94                 itemStyle: {
 95                     normal: {
 96                         areaColor: '#E7E7E7',
 97                         borderColor: '#fff'
 98                     },
 99                     emphasis: {
100                         //鼠标移上去的属性
101                         areaColor: '#E7E7E7'
102                     }
103                 }
104             },
105             series: [
106                 {
107                     name: 'pm2.5',
108                     type: 'scatter',
109                     coordinateSystem: 'geo',
110                     data: convertData(geoData, geoCoordMap),
111                     //将默认的显示隐藏掉
112                     symbolSize: 0,
113                     //自定义标示点
114                     markPoint: {
115                         data: setTip(pricePoint),
116                         //设置图片的偏移
117                        // symbolOffset: ['-5%', '-5%'],
118                         //设置图片的宽高
119                         symbolSize: [15,20],
120                     },
121                 }
122             ]
123         }
124         // 使用刚指定的配置项和数据显示图表。
125         myChart.setOption(option);
126     </script>
127 </body>
128 </html>

posted on 2016-12-15 17:27 sunnie_c 阅读(534) 评论(0) 编辑收藏举报