echarts

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script src="js/echarts.js"></script>
<script>
/*var echarts = require('echarts');*/

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
option = {
title : {
text: '某站点用户访问来源', //标题
subtext: '纯属虚构', //副标题
x:'center', //标题水平位置
// y:'center' //标题垂直位置
textStyle:{ //主标题的样式
fontSize: 15,
fontWeight: '100',
color: '#fff'
},
subtextStyle: {
color: '#fff' // 副标题文字颜色
}
},
color:['red','blue','yellow','black'], //指定区域的颜色
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)" //鼠标移入时候的提示信息

//如：访问来源{a}
//直接访问{b}：335{c}(13.8{d}%)
},
legend: {
orient: 'vertical', //左上角的提示信息垂直显示
left: 'left', //左对齐 默认居中
data: ['已设置预警的传感器','未设置预警的传感器','已设置监测项','未设置监测项'] //需要显示的值
},
series : [
{
name: '访问来源', //{a}
type: 'pie',
radius : '55%', //饼图大小
center: ['50%', '60%'], //距离网页x轴和y轴的距离 圆心位置
data:[
{value:150, name:'已设置预警的传感器'}, //数据的值 name={b},value={c}
{value:240, name:'未设置预警的传感器'},
{value:200, name:'已设置监测项'},
{value:200, name:'未设置监测项'}
],
itemStyle: {
emphasis: {
shadowBlur: 10, //鼠标移入的时候阴影的范围
shadowOffsetX: 0, //相对于X轴的阴影的偏移量
shadowColor: 'rgba(0, 0, 0, 1)' //阴影的颜色
}
}
}
]
};

myChart.setOption(option)

posted @ 2017-03-30 11:30  曹小静  阅读(148)  评论(0)    收藏  举报