数据可视化插件 echart
http://echarts.baidu.com/ 官网
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}
{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