<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--为ECharts准备一个具备大小(宽高)的Dom-->
<div id="main" style="height:400px;"></div>
<!--ECharts单文件引入-->
<script src="echarts-all.js"></script>
<script type="text/javascript">
//基于准备好的dom,初始化echarts图表
var myChart=echarts.init(document.getElementById(‘main‘));
//图表使用
var option = {
tooltip : {//提示框,鼠标悬浮交互时的信息提示
trigger: ‘item‘,//触发类型,默认数据触发,可选为:‘axis‘
formatter: "{a} <br/>{b} : {c} ({d}%)"//提示框的提示内容格式
},
legend: {//图例,每个图表最多仅有一个图例
orient : ‘vertical‘,//布局方式,默认为水平布局,可选为:‘horizontal‘|‘vertical‘
x : ‘left‘,//水平安放位置,默认为全图居中,可选为:‘center‘|‘left‘|‘right‘|{number}(x坐标,单位px)
data:[‘直接访问‘,‘邮件营销‘,‘联盟广告‘,‘视频广告‘,‘搜索引擎‘]//图例内容数组,数组项通常为{string},每一项代表一个系列的name，默认布局到达边缘会自动分行(列),传入空字符串‘‘可实现手动分行(列)
},
toolbox: {//工具箱,每个图表最多仅有一个工具箱
show : true,//显示策略,默认只是false.可选为:true显示|false隐藏
feature : {//启用功能,目前支持feature，工具箱自定义功能回调处理.
mark : {show: true},//辅助线标志,此处启用.
dataView : {//打开数据视图，可设置更多属性
show: true,
readOnly: false//readOnly默认数据视图为只读,可指定readOnly为false打开编辑功能
},
magicType : {//动态类型切换,支持直角系下的折线图,柱状图,堆积,平铺转换
show: true,
type: [‘pie‘, ‘funnel‘],//饼图,漏斗图
option: {//图表选项,包含图表实例任何可配置选项:公共选项,组件选项,数据选项
funnel: {//漏斗图配置
x: ‘25%‘,
width: ‘50%‘,
funnelAlign: ‘center‘,
max: 1548
}
}
},
restore : {show: true},//还原,复位原始图表
saveAsImage : {show: true}//保存图片IE8-不支持,上图icon最右,可设置更多属性.
}
},
calculable : true,//是否启用拖拽重计算特性,默认关闭
series : [//驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据
{
name:‘访问来源‘,//系列名称
type:‘pie‘,//图表类型,折线图line,散点图scatter,柱状图bar,饼图pie,雷达图radar
radius : [‘50%‘, ‘70%‘],//半径,支持绝对值px和百分比,百分比计算比,min(width, height)/2*75%,传数组实现环形图,[内半径,外半径]
itemStyle : {//图形样式,可设置图表内图形的默认样式和强调样式（悬浮时样式）
normal : {//默认样式
label : {
show : false
},
labelLine : {
show : false
}
},
emphasis : {//强调样式
label : {
show : true,
position : ‘center‘,//标签显示位置,地图标签不可指定位置
textStyle : {
fontSize : ‘30‘,
fontWeight : ‘bold‘
}
}
}
},
data:[
{value:335, name:‘直接访问‘},
{value:310, name:‘邮件营销‘},
{value:234, name:‘联盟广告‘},
{value:135, name:‘视频广告‘},
{value:1548, name:‘搜索引擎‘}
]
}
]
};
//为echats对象加载数据
myChart.setOption(option);
</script>
</body>
</html>
时间： 2024-10-30 16:51:58