echart
<!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="asset/js/echarts.min.js"></script>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
</head>
<body>
<div style="width:1400px;height:900px;margin:auto;">
<div id="line" style="width: 100%;height:50%;background-color:gray;"></div>
<div id="main" style="width: 36%;height:50%;float:left;color:white"></div>
<div style="width: 64%;height:50%;float:right">
<div style="width:100%;height:10%;text-align:center">报警危险程度情况</div>
<div style="width: 33%;height:90%;float:left">
<div id="pie" style="width: 100%;height:67%;float:left"></div>
<div style="width:100%;height:33%;text-align:center;font-family:'Microsoft YaHei'">紧急报警</div>
</div>
<div style="width: 33%;height:90%;float:left">
<div id="pie1" style="width: 100%;height:67%;float:left"></div>
<div style="width:100%;height:33%;text-align:center;font-family:'Microsoft YaHei'">严重报警</div>
</div>
<div style="width: 33%;height:90%;float:left">
<div id="pie2" style="width: 100%;height:67%;float:left"></div>
<div style="width:100%;height:33%;text-align:center;font-family:'Microsoft YaHei'">普通报警</div>
</div>
</div>
</div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var array1 = ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"];
// 指定图表的配置项和数据
var option = {
title: {
text: '报警概况'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: array1
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on('click', function (params) {
alert(array1[params.dataIndex]);
});
</script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('pie'));
//var array = ['直达', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他'];
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
//data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
},
series: [
{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
//show:false
position: 'inside'
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 12, name: '12' },
]
},
{
name: '访问来源',
type: 'pie',
radius: ['30%', '55%'],
label: {
normal: {
show:false
//position: 'inside'
}
},
data: [
{ value: 12, name: '紧急报警' },
{ value: 88, name: '' },
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//myChart.on('click', function (params) {
// alert(array[params.dataIndex]);
//});
</script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('pie1'));
//var array = ['直达', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他'];
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
//data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
},
series: [
{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
position: 'inner',
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 12, name: '56' },
]
},
{
name: '访问来源',
type: 'pie',
radius: ['30%', '55%'],
label: {
normal: {
show: false
//position: 'inside'
}
},
data: [
{ value: 55, name: '严重报警' },
{ value: 45, name: '' },
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//myChart.on('click', function (params) {
// alert(array[params.dataIndex]);
//});
</script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('pie2'));
//var array = ['直达', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他'];
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
//data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
},
series: [
{
name: '访问来源',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
normal: {
position: 'inner'
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 12, name: '35' },
]
},
{
name: '访问来源',
type: 'pie',
radius: ['30%', '55%'],
label: {
normal: {
show: false
//position: 'inside'
}
},
data: [
{ value: 34, name: '普通报警' },
{ value: 66, name: '' },
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//myChart.on('click', function (params) {
// alert(array[params.dataIndex]);
//});
</script>
<script type="text/javascript">
// 路径配置
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
],
function (ec) {
// 基于准备好的dom，初始化echarts图表
var myChart = ec.init(document.getElementById('line'));
var option = {
title: {
text: '当日报警记录',
//subtext: '纯属虚构'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['最多报警记录', '最少报警记录']
},
toolbox: {
show: true,
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
calculable: true,
xAxis: [
{
type: 'category',
boundaryGap: false,
data: ['2:00', '4:00', '6:00', '8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
}
],
yAxis: [
{
type: 'value',
axisLabel: {
formatter: '{value}'
}
}
],
series: [
{
name: '最高记录',
type: 'line',
data: [25, 35, 9, 45, 100, 30, 40, 52, 63, 49, 95, 66, 52],
markPoint: {
data: [
{ type: 'max', name: '最大值' },
{ type: 'min', name: '最小值' }
]
},
markLine: {
data: [
{ type: 'average', name: '平均值' }
]
}
},
//{
// name: '最低气温',
// type: 'line',
// data: [1, -2, 2, 5, 3, 2, 0],
// markPoint: {
// data: [
// { name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }
// ]
// },
// markLine: {
// data: [
// { type: 'average', name: '平均值' }
// ]
// }
//}
]
};
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
</html>
浙公网安备 33010602011771号