數據可視化插件 echart

本文轉載自查看原文 2017-06-20 19:29 1326 javascript

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script src="echarts.js"></script>
</head>

<body>
<div id="main" style="width: 600px;height:400px;float:left"></div>

<div id="main2" style="width: 600px;height:400px;float:left"></div>

<div id="main3" style="width: 600px;height:400px;float:left"></div>

<script>
 var myChart = echarts.init(document.getElementById('main'));
 var myChart2 = echarts.init(document.getElementById('main2'));
 var myChart3 = echarts.init(document.getElementById('main3'));

option2 = {
    tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
    },
    toolbox: {
        feature: {
            restore: {},
            saveAsImage: {}
        }
    },
    series: [
        {
            name: '業務指標',
            type: 'gauge',
            detail: {formatter:'{value}%'},
            data: [{value: 50, name: '完成率'}]
        }
    ]
};

var option3 = {
            title: {
                text: '網站情況'
            },
            tooltip: {},
            legend: {
                data:['銷量','銷量2','銷量3'],
                orient:'horizontal',
                right:0,
                itemWidth:10
            },
            xAxis: {
               name:'類型',
               nameLocation:'middle',
               data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"],
               nameTextStyle:{
                  
                   fontSize:18
                   
                   
                   
                   },
                   nameGap:30,
                axisLine:{
                    lineStyle:{
                        color:'#f00',
                        width:1,
                        
                    
                    },
                
                
                },
            },
            
            
            
            
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            },
            {
                name: '銷量2',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            },
            {
                name: '銷量3',
                type: 'bar',
                data: [5, 80, 36, 10, 10, 20]
            }
            ]
        };
        
var option= {
    title: {
                text: '網站情況'
            },
    series:[]
    
}

function my(){
var my = {series : [
        {
            name: '訪問來源',
            type: 'pie',
            radius: '80%',
            data:[
                {value:Math.random()*500, name:'1000元以下'},
                {value:Math.random()*500, name:'1001-2000元'},
                {value:Math.random()*500, name:'2001-5000元'},
                {value:Math.random()*500, name:'5001-10000元'},
                {value:Math.random()*500, name:'10000+元'}
            ]
        }
    ]
}
return my;
}
    myChart.showLoading();
    myChart.setOption(option, true);
    setInterval(function(){
            myChart.hideLoading();                 
             myChart.setOption(my());},1000
                        
    )
    
    
    myChart2.setOption(option2, true);
    

    
/*    myChart3.showLoading( {type:'default',
  text:'正在加載',
  color:'#666',
  textColor:'#000',
  maskColor:'rgba(255, 255, 255, 0.8)',
  zlevel:1
});    */    
    myChart3.setOption(option3, true);



</script>

</body>
</html>

插件下載地址：echart

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 前端數據可視化插件（一）圖表前端數據可視化插件-圖表前端數據可視化插件（三）地圖 vue3.0+echart可視化 Echart - 最好最強大效果最豐富的可視化圖表插件數據可視化：Echart中k圖實現動態閾值報警及實時更新數據 Python數據可視化：可視化數據分析插件D-Tale 數據可視化-EChart2.0.0使用中遇到的2個問題數據可視化（二）百度數據可視化圖表套件echart實戰