LargeScreenVisualization/viewdata-master/新增75套源码/65/js/js.js

 $(window).load(function(){$(".loading").fadeOut()})  
$(function () {

echarts_2()
echarts_3()
echarts_4()
echarts_5()
echarts_6()

function echarts_2() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart2'));
var data = [683, 234, 234, 523, 345, 320, 280, 271, 254, 229, 210, 190, 182]
var titlename = ['北京', '上海', '广州', '郑州', '武汉', '南京', '杭州', '东莞', '深圳', '虎门', '青岛', '石家庄', '安阳'];
option = {
	grid: {
        left: '0',
		top:'0',
        right: '0',
        bottom: '0%',
       containLabel: true
    },
    xAxis: {
        show: false
    },
    yAxis: [{
        show: true,
        data: titlename,
        inverse: true,
        axisLine: { show: false},
        splitLine:{ show: false},
        axisTick:{ show: false},
        axisLabel: {
            textStyle: {
                color:'#fff'
            },
        },

    }, {
        show: false,
        inverse: true,
        data: data,
        axisLabel: {textStyle: {color: '#fff'}},
        axisLine: { show: false},
        splitLine:{ show: false},
        axisTick: { show: false},
    }],
    series: [{
        name: '条',
        type: 'bar',
        yAxisIndex: 0,
        data: data,
        barWidth: 15,
        itemStyle: {
            normal: {
               barBorderRadius: 50,
                color:'#1089E7',
            }
        },
        label: {
           normal: {
                show: true,
                position: 'right',
                formatter: '{c}',
			   textStyle: {color: 'rgba(255,255,255,.5)'}
            }
        },
    }]
};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	function echarts_3() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart3'));
option = {
	    tooltip: {
        trigger: 'axis',
        axisPointer: {
            lineStyle: {
                color: '#dddc6b'
            }
        }
    },
    grid: {
        left: '10',
		top: '20',
        right: '30',
        bottom: '10',
        containLabel: true
    },

    xAxis: [{
        type: 'category',
        boundaryGap: false,
axisLabel:  {
                textStyle: {
 					color: "rgba(255,255,255,.6)",
					fontSize:14,
                },
            },
        axisLine: {
			lineStyle: { 
				color: 'rgba(255,255,255,.2)'
			}

        },

   data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']

    }, {

        axisPointer: {show: false},
        axisLine: {  show: false},
        position: 'bottom',
        offset: 20,

       

    }],

    yAxis: [{
        type: 'value',
        axisTick: {show: false},
		splitNumber: 4,
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,.1)'
            }
        },
       axisLabel:  {
                textStyle: {
 					color: "rgba(255,255,255,.6)",
					fontSize:16,
                },
            },

        splitLine: {
            lineStyle: {
                 color: 'rgba(255,255,255,.1)',
	  type: 'dotted',
            }
        }
    }],
    series: [
		{
        name: '结算率',
        type: 'line',
       smooth: true,
        symbol: 'circle',
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
			
            normal: {
				color: 'rgba(31, 174, 234, 1)',
                width: 2
            }
        },
        areaStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(31, 174, 234, 0.4)'
                }, {
                    offset: 0.8,
                    color: 'rgba(31, 174, 234, 0.1)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
            }
        },
			itemStyle: {
			normal: {
				color: '#1f7eea',
				borderColor: 'rgba(31, 174, 234, .1)',
				borderWidth: 5
			}
		},
        data: [3, 6, 3, 6, 3, 9, 3,12, 6, 8, 3, 5, 9, 3]

    }, 

		 ]

};
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	function echarts_4() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart4'));
 var option = {



       
 grid: {
        left: '0',
		top: '30',
        right: '0',
        bottom: '10',
        containLabel: true
    },
        legend: {

            top: 0,

            textStyle: {

            color: "#fff",

        },

        itemWidth: 10,  // 设置宽度

        itemHeight: 10, // 设置高度

        },

        tooltip: {

            trigger: 'axis',

            axisPointer: { // 坐标轴指示器，坐标轴触发有效

                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'

            }

        },

        xAxis: {

            type: 'category',

            data: ["西进口右转","北进口直行","南进口直行",],

            axisTick: { //---坐标轴 刻度

                show: true, //---是否显示

            },

            axisLine: { //---坐标轴 轴线

                show: true, //---是否显示

                lineStyle: {

                    color: 'rgba(255,255,255,.1)',

                    width: 1,

                    type: 'dotted',

                },

            },

            axisLabel: {//X轴文字

                textStyle: {

                    fontSize: 12,

                    color: '#fff'

                },

            },

        },

        yAxis: {

            type: 'value',

            splitLine: {//分割线

                show: true,

                lineStyle: {
 color: 'rgba(255,255,255,.1)',

                    width: 1,
                    type: 'dotted'

                }

            },

            axisLabel: {//Y轴刻度值

                formatter: '{value}',

                textStyle: {

                    fontSize: 12,

                    color: '#fff'

                },

            },

            axisLine: { //---坐标轴 轴线

                show: false, //---是否显示

            },

        },

        series: [{

            name: '原方案',

            type: 'bar',

            data: [3, 7,4],

            barWidth: 15,
	
            barGap: 1, //柱子之间间距 //柱图宽度      两种情况都要设置，设置series 中对应数据柱形的itemStyle属性下的emphasis和normal的barBorderRadius属性初始化时候圆角  鼠标移上去圆角

            itemStyle: {

                normal: {
barBorderRadius: 50,
                    color: "#446ACF",

                }

            },

        }, {

            name: '建议方案',

            type: 'bar',

            data: [6, 2,5],

            barWidth: 15, //柱图宽度
	
            itemStyle: {

                normal: { //设置颜色的渐变
barBorderRadius: 50,
                    color: "#4fb69d",

                }

            },

        }]

    };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	function echarts_5() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart5'));
 option = {
          legend: {
           orient: 'vertical',
            itemWidth: 10,
            itemHeight: 10,
            textStyle:{
                color:'rgba(255,255,255,.5)'
            },
              top:'20%',
          right:30,
            data:['已入驻','已出售','已租赁','闲置房产']
        },
        color: ['#37a2da','#32c5e9','#9fe6b8','#ffdb5c','#ff9f7f','#fb7293','#e7bcf3','#8378ea'],
        tooltip : {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)"
        },
       
        calculable : true,
        series : [
            {
              
                type:'pie',
                radius : [20, 70],
                center: ["35%", "50%"],
                roseType : 'area',
                data:[ 
                    {value:300, name:'已入驻'},
                    {value:200, name:'已出售'},
                    {value:205, name:'已租赁'},
                    {value:180, name:'闲置房产'},
               
                ],
                 label: {
                 normal: {
                     formatter: function(param) {
                         return param.name +':\n' + param.value +'\n';
                     }
    
                 }
             },
             labelLine: {
                 normal: {
                      length:5,
                      length2:15,
                     lineStyle: { width: 1}
                 }
             },
    
             itemStyle: {
                 normal: {
                     shadowBlur: 30,
                     shadowColor: 'rgba(0, 0, 0, 0.4)'
                 }
    
             },
            }
        ]
    };
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
	function echarts_6() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('echart6'));
option = {
    
    tooltip: {
        trigger: 'axis'
    },
    radar: [{
        indicator: [{
            text: '盈利能力',
            max: 100
        }, {
            text: '发展水平',
            max: 100
        }, {
            text: '融资能力',
            max: 100
        }, {
            text: '技术能力',
            max: 100
        }, {
            text: '企业规模',
            max: 100
        }],
        textStyle: {
            color: 'red'
        },
        center: ['50%', '50%'],
        radius: '70%',
        startAngle: 90,
        splitNumber: 4,
        shape: 'circle',
    
        name: {
            padding:-5,
            formatter: '{value}',
            textStyle: {
              
                color: 'rgba(255,255,255,.5)'
            }
        },
        splitArea: {
            areaStyle: {
                color: 'rgba(255,255,255,.05)'
            }
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(255,255,255,.05)'
            }
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,.05)'
            }
        }
    }, ],
    series: [{
        name: '雷达图',
        type: 'radar',
        tooltip: {
            trigger: 'item'
        },
        data: [{
            name: '园区平均值',
            value: [90, 80, 20, 10, 30],
            lineStyle: {
                normal: { 
                    color:'#03b48e',
                    width:2,
                }
            },
            areaStyle: {
                normal: {
                    color: '#03b48e',
                    opacity:.4
                }
            },
            symbolSize: 0,
          
        }, {
            name: '当前园区',
            value: [30, 20, 75, 80, 70],
            symbolSize: 0,
            lineStyle: {
                normal: { 
                    color:'#3893e5',
                    width:2,
                }
            },
                 areaStyle: {
                normal: {
                    color: 'rgba(19, 173, 255, 0.5)'
                }
            }
        }]
    }, ]
};
        myChart.setOption(option);
        window.addEventListener("resize",function(){
            myChart.resize();
        });
    }
})