<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<script>
function onAndroid(obj){
window.demo.jsClick(obj);
}
</script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="pie" style="height:200px"></div>
<div id="cpu" style="height:400px"></div>
<div id="oneminute" style="height:400px"></div>
<input id="test" type="button" value="test" onClick="onAndroid('我来了')"/>
<!-- ECharts单文件引入 -->
<script src="./js/echarts-all.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var pieChart = echarts.init(document.getElementById('pie'));
var cpuChart = echarts.init(document.getElementById('cpu'));
var oneMinuteChart = echarts.init(document.getElementById('oneminute'));
var cpuOption = {
title:{
text:"CPU走势图"
},
tooltip: {
show: true
},
toolbox: {
show : true,
padding: 30,
feature : {
restore : {show: true},
}
},
calculable : true,
grid:{
x:30,
x2:30
},
xAxis : [
{
boundaryGap : false,
type : 'category',
data : ["9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05"]
}
],
yAxis : [
{
min:1,
max:300,
type : 'value'
}
],
series : [
{
symbol: 'emptyCircle',
smooth:true,
name:"CPU走势",
type:"line",
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[5, 20, 40, 10, 10, 20,7,35,1,9]
}
]
};
var oneMinuteOption = {
title:{
text:"一分钟负载走势图"
},
tooltip: {
show: true
},
toolbox: {
show : true,
padding: 30,
feature : {
restore : {show: true},
}
},
calculable : true,
grid:{
x:30,
x2:30
},
xAxis : [
{
boundaryGap : false,
type : 'category',
data : ["9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05","9.05"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
symbol: 'emptyCircle',
smooth:true,
name:"一分钟负载走势",
type:"line",
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[5, 20, 40, 10, 10, 20,7,35,1,9]
}
]
};
var labelTop = {
normal : {
label:{
position:'inside',
formatter: '\n{b}',
textStyle: {
fontSize: 15,
baseline: 'top',
color: '#1e90ff'
}
},
labelLine:{show:false}
}
};
var labelBottom = {
normal : {
color: '#ccc',
label : {
formatter : function (params){
return 100 - params.value
},
show : true,
position : 'center',
textStyle: {
fontSize :20
}
},
labelLine : {
show : false
}
},
emphasis: {
color: 'rgba(0,0,0,0)'
}
};
var radius = [25, 35];
pieOption = {
title : {
text: '实时平均值',
x: 'left'
},
toolbox: {
show : true,
padding: 30,
feature : {
restore : {show: true},
}
},
series : [
{
startAngle: 90 + (46 / 100 * 360) / 2,
type : 'pie',
center : ['12%', '50%'],
radius : radius,
x: '0%', // for funnel
data : [
{name:'other', value:46, itemStyle : labelBottom},
{name:'CPU', value:54,itemStyle : labelTop}
]
},
{
startAngle:90 + (56 / 100 * 360) / 2,
type : 'pie',
center : ['37%', '50%'],
radius : radius,
x:'20%', // for funnel
data : [
{name:'other', value:56, itemStyle : labelBottom},
{name:'内存', value:44,itemStyle : labelTop}
]
},
{
startAngle:90 + (65 / 100 * 360) / 2,
type : 'pie',
center : ['62%', '50%'],
radius : radius,
x:'40%', // for funnel
data : [
{name:'other', value:65, itemStyle : labelBottom},
{name:'一分钟负载', value:35,itemStyle : labelTop}
]
},
{
startAngle:90 + (70 / 100 * 360) / 2,
type : 'pie',
center : ['87%', '50%'],
radius : radius,
x:'60%', // for funnel
data : [
{name:'other', value:70, itemStyle : labelBottom},
{name:'网络LO', value:30,itemStyle : labelTop}
]
},
]
};
cpuChart.setOption(cpuOption);
oneMinuteChart.setOption(oneMinuteOption);
pieChart.setOption(pieOption);
function androidFunction(option){
myChart.setOption(option);
}
</script>
</body>
Echarts饼状图和折线图
5星 · 超过95%的资源 需积分: 33 100 浏览量
2015-06-18
17:27:25
上传
评论
收藏 916KB ZIP 举报 
echarts_demo.zip （20个子文件） 
echarts_demo 
demo.html 6KB js 
.DS_Store 6KB echarts-all.js 2.03MB echarts.js 872KB chart line.js 37KB wordCloud.js 86KB scatter.js 72KB k.js 14KB bar.js 32KB gauge.js 23KB eventRiver.js 15KB treemap.js 24KB chord.js 50KB tree.js 25KB venn.js 26KB radar.js 37KB funnel.js 24KB pie.js 33KB force.js 63KB map.js 829KB资源评论
change43212015-06-24没有和后台关联啊
李进华2016-10-26学习了很多echarts的知识！- aqua1232016-03-24没有和后台关联啊
