<template>
    <view>
      <!-- <uni-ec-canvas
          class="uni-ec-canvas"
          id="uni-ec-canvas"
          ref="uni-ec-canvas"
          canvas-id="uni-ec-canvas"
          :ec="ec"
          @inited="inited"
       ></uni-ec-canvas> -->
	   <uni-ec-canvas
	      class="uni-ec-canvas"
	      id="charts2"
	      ref="charts2"
	      canvas-id="charts2"
	      :ec="ec5"
	      @inited="inited"
	   ></uni-ec-canvas>
    </view>
</template>

<script>
   
    // import uniEcCanvas from './uni-ec-canvas/uni-ec-canvas.vue';
	var dataGZ = [
	    [1,26,37,27,1.163,27,13,"优"],
	    [2,85,62,71,1.195,60,8,"良"],
	    [3,78,38,74,1.363,37,7,"良"],
	    [4,21,21,36,0.634,40,9,"优"],
	    [5,41,42,46,0.915,81,13,"优"],
	    [6,56,52,69,1.067,92,16,"良"],
	    [7,64,30,28,0.924,51,2,"良"],
	    [8,55,48,74,1.236,75,26,"良"],
	    [9,76,85,113,1.237,114,27,"良"],
	    [10,91,81,104,1.041,56,40,"良"],
	    [11,84,39,60,0.964,25,11,"良"],
	    [12,64,51,101,0.862,58,23,"良"],
	    [13,70,69,120,1.198,65,36,"良"],
	    [14,77,105,178,2.549,64,16,"良"],
	    [15,109,68,87,0.996,74,29,"轻度污染"],
	    [16,73,68,97,0.905,51,34,"良"],
	    [17,54,27,47,0.592,53,12,"良"],
	    [18,51,61,97,0.811,65,19,"良"],
	    [19,91,71,121,1.374,43,18,"良"],
	    [20,73,102,182,2.787,44,19,"良"],
	    [21,73,50,76,0.717,31,20,"良"],
	    [22,84,94,140,2.238,68,18,"良"],
	    [23,93,77,104,1.165,53,7,"良"],
	    [24,99,130,227,3.97,55,15,"良"],
	    [25,146,84,139,1.094,40,17,"轻度污染"],
	    [26,113,108,137,1.481,48,15,"轻度污染"],
	    [27,81,48,62,1.619,26,3,"良"],
	    [28,56,48,68,1.336,37,9,"良"],
	    [29,82,92,174,3.29,0,13,"良"],
	    [30,106,116,188,3.628,101,16,"轻度污染"],
	    [31,118,50,0,1.383,76,11,"轻度污染"]
	];
	
	var dataSH = [
	    [1,91,45,125,0.82,34,23,"良"],
	    [2,65,27,78,0.86,45,29,"良"],
	    [3,83,60,84,1.09,73,27,"良"],
	    [4,109,81,121,1.28,68,51,"轻度污染"],
	    [5,106,77,114,1.07,55,51,"轻度污染"],
	    [6,109,81,121,1.28,68,51,"轻度污染"],
	    [7,106,77,114,1.07,55,51,"轻度污染"],
	    [8,89,65,78,0.86,51,26,"良"],
	    [9,53,33,47,0.64,50,17,"良"],
	    [10,80,55,80,1.01,75,24,"良"],
	    [11,117,81,124,1.03,45,24,"轻度污染"],
	    [12,99,71,142,1.1,62,42,"良"],
	    [13,95,69,130,1.28,74,50,"良"],
	    [14,116,87,131,1.47,84,40,"轻度污染"],
	    [15,108,80,121,1.3,85,37,"轻度污染"],
	    [16,134,83,167,1.16,57,43,"轻度污染"],
	    [17,79,43,107,1.05,59,37,"良"],
	    [18,71,46,89,0.86,64,25,"良"],
	    [19,97,71,113,1.17,88,31,"良"],
	    [20,84,57,91,0.85,55,31,"良"],
	    [21,87,63,101,0.9,56,41,"良"],
	    [22,104,77,119,1.09,73,48,"轻度污染"],
	    [23,87,62,100,1,72,28,"良"],
	    [24,168,128,172,1.49,97,56,"中度污染"],
	    [25,65,45,51,0.74,39,17,"良"],
	    [26,39,24,38,0.61,47,17,"优"],
	    [27,39,24,39,0.59,50,19,"优"],
	    [28,93,68,96,1.05,79,29,"良"],
	    [29,188,143,197,1.66,99,51,"中度污染"],
	    [30,174,131,174,1.55,108,50,"中度污染"],
	    [31,187,143,201,1.39,89,53,"中度污染"]
	];
	
	var schema = [
	    {name: 'date', index: 0, text: '日'},
	    {name: 'AQIindex', index: 1, text: 'AQI指数'},
	    {name: 'PM25', index: 2, text: 'PM2.5'},
	    {name: 'PM10', index: 3, text: 'PM10'},
	    {name: 'CO', index: 4, text: '一氧化碳（CO）'},
	    {name: 'NO2', index: 5, text: '二氧化氮（NO2）'},
	    {name: 'SO2', index: 6, text: '二氧化硫（SO2）'}
	];
	
	
	var itemStyle = {
	    opacity: 0.8,
	    shadowBlur: 2,
	    shadowOffsetX: 0,
	    shadowOffsetY: 0,
	    shadowColor: 'rgba(0,0,0,0.3)'
	};
   

	export default{
        data(){
            return {
                ec:{
                    option:{
						    color: [
						         '#fec42c', '#647BD1'
						    ],
						    legend: {
						        top: 10,
						        data: [ '男', '女'],
						        textStyle: {
						            fontSize: 12
						        }
						    },
						    grid: {
						        // left: '10%',
						        right: 40,
						        top: '18%',
						        bottom: '10%'
						    },
						    tooltip: {
						         backgroundColor: ['rgba(255,255,255,0.7)'],
						        formatter: function (obj) {
						            var value = obj.value;
						            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
						                + obj.seriesName + ' ' + value[0] + '日：'
						                + value[7]
						                + '</div>'
						                + schema[1].text + '：' + value[1] + '<br>'
						                + schema[2].text + '：' + value[2] + '<br>'
						                + schema[3].text + '：' + value[3] + '<br>'
						                + schema[4].text + '：' + value[4] + '<br>'
						                + schema[5].text + '：' + value[5] + '<br>'
						                + schema[6].text + '：' + value[6] + '<br>';
						        }
						    },
							 visualMap: [
							        {
										show: false,
							            left: 'right',
							            top: '10%',
							            dimension: 2,
							            min: 0,
							            max: 250,
							            itemWidth: uni.upx2px(30),
							            itemHeight: uni.upx2px(120),
							            calculable: true,
							            precision: 0.1,
							            text: ['圆形大小：PM2.5'],
							            textGap: 30,
							            inRange: {
							                symbolSize: [uni.upx2px(10), uni.upx2px(70)]
							            },
							            outOfRange: {
							                symbolSize: [uni.upx2px(10), uni.upx2px(70)],
							                color: ['rgba(255,255,255,0.4)']
							            },
							            controller: {
							                inRange: {
							                    color: ['#c23531']
							                },
							                outOfRange: {
							                    color: ['#999']
							                }
							            }
							        },
							        {
										show: false,
							            left: 'right',
							            bottom: '5%',
							            dimension: 6,
							            min: 0,
							            max: 50,
							            itemHeight: uni.upx2px(120),
							            precision: 'auto',
							            text: ['明暗：二氧化硫'],
							            textGap: 30,
							            inRange: {
							                colorLightness: [0.9, 0.5]
							            },
							            outOfRange: {
							                color: ['rgba(255,255,255,0.4)']
							            },
							            controller: {
							                inRange: {
							                    color: ['#c23531']
							                },
							                outOfRange: {
							                    color: ['#999']
							                }
							            }
							        }
							    ],
						    xAxis: {
						        type: 'value',
						        name: '日期',
						        nameGap: 16,
						        nameTextStyle: {
						            fontSize: 12
						        },
						        max: 31,
						        splitLine: {
						            show: false
						        },
						    },
						    yAxis: {
						        type: 'value',
						        name: '金额',
						        nameLocation: 'end',
						        nameGap: 20,
						        nameTextStyle: {
						            fontSize: 12
						        },
						        splitLine: {
						            show: false
						        }
						    },
						  
						    series: [
						      
						        {
						            name: '男',
						            type: 'scatter',
						            itemStyle: itemStyle,
									symbolSize:function(value){
										console.log(value)
										return uni.upx2px(value[2]) 
									},
						            data: dataSH
						        },
						        {
						            name: '女',
						            type: 'scatter',
						            itemStyle: itemStyle,
						            data: dataGZ
						        }
						    ]
					} //echart 配置项
                },
				ec1: {
					option:{
					tooltip: {
						trigger: 'axis',
						axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
						}
					},
					legend: {
						data: ['利润', '支出', '收入']
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{
							type: 'value'
						}
					],
					yAxis: [
						{
							type: 'category',
							axisTick: {
								show: false
							},
							data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
						}
					],
					series: [
						{
							name: '利润',
							type: 'bar',
							label: {
								show: true,
								position: 'inside'
							},
							emphasis: {
								focus: 'series'
							},
							data: [200, 170, 240, 244, 200, 220, 210]
						},
						{
							name: '收入',
							type: 'bar',
							stack: '总量',
							label: {
								show: true
							},
							emphasis: {
								focus: 'series'
							},
							data: [320, 302, 341, 374, 390, 450, 420]
						},
						{
							name: '支出',
							type: 'bar',
							stack: '总量',
							label: {
								show: true,
								position: 'left'
							},
							emphasis: {
								focus: 'series'
							},
							data: [-120, -132, -101, -134, -190, -230, -210]
						}
					]
				}
				},
				ec2: {
					option:{ title: {
							text: '雷达图'
						},
						tooltip: {
							trigger: 'axis'
						},
						legend: {
							left: 'right',
							data: ['某软件', ]
						},
						radar: [
							{
								indicator: [
									{text: '品牌', max: 100},
									{text: '内容', max: 100},
									{text: '可用性', max: 100},
									{text: '功能', max: 100}
								],
								// center: ['25%', '40%'],
								radius: 80
							},
						 
						],
						series: [
							{
								type: 'radar',
								tooltip: {
									trigger: 'item'
								},
								areaStyle: {},
								data: [
									{
										value: [60, 73, 85, 40],
										name: '某软件'
									}
								]
							},
						  
						],
					}
				},
				ec3:{
					option: {
						title: {
							text: '漏斗图',
							subtext: '纯属虚构'
						},
						tooltip: {
							trigger: 'item',
							formatter: "{a} <br/>{b} : {c}%"
						},
						toolbox: {
							feature: {
								dataView: {readOnly: false},
								restore: {},
								saveAsImage: {}
							}
						},
						legend: {
							data: ['展现','点击','访问','咨询','订单']
						},
						series: [
							{
								name: '预期',
								type: 'funnel',
								left: '10%',
								width: '80%',
								label: {
									formatter: '{b}预期'
								},
								labelLine: {
									show: false
								},
								itemStyle: {
									opacity: 0.7
								},
								emphasis: {
									label: {
										position: 'inside',
										formatter: '{b}预期: {c}%'
									}
								},
								data: [
									{value: 60, name: '访问'},
									{value: 40, name: '咨询'},
									{value: 20, name: '订单'},
									{value: 80, name: '点击'},
									{value: 100, name: '展现'}
								]
							},
							{
								name: '实际',
								type: 'funnel',
								left: '10%',
								width: '80%',
								maxSize: '80%',
								label: {
									position: 'inside',
									formatter: '{c}%',
									color: '#fff'
								},
								itemStyle: {
									opacity: 0.5,
									borderColor: '#fff',
									borderWidth: 2
								},
								emphasis: {
									label: {
										position: 'inside',
										formatter: '{b}实际: {c}%'
									}
								},
								data: [
									{value: 30, name: '访问'},
									{value: 10, name: '咨询'},
									{value: 5, name: '订单'},
									{value: 50, name: '点击'},
									{value: 80, name: '展现'}
								],
								// Ensure outer shape will not be over inner shape when hover.
								z: 100
							}
						]
					}
				},
				ec4:{
					option : {
					    title: {
					        text: 'Male and female height and weight distribution',
					        subtext: 'Data from: Heinz 2003'
					    },
					    grid: {
					        left: '3%',
					        right: '7%',
					        bottom: '7%',
					        containLabel: true
					    },
					    tooltip: {
					        // trigger: 'axis',
					        showDelay: 0,
					        formatter: function (params) {
					            if (params.value.length > 1) {
					                return params.seriesName + ' :<br/>'
					                + params.value[0] + 'cm '
					                + params.value[1] + 'kg ';
					            }
					            else {
					                return params.seriesName + ' :<br/>'
					                + params.name + ' : '
					                + params.value + 'kg ';
					            }
					        },
					        axisPointer: {
					            show: true,
					            type: 'cross',
					            lineStyle: {
					                type: 'dashed',
					                width: 1
					            }
					        }
					    },
					    toolbox: {
					        feature: {
					            dataZoom: {},
					            brush: {
					                type: ['rect', 'polygon', 'clear']
					            }
					        }
					    },
					    brush: {
					    },
					    legend: {
					        data: ['Female', 'Male'],
					        left: 'center',
					        bottom: 10
					    },
					    xAxis: [
					        {
					            type: 'value',
					            scale: true,
					            axisLabel: {
					                formatter: '{value} cm'
					            },
					            splitLine: {
					                show: false
					            }
					        }
					    ],
					    yAxis: [
					        {
					            type: 'value',
					            scale: true,
					            axisLabel: {
					                formatter: '{value} kg'
					            },
					            splitLine: {
					                show: false
					            }
					        }
					    ],
					    series: [
					        {
					            name: 'Female',
					            type: 'scatter',
					            emphasis: {
					                focus: 'series'
					            },
					            data: [[161.2, 51.6], [167.5, 59.0], [159.5, 49.2], [157.0, 63.0], [155.8, 53.6],
					                [170.0, 59.0], [159.1, 47.6], [166.0, 69.8], [176.2, 66.8], [160.2, 75.2],
					                [172.5, 55.2], [170.9, 54.2], [172.9, 62.5], [153.4, 42.0], [160.0, 50.0],
					                [147.2, 49.8], [168.2, 49.2], [175.0, 73.2], [157.0, 47.8], [167.6, 68.8],
					                [159.5, 50.6], [175.0, 82.5], [166.8, 57.2], [176.5, 87.8], [170.2, 72.8],
					                [174.0, 54.5], [173.0, 59.8], [179.9, 67.3], [170.5, 67.8], [160.0, 47.0],
					                [154.4, 46.2], [162.0, 55.0], [176.5, 83.0], [160.0, 54.4], [152.0, 45.8],
					                [162.1, 53.6], [170.0, 73.2], [160.2, 52.1], [161.3, 67.9], [166.4, 56.6],
					                [168.9, 62.3], [163.8, 58.5], [167.6, 54.5], [160.0, 50.2], [161.3, 60.3],
					                [167.6, 58.3], [165.1, 56.2], [160.0, 50.2], [170.0, 72.9], [157.5, 59.8],
					                [167.6, 61.0], [160.7, 69.1], [163.2, 55.9], [152.4, 46.5], [157.5, 54.3],
					                [168.3, 54.8], [180.3, 60.7], [165.5, 60.0], [165.0, 62.0], [164.5, 60.3],
					                [156.0, 52.7], [160.0, 74.3], [163.0, 62.0], [165.7, 73.1], [161.0, 80.0],
					                [162.0, 54.7], [166.0, 53.2], [174.0, 75.7], [172.7, 61.1], [167.6, 55.7],
					                [151.1, 48.7], [164.5, 52.3], [163.5, 50.0], [152.0, 59.3], [169.0, 62.5],
					                [164.0, 55.7], [161.2, 54.8], [155.0, 45.9], [170.0, 70.6], [176.2, 67.2],
					                [170.0, 69.4], [162.5, 58.2], [170.3, 64.8], [164.1, 71.6], [169.5, 52.8],
					                [163.2, 59.8], [154.5, 49.0], [159.8, 50.0], [173.2, 69.2], [170.0, 55.9],
					                [161.4, 63.4], [169.0, 58.2], [166.2, 58.6], [159.4, 45.7], [162.5, 52.2],
					                [159.0, 48.6], [162.8, 57.8], [159.0, 55.6], [179.8, 66.8], [162.9, 59.4],
					                [161.0, 53.6], [151.1, 73.2], [168.2, 53.4], [168.9, 69.0], [173.2, 58.4],
					                [171.8, 56.2], [178.0, 70.6], [164.3, 59.8], [163.0, 72.0], [168.5, 65.2],
					                [166.8, 56.6], [172.7, 105.2], [163.5, 51.8], [169.4, 63.4], [167.8, 59.0],
					                [159.5, 47.6], [167.6, 63.0], [161.2, 55.2], [160.0, 45.0], [163.2, 54.0],
					                [162.2, 50.2], [161.3, 60.2], [149.5, 44.8], [157.5, 58.8], [163.2, 56.4],
					                [172.7, 62.0], [155.0, 49.2], [156.5, 67.2], [164.0, 53.8], [160.9, 54.4],
					                [162.8, 58.0], [167.0, 59.8], [160.0, 54.8], [160.0, 43.2], [168.9, 60.5],
					                [158.2, 46.4], [156.0, 64.4], [160.0, 48.8], [167.1, 62.2], [158.0, 55.5],
					                [167.6, 57.8], [156.0, 54.6], [162.1, 59.2], [173.4, 52.7], [159.8, 53.2],
					                [170.5, 64.5], [159.2, 51.8], [157.5, 56.0], [161.3, 63.6], [162.6, 63.2],
					                [160.0, 59.5], [168.9, 56.8], [165.1, 64.1], [162.6, 50.0], [165.1, 72.3],
					                [166.4, 55.0], [160.0, 55.9], [152.4, 60.4], [170.2, 69.1], [162.6, 84.5],
					                [170.2, 55.9], [158.8, 55.5], [172.7, 69.5], [167.6, 76.4], [162.6, 61.4],
					                [167.6, 65.9], [156.2, 58.6], [175.2, 66.8], [172.1, 56.6], [162.6, 58.6],
					                [160.0, 55.9], [165.1, 59.1], [182.9, 81.8], [166.4, 70.7], [165.1, 56.8],
					                [177.8, 60.0], [165.1, 58.2], [175.3, 72.7], [154.9, 54.1], [158.8, 49.1],
					                [172.7, 75.9], [168.9, 55.0], [161.3, 57.3], [167.6, 55.0], [165.1, 65.5],
					                [175.3, 65.5], [157.5, 48.6], [163.8, 58.6], [167.6, 63.6], [165.1, 55.2],
					                [165.1, 62.7], [168.9, 56.6], [162.6, 53.9], [164.5, 63.2], [176.5, 73.6],
					                [168.9, 62.0], [175.3, 63.6], [159.4, 53.2], [160.0, 53.4], [170.2, 55.0],
					                [162.6, 70.5], [167.6, 54.5], [162.6, 54.5], [160.7, 55.9], [160.0, 59.0],
					                [157.5, 63.6], [162.6, 54.5], [152.4, 47.3], [170.2, 67.7], [165.1, 80.9],
					                [172.7, 70.5], [165.1, 60.9], [170.2, 63.6], [170.2, 54.5], [170.2, 59.1],
					                [161.3, 70.5], [167.6, 52.7], [167.6, 62.7], [165.1, 86.3], [162.6, 66.4],
					                [152.4, 67.3], [168.9, 63.0], [170.2, 73.6], [175.2, 62.3], [175.2, 57.7],
					                [160.0, 55.4], [165.1, 104.1], [174.0, 55.5], [170.2, 77.3], [160.0, 80.5],
					                [167.6, 64.5], [167.6, 72.3], [167.6, 61.4], [154.9, 58.2], [162.6, 81.8],
					                [175.3, 63.6], [171.4, 53.4], [157.5, 54.5], [165.1, 53.6], [160.0, 60.0],
					                [174.0, 73.6], [162.6, 61.4], [174.0, 55.5], [162.6, 63.6], [161.3, 60.9],
					                [156.2, 60.0], [149.9, 46.8], [169.5, 57.3], [160.0, 64.1], [175.3, 63.6],
					                [169.5, 67.3], [160.0, 75.5], [172.7, 68.2], [162.6, 61.4], [157.5, 76.8],
					                [176.5, 71.8], [164.4, 55.5], [160.7, 48.6], [174.0, 66.4], [163.8, 67.3]
					            ],
					            markArea: {
					                silent: true,
					                itemStyle: {
					                    color: 'transparent',
					                    borderWidth: 1,
					                    borderType: 'dashed'
					                },
					                data: [[{
					                    name: 'Female Data Range',
					                    xAxis: 'min',
					                    yAxis: 'min'
					                }, {
					                    xAxis: 'max',
					                    yAxis: 'max'
					                }]]
					            },
					            markPoint: {
					                data: [
					                    {type: 'max', name: 'Max'},
					                    {type: 'min', name: 'Min'}
					                ]
					            },
					            markLine: {
					                lineStyle: {
					                    type: 'solid'
					                },
					                data: [
					                    {type: 'average', name: '平均值'},
					                    { xAxis: 160 }
					                ]
					            }
					        },
					        {
					            name: 'Male',
					            type: 'scatter',
					            emphasis: {
					                focus: 'series'
					            },
					            data: [[174.0, 65.6], [175.3, 71.8], [193.5, 80.7], [186.5, 72.6], [187.2, 78.8],
					                [181.5, 74.8], [184.0, 86.4], [184.5, 78.4], [175.0, 62.0], [184.0, 81.6],
					                [180.0, 76.6], [177.8, 83.6], [192.0, 90.0], [176.0, 74.6], [174.0, 71.0],
					                [184.0, 79.6], [192.7, 93.8], [171.5, 70.0], [173.0, 72.4], [176.0, 85.9],
					                [176.0, 78.8], [180.5, 77.8], [172.7, 66.2], [176.0, 86.4], [173.5, 81.8],
					                [178.0, 89.6], [180.3, 82.8], [180.3, 76.4], [164.5, 63.2], [173.0, 60.9],
					                [183.5, 74.8], [175.5, 70.0], [188.0, 72.4], [189.2, 84.1], [172.8, 69.1],
					                [170.0, 59.5], [182.0, 67.2], [170.0, 61.3], [177.8, 68.6], [184.2, 80.1],
					                [186.7, 87.8], [171.4, 84.7], [172.7, 73.4], [175.3, 72.1], [180.3, 82.6],
					                [182.9, 88.7], [188.0, 84.1], [177.2, 94.1], [172.1, 74.9], [167.0, 59.1],
					                [169.5, 75.6], [174.0, 86.2], [172.7, 75.3], [182.2, 87.1], [164.1, 55.2],
					                [163.0, 57.0], [171.5, 61.4], [184.2, 76.8], [174.0, 86.8], [174.0, 72.2],
					                [177.0, 71.6], [186.0, 84.8], [167.0, 68.2], [171.8, 66.1], [182.0, 72.0],
					                [167.0, 64.6], [177.8, 74.8], [164.5, 70.0], [192.0, 101.6], [175.5, 63.2],
					                [171.2, 79.1], [181.6, 78.9], [167.4, 67.7], [181.1, 66.0], [177.0, 68.2],
					                [174.5, 63.9], [177.5, 72.0], [170.5, 56.8], [182.4, 74.5], [197.1, 90.9],
					                [180.1, 93.0], [175.5, 80.9], [180.6, 72.7], [184.4, 68.0], [175.5, 70.9],
					                [180.6, 72.5], [177.0, 72.5], [177.1, 83.4], [181.6, 75.5], [176.5, 73.0],
					                [175.0, 70.2], [174.0, 73.4], [165.1, 70.5], [177.0, 68.9], [192.0, 102.3],
					                [176.5, 68.4], [169.4, 65.9], [182.1, 75.7], [179.8, 84.5], [175.3, 87.7],
					                [184.9, 86.4], [177.3, 73.2], [167.4, 53.9], [178.1, 72.0], [168.9, 55.5],
					                [157.2, 58.4], [180.3, 83.2], [170.2, 72.7], [177.8, 64.1], [172.7, 72.3],
					                [165.1, 65.0], [186.7, 86.4], [165.1, 65.0], [174.0, 88.6], [175.3, 84.1],
					                [185.4, 66.8], [177.8, 75.5], [180.3, 93.2], [180.3, 82.7], [177.8, 58.0],
					                [177.8, 79.5], [177.8, 78.6], [177.8, 71.8], [177.8, 116.4], [163.8, 72.2],
					                [188.0, 83.6], [198.1, 85.5], [175.3, 90.9], [166.4, 85.9], [190.5, 89.1],
					                [166.4, 75.0], [177.8, 77.7], [179.7, 86.4], [172.7, 90.9], [190.5, 73.6],
					                [185.4, 76.4], [168.9, 69.1], [167.6, 84.5], [175.3, 64.5], [170.2, 69.1],
					                [190.5, 108.6], [177.8, 86.4], [190.5, 80.9], [177.8, 87.7], [184.2, 94.5],
					                [176.5, 80.2], [177.8, 72.0], [180.3, 71.4], [171.4, 72.7], [172.7, 84.1],
					                [172.7, 76.8], [177.8, 63.6], [177.8, 80.9], [182.9, 80.9], [170.2, 85.5],
					                [167.6, 68.6], [175.3, 67.7], [165.1, 66.4], [185.4, 102.3], [181.6, 70.5],
					                [172.7, 95.9], [190.5, 84.1], [179.1, 87.3], [175.3, 71.8], [170.2, 65.9],
					                [193.0, 95.9], [171.4, 91.4], [177.8, 81.8], [177.8, 96.8], [167.6, 69.1],
					                [167.6, 82.7], [180.3, 75.5], [182.9, 79.5], [176.5, 73.6], [186.7, 91.8],
					                [188.0, 84.1], [188.0, 85.9], [177.8, 81.8], [174.0, 82.5], [177.8, 80.5],
					                [171.4, 70.0], [185.4, 81.8], [185.4, 84.1], [188.0, 90.5], [188.0, 91.4],
					                [182.9, 89.1], [176.5, 85.0], [175.3, 69.1], [175.3, 73.6], [188.0, 80.5],
					                [188.0, 82.7], [175.3, 86.4], [170.5, 67.7], [179.1, 92.7], [177.8, 93.6],
					                [175.3, 70.9], [182.9, 75.0], [170.8, 93.2], [188.0, 93.2], [180.3, 77.7],
					                [177.8, 61.4], [185.4, 94.1], [168.9, 75.0], [185.4, 83.6], [180.3, 85.5],
					                [174.0, 73.9], [167.6, 66.8], [182.9, 87.3], [160.0, 72.3], [180.3, 88.6],
					                [167.6, 75.5], [186.7, 101.4], [175.3, 91.1], [175.3, 67.3], [175.9, 77.7],
					                [175.3, 81.8], [179.1, 75.5], [181.6, 84.5], [177.8, 76.6], [182.9, 85.0],
					                [177.8, 102.5], [184.2, 77.3], [179.1, 71.8], [176.5, 87.9], [188.0, 94.3],
					                [174.0, 70.9], [167.6, 64.5], [170.2, 77.3], [167.6, 72.3], [188.0, 87.3],
					                [174.0, 80.0], [176.5, 82.3], [180.3, 73.6], [167.6, 74.1], [188.0, 85.9],
					                [180.3, 73.2], [167.6, 76.3], [183.0, 65.9], [183.0, 90.9], [179.1, 89.1],
					                [170.2, 62.3], [177.8, 82.7], [179.1, 79.1], [190.5, 98.2], [177.8, 84.1],
					                [180.3, 83.2], [180.3, 83.2]
					            ],
					            markArea: {
					                silent: true,
					                itemStyle: {
					                    color: 'transparent',
					                    borderWidth: 1,
					                    borderType: 'dashed'
					                },
					                data: [[{
					                    name: 'Male Data Range',
					                    xAxis: 'min',
					                    yAxis: 'min'
					                }, {
					                    xAxis: 'max',
					                    yAxis: 'max'
					                }]]
					            },
					            markPoint: {
					                data: [
					                    {type: 'max', name: 'Max'},
					                    {type: 'min', name: 'Min'}
					                ]
					            },
					            markLine: {
					                lineStyle: {
					                    type: 'solid'
					                },
					                data: [
					                    {type: 'average', name: 'Average'},
					                    { xAxis: 170 }
					                ]
					            }
					        }
					    ]
					}
				},
				ec5:{
					option:{
					    tooltip: {
					        trigger: 'item',
							
					        formatter: '{b}: {c} ({d}%)'
					    },
					  //   legend: {
							// itemHeight: 10,
							// itemWidth: 10,
							// orient: 'vertical',
							// right: '8%',
					  //       data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
					  //   },
					    series: [
					        {
					            name: '访问来源',
					            type: 'pie',
					            selectedMode: 'single',
					            radius: [0, '42%'],
								center: ['50%','50%'],
					            label: {
					                // position: 'inner',
					                fontSize: 14,
					            },
					            labelLine: {
					                show: true,
									length: 68,
									length2: 30,
									smooth: true,
									minTurnAngle: 0
					            },
					            data: [
					                {value: 136763, name: '餐饮主食'},
					                {value: 126763, name: '休闲小吃'},
					                {value: 86763, name: '生活零售'},
					                {value: 36763, name: '司乘体验'},
					                {value: 56763, name: '汽车服务', selected: true}
					            ],
								color:['#FFAC37', '#d8ece9', '#e0e3f7', '#f7f5f6', '#b2b7e3']
					        },
					        {
					            name: '访问来源',
					            type: 'pie',
					            radius: ['60%', '84%'],
								center: ['50%','50%'],
					            labelLine: {
					                length: 30,
					            },
					            label: {
									show:false,
								},
								color: ['#7886E3', '#70D598', '#F4B27A','#9BC8FB', '#ADE5EE', '#6B75B8', '#6FEBC3', '#F4B27A', '#4E5699', '#F3B1C9', '#e0e3f7', '#FFE886', '#f7f5f6', '#F3B1C9','#5E67B4', '#75B7AD', '#AFB7E6'],
					            // ['#FFE7C0','#FEDA9D','#FEC057','#FEA427','#E1C9F7','#CDA6F1','#A863E7','#8A2FDF','#FFC3CD','#F4A4B2','#FE6582','#FD1345',
									// '#C5CDF9','#9AA6EF','#7786E3','#5162CE','#D8ECEA','#8FE5B2','#70D599','#4ABA78','#F9C8A0','#FAB176','#E89653','#E28234']
								//     formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
					            //     backgroundColor: '#F6F8FC',
					            //     borderColor: '#8C8D8E',
					            //     borderWidth: 1,
					            //     borderRadius: 4,
					                
					            //     rich: {
					            //         a: {
					            //             color: '#6E7079',
					            //             lineHeight: 22,
					            //             align: 'center'
					            //         },
					            //         hr: {
					            //             borderColor: '#8C8D8E',
					            //             width: '100%',
					            //             borderWidth: 1,
					            //             height: 0
					            //         },
					            //         b: {
					            //             color: '#4C5058',
					            //             fontSize: 14,
					            //             fontWeight: 'bold',
					            //             lineHeight: 33
					            //         },
					            //         per: {
					            //             color: '#fff',
					            //             backgroundColor: '#4C5058',
					            //             padding: [3, 4],
					            //             borderRadius: 4
					            //         }
					            //     }
					            // },
					             data: [
					                {value: 1048, name: '百度'},
					                {value: 335, name: '直达'},
					                {value: 310, name: '邮件营销'},
					                {value: 251, name: '谷歌'},
					                {value: 234, name: '联盟广告'},
					                {value: 147, name: '必应'},
					                {value: 135, name: '视频广告'},
					                {value: 102, name: '其他'},
									{value: 148, name: '百度2'},
									{value: 335, name: '直达2'},
									{value: 310, name: '邮件营销2'},
									{value: 251, name: '谷歌2'},
									{value: 234, name: '联盟广告2'},
									{value: 147, name: '必应2'},
									{value: 135, name: '视频广告2'},
									{value: 102, name: '其他2'}
					            ]
					        }
					    ]
					}
				}
			}
        },
        components:{
            // uniEcCanvas
        },
        methods:{
            inited(chart){
               console.log('图表初始化完毕')
               console.log('chart实例', chart)
            },
			chart2(){
				 var data = [];
				  var data2 = [];
				
				  for (var i = 0; i < 10; i++) {
				    data.push(
				      [
				        Math.round(Math.random() * 100),
				        Math.round(Math.random() * 100),
				        Math.round(Math.random() * 40)
				      ]
				    );
				    data2.push(
				      [
				        Math.round(Math.random() * 100),
				        Math.round(Math.random() * 100),
				        Math.round(Math.random() * 100)
				      ]
				    );
				  }
				
				  var axisCommon = {
				    axisLabel: {
				      textStyle: {
				        color: '#C8C8C8'
				      }
				    },
				    axisTick: {
				      lineStyle: {
				        color: '#fff'
				      }
				    },
				    axisLine: {
				      lineStyle: {
				        color: '#C8C8C8'
				      }
				    },
				    splitLine: {
				      lineStyle: {
				        color: '#C8C8C8',
				        type: 'solid'
				      }
				    }
				  };
				
				  var option = {
				    color: ["#FF7070", "#60B6E3"],
				    backgroundColor: '#eee',
				    xAxis: axisCommon,
				    yAxis: axisCommon,
				    legend: {
				      data: ['aaaa', 'bbbb']
				    },
				    visualMap: {
				      show: false,
				      max: 500,
				      inRange: {
				        symbolSize: [uni.upx2px(20), uni.upx2px(70)]
				      }
				    },
				    series: [{
				      type: 'scatter',
				      name: 'aaaa',
				      data: data
				    },
				    {
				      name: 'bbbb',
				      type: 'scatter',
				      data: data2
				    }
				    ],
				    animationDelay: function (idx) {
				      return idx * 50;
				    },
				    animationEasing: 'elasticOut'
				  };
				  
				this.ec.option = option
			}
        },
		onLoad() {
			// this.chart2()
		}
    }
</script>
<style>
	
   .uni-ec-canvas{
       width: 750rpx;
       height: 526rpx;
       display:block;
	   position: relative;
   }
    
</style>