echart 打开新世界的大门

实时折线图

option = {
    backgroundColor:‘#2B2B2B‘,
    tooltip: {
        trigger: ‘axis‘
    },
    legend: {
        data:[‘频率‘],
        textStyle:{
            color:‘#FFF‘,
            fontSize:20
        }
    },
    xAxis:  {
        type: ‘category‘,
        boundaryGap: false,
        splitLine:{
            show:true,
            lineStyle:{
                type:‘dotted‘
            }
        },
        axisLabel:{
            textStyle:{
                color:‘#FFF‘,
                fontSize:20
            }
        },
        axisLine:{
            lineStyle:{
                color:‘#FFF‘
            }
        },
        data: [‘00:00‘,‘01:00‘,‘02:00‘,‘03:00‘,‘04:00‘,‘05:00‘,‘06:00‘,‘07:00‘,‘08:00‘,‘09:00‘,‘10:00‘,‘11:00‘,‘12:00‘,‘13:00‘,‘14:00‘,‘15:00‘,‘16:00‘,‘17:00‘,‘18:00‘,‘19:00‘,‘20:00‘,‘21:00‘,‘22:00‘,‘23:00‘,‘23:59‘]
    },
    yAxis: {
        type: ‘value‘,
        axisLabel: {
            formatter: ‘{value} Hz‘,
            textStyle:{
                color:‘#FFF‘,
                fontSize:20
            }
        },
        min:48.75,
        max:51.25,
        axisLine:{
            lineStyle:{
                color:‘#FFF‘
            }
        },
        splitLine:{
            show:true,
            lineStyle:{
                type:‘dotted‘
            }
        }
    },
    series: [
        {
            name:‘频率‘,
            type:‘line‘,
            symbol:‘circle‘,
            itemStyle:{
                normal:{
                    color:‘#00FF00‘
                }
            },
            data:[],
            markPoint: {
                symbolSize:1,
                data: [
                    {type: ‘max‘, name: ‘最大值‘,itemStyle:{normal:{color:‘#00FF00‘}}},
                    {type: ‘min‘, name: ‘最小值‘,itemStyle:{normal:{color:‘#00FF00‘}}}
                ],
                label:{normal:{textStyle:{color:‘#00ff00‘,fontSize:25}}}
            },
            lineStyle:{
                normal:{
                    color:‘#00FF00‘,
                    width:3
                }
            },
            markLine: {
                lineStyle:{
                    normal:{
                        type:‘solid‘,
                        width:2
                    }
                },
                data: [
                    {type: ‘average‘, name: ‘平均值‘,itemStyle:{normal:{color:‘#FFFFFF‘}}}
                ],
                label:{normal:{textStyle:{color:‘#FFF‘,fontSize:20}}}
            }
        },
        {
            name:‘最大值‘,
            type:‘line‘,
            symbol:‘circle‘,
            symbolSize:1,
            itemStyle:{
                normal:{
                    color:‘red‘
                }
            },
            lineStyle:{normal:{width:2}},
            data:[51, 51, 51, 51, 51, 51, 51,51,51,51,51,51,51,51, 51, 51, 51, 51, 51, 51,51,51,51,51,51,51],

        },
        {
            name:‘最小值‘,
            type:‘line‘,
            symbol:‘circle‘,
            symbolSize:1,
            itemStyle:{
                normal:{
                    color:‘red‘
                }
            },
            lineStyle:{normal:{width:2}},
            data:[49, 49, 49, 49, 49, 49, 49,49,49,49,49,49,49,49, 49, 49, 49, 49, 49, 49,49,49,49,49,49,49],

        }
    ]
};

var index=0;
setInterval(function () {
    if (index<=24) {
        option.series[0].data.push(Math.random().toFixed(2) * 2+49);
    } else {
        option.series[0].data=[];
        index=0;
    }
    index++;
    myChart.setOption(option, true);
},1000);

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echart学习</title>
</head>
<body>

 <p>------------------------</p>

  <div id="main2" style="height:400px"></div>   

<!--
     <script src="js/echarts-all.js" charset="utf-8"></script>-->
<script src="https://cdn.bootcss.com/echarts/3.8.5/echarts-en.common.js"></script>
<script type="text/javascript">

    var myChart22 = echarts.init(document.getElementById(‘main2‘));
  var option22 = {
    backgroundColor: ‘#2B2B2B‘,
    tooltip: {
        trigger: ‘axis‘
    },
    legend: {
        data: [‘频率‘],
        textStyle: {
            color: ‘#FFF‘,
            fontSize: 20
        }
    },
    xAxis: {
        type: ‘category‘,
        boundaryGap: false,
        splitLine: {
            show: true,
            lineStyle: {
                type: ‘dotted‘
            }
        },
        axisLabel: {
            textStyle: {
                color: ‘#FFF‘,
                fontSize: 20
            }
        },
        axisLine: {
            lineStyle: {
                color: ‘#FFF‘
            }
        },
        data: [‘00:00‘, ‘01:00‘, ‘02:00‘, ‘03:00‘, ‘04:00‘, ‘05:00‘, ‘06:00‘, ‘07:00‘, ‘08:00‘, ‘09:00‘, ‘10:00‘, ‘11:00‘, ‘12:00‘, ‘13:00‘, ‘14:00‘, ‘15:00‘, ‘16:00‘, ‘17:00‘, ‘18:00‘, ‘19:00‘, ‘20:00‘, ‘21:00‘, ‘22:00‘, ‘23:00‘, ‘23:59‘]
    },
    yAxis: {
        type: ‘value‘,
        axisLabel: {
            formatter: ‘{value} Hz‘,
            textStyle: {
                color: ‘#FFF‘,
                fontSize: 20
            }
        },
        min: 48.75,
        max: 51.25,
        axisLine: {
            lineStyle: {
                color: ‘#FFF‘
            }
        },
        splitLine: {
            show: true,
            lineStyle: {
                type: ‘dotted‘
            }
        }
    },
    series: [{
            name: ‘频率‘,
            type: ‘line‘,
            symbol: ‘circle‘,
            itemStyle: {
                normal: {
                    color: ‘#00FF00‘
                }
            },
            data: [],
            markPoint: {
                symbolSize: 1,
                data: [{
                        type: ‘max‘,
                        name: ‘最大值‘,
                        itemStyle: {
                            normal: {
                                color: ‘#00FF00‘
                            }
                        }
                    },
                    {
                        type: ‘min‘,
                        name: ‘最小值‘,
                        itemStyle: {
                            normal: {
                                color: ‘#00FF00‘
                            }
                        }
                    }
                ],
                label: {
                    normal: {
                        textStyle: {
                            color: ‘#00ff00‘,
                            fontSize: 25
                        }
                    }
                }
            },
            lineStyle: {
                normal: {
                    color: ‘#00FF00‘,
                    width: 3
                }
            },
            markLine: {
                lineStyle: {
                    normal: {
                        type: ‘solid‘,
                        width: 2
                    }
                },
                data: [{
                    type: ‘average‘,
                    name: ‘平均值‘,
                    itemStyle: {
                        normal: {
                            color: ‘#FFFFFF‘
                        }
                    }
                }],
                label: {
                    normal: {
                        textStyle: {
                            color: ‘#FFF‘,
                            fontSize: 20
                        }
                    }
                }
            }
        },
        {
            name: ‘最大值‘,
            type: ‘line‘,
            symbol: ‘circle‘,
            symbolSize: 1,
            itemStyle: {
                normal: {
                    color: ‘red‘
                }
            },
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            data: [51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51, 51],

        },
        {
            name: ‘最小值‘,
            type: ‘line‘,
            symbol: ‘circle‘,
            symbolSize: 1,
            itemStyle: {
                normal: {
                    color: ‘red‘
                }
            },
            lineStyle: {
                normal: {
                    width: 2
                }
            },
            data: [49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49, 49],

        }
    ]
};

var index22 = 0;
setInterval(function() {
    if (index22 <= 24) {
        option22.series[0].data.push(Math.random().toFixed(2) * 2 + 49);
    } else {
        option22.series[0].data = [];
        index22 = 0;
    }
    index22++;
    myChart22.setOption(option22, true);
}, 1000);

 </script>
</body>
</html>

彩虹效果

app.title = ‘随便玩玩儿,嘻嘻‘;

var red = ‘#F00‘;
var orange = ‘#F60‘;
var yellow = ‘#FF0‘;
var green = ‘#0C0‘;
var cyan = ‘#17D4DE‘;
var blue = ‘#2616D9‘;
var purple = ‘#B013DC‘;
var white = ‘#EFEFEF‘;
var sky = ‘#88FFFF‘;
var brown = ‘#D2691E‘;

var duration = 5000;

option = {
    title: {
        text: ‘彩虹‘,
        subtext: ‘作者: 断浪‘,
    },
    backgroundColor: ‘#88FFFF‘,
    series: [
        //红
        {
            type: ‘pie‘,
            animationDuration: duration,
            itemStyle: {
                color: function(data) {
                    return data.dataIndex == 1 ? sky : red;
                }
            },
            legendHoverLink: false, //是否联动高亮 defult:true
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            labelLine: {
                show: false
            },
            hoverOffset: 0, //高亮时的偏移区域 defult:10
            center: [‘50%‘, ‘70%‘],
            radius: [280, 250],
            startAngle: 180, //起始角度
            data: [{
                    name: ‘red‘,
                    value: 10
                },
                {
                    name: ‘land1‘,
                    value: 10
                }
            ]
        },
        //橙
        {
            type: ‘pie‘,
            animationDuration: duration,
            itemStyle: {
                color: function(data) {
                    return data.dataIndex == 1 ? sky : orange;
                }
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            labelLine: {
                show: false
            },
            legendHoverLink: false, //是否联动高亮 defult:true
            hoverOffset: 0, //高亮时的偏移区域 defult:10
            center: [‘50%‘, ‘70%‘],
            radius: [250, 220],
            startAngle: 180, //起始角度
            data: [{
                    name: ‘orange‘,
                    value: 10
                },
                {
                    name: ‘land2‘,
                    value: 10
                }
            ]
        },
        //黄
        {
            type: ‘pie‘,
            animationDuration: duration,
            itemStyle: {
                color: function(data) {
                    return data.dataIndex == 1 ? sky : yellow;
                }
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            labelLine: {
                show: false
            },
            legendHoverLink: false, //是否联动高亮 defult:true
            hoverOffset: 0, //高亮时的偏移区域 defult:10
            center: [‘50%‘, ‘70%‘],
            radius: [220, 190],
            startAngle: 180, //起始角度
            data: [{
                    name: ‘yellow‘,
                    value: 10
                },
                {
                    name: ‘land3‘,
                    value: 10
                }
            ]
        },
        //绿
        {
            type: ‘pie‘,
            animationDuration: duration,
            itemStyle: {
                color: function(data) {
                    return data.dataIndex == 1 ? sky : green;
                }
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            labelLine: {
                show: false
            },
            legendHoverLink: false, //是否联动高亮 defult:true
            hoverOffset: 0, //高亮时的偏移区域 defult:10
            center: [‘50%‘, ‘70%‘],
            radius: [190, 160],
            startAngle: 180, //起始角度
            data: [{
                    name: ‘green‘,
                    value: 10
                },
                {
                    name: ‘land4‘,
                    value: 10
                }
            ]
        },
        //青
        {
            type: ‘pie‘,
            animationDuration: duration,
            itemStyle: {
                color: function(data) {
                    return data.dataIndex == 1 ? sky : cyan;
                }
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            labelLine: {
                show: false
            },
            legendHoverLink: false, //是否联动高亮 defult:true
            hoverOffset: 0, //高亮时的偏移区域 defult:10
            center: [‘50%‘, ‘70%‘],
            radius: [160, 130],
            startAngle: 180, //起始角度
            data: [{
                    name: ‘green‘,
                    value: 10
                },
                {
                    name: ‘land5‘,
                    value: 10
                }
            ]
        },
        //蓝
        {
            type: ‘pie‘,
            animationDuration: duration,
            itemStyle: {
                color: function(data) {
                    return data.dataIndex == 1 ? sky : blue;
                }
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            labelLine: {
                show: false
            },
            legendHoverLink: false, //是否联动高亮 defult:true
            hoverOffset: 0, //高亮时的偏移区域 defult:10
            center: [‘50%‘, ‘70%‘],
            radius: [130, 100],
            startAngle: 180, //起始角度
            data: [{
                    name: ‘blue‘,
                    value: 10
                },
                {
                    name: ‘land6‘,
                    value: 10
                }
            ]
        },
        //紫
        {
            type: ‘pie‘,
            animationDuration: duration,
            itemStyle: {
                color: function(data) {
                    return data.dataIndex == 1 ? sky : purple;
                }
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            labelLine: {
                show: false
            },
            legendHoverLink: false, //是否联动高亮 defult:true
            hoverOffset: 0, //高亮时的偏移区域 defult:10
            center: [‘50%‘, ‘70%‘],
            radius: [100, 70],
            startAngle: 180, //起始角度
            data: [{
                    name: ‘purple‘,
                    value: 10
                },
                {
                    name: ‘land7‘,
                    value: 10
                }
            ]
        },
    ],
};

　　中间带图片参数

var giftImageUrl = "data:image/png;base64,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";
option = {
    backgroundColor: ‘#fff‘,
    tooltip: {
        trigger: ‘item‘,
        formatter: "{b} : {d}% <br/> {c}"
    },
    graphic: {
        elements: [{
            type: ‘image‘,
            style: {
                image: giftImageUrl,
                width: 130,
                height: 130
            },
            left: ‘center‘,
            top: ‘center‘
        }]
    },
    /*legend: {
        orient: ‘horizontal‘,
        icon: ‘circle‘,
        bottom: 20,
        x: ‘center‘,

        data: [‘金融‘, ‘房地产‘, ‘专业服务业‘, ‘批发和零售业‘, ‘其他‘]
    },*/
    series: [{
        type: ‘pie‘,
        radius: [‘35%‘, ‘50%‘],
        center: [‘50%‘, ‘50%‘],
        color: [‘#0E7CE2‘, ‘#FF8352‘, ‘#E271DE‘, ‘#F8456B‘, ‘#00FFFF‘, ‘#4AEAB0‘],
        data: [{
                value: 335,
                name: ‘金融‘
            },
            {
                value: 310,
                name: ‘房地产‘
            },
            {
                value: 234,
                name: ‘其他‘
            },
            {
                value: 235,
                name: ‘批发和\n零售业‘
            },
            {
                value: 254,
                name: ‘专业\n服务业‘
            }
        ],
        labelLine: {
            normal: {
                show: true,
                length: 20,
                length2: 20,
                lineStyle: {
                    color: ‘#12EABE‘,
                    width: 2
                }
            }
        },
        label: {
            normal: {
                formatter: ‘{c|{b}}\n{d|{d}%}‘,
                rich: {
                    b: {
                        fontSize: 16,
                        color: ‘#12EABE‘,
                        align: ‘left‘,
                        padding: 4
                    },
                    d: {
                        fontSize: 16,
                        align: ‘left‘,
                        padding: 2
                    },
                    c: {
                        color: ‘#333‘,
                        fontSize: 16,
                        align: ‘left‘,
                        padding: 2
                    }
                }
            }
        }
    }]
};

双曲螺线

var data = [];
for (var circle = 0; circle < 5; ++circle) {
    for (var i = 0; i <= 100; i++) {
        var theta = i / 100 * 360;
        var alpha = circle * 360 + theta;
        var r = Math.pow(Math.E, 0.003 * alpha);
        data.push([r, theta]);
    }
}

option = {
    title: {
        text: ‘双曲螺线‘
    },
    polar: {},
    tooltip: {
        trigger: ‘item‘
    },
    angleAxis: {
        type: ‘value‘,
        startAngle: 135,
        show: false
    },
    radiusAxis: {
        show: false,
        max: 225
    },
    series: [{
        coordinateSystem: ‘polar‘,
        name: ‘line‘,
        type: ‘line‘,
        data: data,
        symbolSize: 0,
        symbol: ‘circle‘,
        areaStyle: {
            normal: {
                color: new echarts.graphic.RadialGradient(0.64, 0.5, 1, [{
                    offset: 0.1,
                    color: ‘rgba(255, 0, 0, 0.5)‘
                }, {
                    offset: 1,
                    color: ‘rgba(255, 255, 0, 0)‘
                }], false)
            }
        },
        lineStyle: {
            normal: {
                color: ‘#C25353‘,
                width: 3
            }
        }
    }]
};

　　geo地图

var geoCoordMap = {
‘福州‘: [119.4543,25.9222],
‘太原‘: [112.3352,37.9413],
‘长春‘: [125.8154,44.2584],
‘重庆‘: [107.7539,30.1904],
‘西安‘: [109.1162,34.2004],
‘成都‘: [103.9526,30.7617],
‘常州‘: [119.4543,31.5582],
‘北京‘: [116.4551,40.2539],
‘北海‘: [109.314,21.6211],
‘海口‘: [110.3893,19.8516],
‘广州‘: [113.5107,23.2196]
};

var GZData = [
    [{name:‘广州‘},{name:‘福州‘,value:95}],
    [{name:‘广州‘},{name:‘太原‘,value:90}],
    [{name:‘广州‘},{name:‘长春‘,value:80}],
    [{name:‘广州‘},{name:‘重庆‘,value:70}],
    [{name:‘广州‘},{name:‘西安‘,value:60}],
    [{name:‘广州‘},{name:‘成都‘,value:50}],
    [{name:‘广州‘},{name:‘常州‘,value:40}],
    [{name:‘广州‘},{name:‘北京‘,value:30}],
    [{name:‘广州‘},{name:‘北海‘,value:20}],
    [{name:‘广州‘},{name:‘海口‘,value:10}]
];

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var fromCoord = geoCoordMap[dataItem[0].name];
        var toCoord = geoCoordMap[dataItem[1].name];
        if (fromCoord && toCoord) {
            res.push({
                fromName: dataItem[0].name,
                toName: dataItem[1].name,
                coords: [fromCoord, toCoord]
            });
        }
    }
    return res;
};

var color = [‘#46bee9‘];
var series = [];
[[‘广州‘, GZData]].forEach(function (item, i) {
    series.push(
    {
        name: item[0] + ‘ Top10‘,
        type: ‘lines‘,
        zlevel: 2,
        symbol: [‘none‘, ‘arrow‘],
        symbolSize: 10,
        effect: {
            show: true,
            period: 6,
            trailLength: 0,
            symbol: ‘arrow‘,
            symbolSize: 5
        },
        lineStyle: {
            normal: {
                color: color[i],
                width: 1,
                opacity: 0.6,
                curveness: 0.2
            }
        },
        data: convertData(item[1])
    },
    {
        name: item[0] + ‘ Top10‘,
        type: ‘effectScatter‘,
        coordinateSystem: ‘geo‘,
        zlevel: 2,
        rippleEffect: {
            brushType: ‘stroke‘
        },
        label: {
            normal: {
                show: true,
                position: ‘right‘,
                formatter: ‘{b}‘
            }
        },
        symbolSize: function (val) {
            return val[2] / 8;
        },
        itemStyle: {
            normal: {
                color: color[i]
            }
        },
        data: item[1].map(function (dataItem) {
            return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
            };
        })
    });
});

option = {
    backgroundColor: ‘#404a59‘,
    tooltip : {
        trigger: ‘item‘
    },
    geo: {
        map: ‘china‘,
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true,
        itemStyle: {
            normal: {
                areaColor: ‘#323c48‘,
                borderColor: ‘#404a59‘
            },
            emphasis: {
                areaColor: ‘#2a333d‘
            }
        }
    },
    series: series
};

玫瑰图

var data = [{
    value: 1,
    name: ‘华南城市1‘
}, {
    value: 2,
    name: ‘华南城市2‘
}, {
    value: 3,
    name: ‘华南城市3‘
}, {
    value: 4,
    name: ‘华南城市4‘
}, {
    value: 5,
    name: ‘华南城市5‘
}, {
    value: 6,
    name: ‘华南城市6‘
}, {
    value: 1,
    name: ‘华东城市1‘
}, {
    value: 2,
    name: ‘华东城市2‘
}, {
    value: 3,
    name: ‘华东城市3‘
}, {
    value: 4,
    name: ‘华东城市4‘
}, {
    value: 5,
    name: ‘华东城市5‘
}, {
    value: 6,
    name: ‘华东城市6‘
}, {
    value: 1,
    name: ‘华北城市1‘
}, {
    value: 2,
    name: ‘华北城市2‘
}, {
    value: 3,
    name: ‘华北城市3‘
}, {
    value: 4,
    name: ‘华北城市4‘
}, {
    value: 5,
    name: ‘华北城市5‘
}, {
    value: 6,
    name: ‘华北城市6‘
}, {
    value: 1,
    name: ‘华西城市1‘
}, {
    value: 2,
    name: ‘华西城市2‘
}, {
    value: 3,
    name: ‘华西城市3‘
}, {
    value: 4,
    name: ‘华西城市4‘
}, {
    value: 5,
    name: ‘华西城市5‘
}, {
    value: 6,
    name: ‘华西城市6‘
}, {
    value: 1,
    name: ‘东北城市1‘
}, {
    value: 2,
    name: ‘东北城市2‘
}, {
    value: 3,
    name: ‘东北城市3‘
}, {
    value: 4,
    name: ‘东北城市4‘
}, {
    value: 5,
    name: ‘东北城市5‘
}, {
    value: 6,
    name: ‘东北城市6‘
}]
var labelData = [{
    value: 6,
    name: ‘华南‘
}, {
    value: 6,
    name: ‘华东‘
}, {
    value: 6,
    name: ‘华北‘
}, {
    value: 6,
    name: ‘华西‘
}, {
    value: 6,
    name: ‘东北‘
}];

option = {
     backgroundColor: ‘#0C2A40‘,
    title: {
        text: ‘我是标题‘,
        left: ‘1%‘,
        top: ‘1%‘,
         textStyle:{
                color:"#FFF",
                fontSize:"12"
            }
    },
    tooltip: {
            trigger: ‘item‘,

        },
    color: ["#FC0300", "#FC0303", "#FC0A0A", "#FC1A1A", "#FC3131", "#FC4B4B",
        "#19B7CF", "#2CB9CE", "#34BCD1", "#3BBFD1", "#48BFD1", "#58C1D1",
        "#CA8622", "#C98B2E", "#C9903B", "#CB9848", "#C99D5A", "#CBA567",
        "#2F4554", "#314652", "#344852", "#394852", "#3E4D55", "#404D55",
        "#91C7AE", "#98C6B2", "#9DC9B7", "#AAC6B9", "#B4C6BF", "#BCC9C4",

    ],

    series: [{
        type: ‘pie‘,
        data: data,
        roseType: ‘area‘,
        itemStyle: {
            normal: {

                // borderColor: ‘#22C3AA‘
            }
        },
        label: {
            normal: {
                position: ‘inside‘
            }
        }

    }, {
        type: ‘pie‘,
        data: labelData,
        radius: [‘88%‘, ‘100%‘],
        zlevel: -2,
        itemStyle: {
            normal: {
                color: ‘#152E43‘,
                borderColor: ‘#0F5FA0‘
            }
        },
        label: {
            normal: {
                position: ‘inside‘
            }
        }
    }]
};

原文地址：https://www.cnblogs.com/surfaces/p/9849012.html

时间： 2024-11-12 04:14:56

echart 打开新世界的大门的相关文章

没玩过DApp？现在就打开新世界的大门！

什么是DApp?DApp实际上就是在App前面加了个D,而这个D代表的是decentralize,也就是去中心化.DApp就是建立在区块链技术上的App. DApp的最大特点就是,由于区块链不可篡改不可造假的特性,你在DApp上所产生的价值都是属于自己的,而不是仅仅给APP开发商带来了流量. 不可造假的DApp 比如一款叫做稳拿宝的DApp,用户可以在上面进行投资,年收益高达18%,而借款方则需要提供数字货币作为抵押,这类抵押物不可篡改不可造假,真实性非常有保障.如果出现借款方违约或者抵押物价值

她每天吃一个煮熟的苹果，从此打开了通往新世界的大门~

她每天吃一个煮熟的苹果,从此打开了通往新世界的大门~ 2017-05-06小金豆郑州微公交通常人们吃苹果都是洗干净削皮生吃大家有没有想过将苹果煮熟以后再吃呢? 小编的一位朋友她特别乐于研究厨房里的事情前几天,她煮了一碗苹果拿给小编一开始,我是拒绝的! 但吃了第一口之后根本停不下来! 其实,煮苹果除了好吃还有很多意想不到的功效 ▼ 营养价值最大化加热后的苹果,会最大化的软化膳食纤维,从而更容易被人体吸收.不用担心煮熟后维C会被破坏掉,苹果中仅有4mg,完全可以从其他的渠道来填补

公益教育正在为共享教育打开一扇大门？

从工业革命开始到如今的互联网科技时代,各国间激烈的经济和科技竞争归根到底都是教育.人才的竞争.虽然"百年大计,教育为本"一直都是我国的基本国策,但今年我国对教育事业的要求又更上一层,从"加强基础教育建设"上升到了 "公平优质教育"的阶段. 其实,重视公平优质教育早有迹可循,中国过去30年依赖人口红利的时代已经过去了,从2011年开始,我们国家的体力劳动力占人口的比例就开始大幅度下降.因此,我国也逐渐开始了从人口红利向人才红利转变的发展战略计划.&

打开新世界的第一步：学习servlet

什么是servlet? 是用Java编写的服务器端程序.其主要功能在于交互式地浏览和修改数据,生成动态Web内容. 创建servlet 一.创建一个web project 1)流程:eclipse-File-New-Other-Web-Denamic Web Project-Next(参考附图) 2)输入项目名称project name.Target runtime.Configuration,完成后点击Next.如果没有集成Tomcat,请先配置. 3)此页面不需要修改和填写内容,直接点击Ne

VR360全景校园打开智慧生活大门

VR全景目前在国内非常火热,同样的在各个行业中,VR全景都有所应用,今天酷雷曼小编就和各位分享一下,VR全景在校园中的应用是怎样的.VR全景让教育.教学都发生了变革,提升了教学质量,互联网技术与VR全景技术的完美融合使教育不再单纯的依靠传统模式. 目前无论是高校学生还是中学生等大都是通过互联网和新媒体获取信息,在网络或者社交分享平台上面了解自己或者想要报考的院校信息,VR全景技术可以让学生们通过VR全景技术进行远程实景现场浏览,这样一来,学校的特色.风采.历史.重点学科展示等信息展现的更加全面.

带你打开-接口测试的大门

你是否有这样的疑虑? 1.到底什么是接口,接口长什么样? 2.什么情况下进行接口测试? 3.接口文档到底是什么? 4.测试接口的正确姿势是什么? 什么情况下展开接口测试? 1.项目处于开发阶段,前后端联调接口是否请求成功 2.有接口文档,开发已完成联调,功能测试展开之前 3.专项测试:如测流量大小.查看图片压缩大小.测试接口请求响应时间 4.版本上线前,进入整体回归测试,查看接口是否有异常 5.版本功能文档后,接口自动化什么是接口? 计算机中包括硬件接口和软件接口.电脑等信息机器硬件组件间的接

关于这两年

2015.06-2015.10 非计算机专业非211毕业生,毕业那年,人生迷茫,觉得自己什么都不会,也没有什么特别想做的,哪家公司肯要我就去哪的状态,就这样稀里糊涂进了一家公司,做测试工程师,一直在做黑盒测试(是那种上级写好测试用例,执行就可的那种),做了差不多四个月,受不了,太不符合自己的性格了,毫无激情,毫无成就,为什么我要在这边给人找bug,还不如我自己改.就这样给我哥打电话,想辞职,想走后门去写程序.10月份辞职,11月去北京,开始了第二份工作. 2015.11-2017.3 走了后门进

于三款常用软件的分析

软件有很多种,如工具类软件.游戏类软件.系统类软件,它们的运行方式也各种各样,如以单机方式运行.以网站方式运行或者以APP方式运行在手机端等,请选取三种软件,分析它们各自的特点. 这些软件的开发者是怎么说服你(陌生人)成为他们的用户的?他们的目标都是盈利么?他们的目标都是赚取用户的现金么?还是别的? 这些软件是如何到你手里的(邮购,下载,互相拷贝……) 这些软件是如何处理Bug 的?又是如何更新新版本的? 同一类型的软件之间是如何竞争的? 这一类软件的发展趋势如何? 列举你在使用上述软件时观察到

电音中DJ/Producer/MC/EDM/Remix/Mix的名词解释（转）

DJ DJ是Disc Jockey的缩写,是电音圈子里的一种热门职业,一般大家在夜店或者酒吧看到的站在台上甩着膀子拧着按钮或者使劲儿搓碟的就是DJ啦. DJ的主要工作一般就是在现场用打碟机和混音台把许多适合气氛的歌曲进行剪接混音,这一过程,俗称打碟.一个好的DJ能将这一工作做的天衣无缝.DJ有一项打碟技术叫Scratch,俗称搓碟/盘,是不是很常听见?听上去特别土嗨,不过搓碟是一种用手控制碟片快进/慢放的很实用的技术. DJ里面,要是说自己是DMC DJ显得比较有分量.DMC这个缩写挺常见的,问