今天给大家分享ECharts实现饼图选中区域跳转，首先先介绍一下Echarts。
1. ECharts介绍
ECharts是百度开源的一个基于JavaScript的可视化图表库，提供了直观、生动、可交互、可高度定制化的数据可视化图表展现能力，支持直线图、K线图、散点图、饼图、地图等多种图表类型。ECharts使得复杂的数据可视化变得简单易行，可广泛应用于各类数据展现领域，如BI、舆情分析、数据报表等。
2、ECharts优势介绍
● ECharts是一个强大的可视化图表库，具有以下优点：全面的图表类型支持：ECharts支持多种类型的图表，包括折线图、柱状图、饼图、散点图等，可以满足用户在数据可视化中的多种需求。
● 易于使用和定制：ECharts采用JavaScript编写，具有良好的文档和开发体验，并且有丰富的API可以用来自定义样式和行为。
● 可扩展性强：ECharts的内部结构非常灵活，可以通过插件和扩展来增加新的功能和定制化需求。
● 兼容性良好：ECharts能够在不同的浏览器和移动设备上良好地工作，并且支持多语言和多平台。
● 高性能：ECharts采用了现代化的渲染技术，能够应对高密度和大数据量的可视化需求，并呈现出良好的性能和效果。
3、ECharts事件绑定
ECharts图表可以通过on方法来监听用户对图表的行为，并且可以拿到操作的item参数进行业务逻辑处理比如（页面跳转、业务计算、提醒等）。
● 用户鼠标操作点击： 'click'、'dblclick'、'mousedown'、'mousemove'、'mouseup'、'mouseover'、'mouseout'、'globalout'、'contextmenu' 事件。
● 用户在使用可以交互的组件后触发的行为事件：在切换图例开关时触发的 'legendselectchanged' 事件），数据区域缩放时触发的 'datazoom' 事件等。示例如下：
代码语言：javascript复制myChart.on('click', function (params) {
// 在用户点击后控制台打印数据的名称
console.log(params);
});
myChart.on('legendselectchanged', function (params) {
console.log(params);
});4、 完整代码示例
代码复制后可以直接运行。
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echart饼图实战</title>
</head>
<body>
<div style="width:800px; border:2px solid blue">
<!-- 设定图表的div -->
<div id="main" style="height:400px"></div>
<span id="hover-console" style="color:#1e90ff"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/2.2.7/echarts-all.js"></script>
<script type="text/javascript">
var nowColor="";
// 初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
option = {
title : {
text: '技术博客市场占有率',
subtext: '测试数据',
x:'center'
},
// 设置提示框参数
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
// 设置图例参数
legend: {
orient : 'vertical',
x : 'left',
data:['CSDN','博客园','51CTO','掘金','简书']
},
// 工具栏组件配置
toolbox: {
show : true,
feature : {
saveAsImage : {show: true}
}
},
calculable : false, //是否支持拖拽
series : [
{
name:'访问来源',
type:'pie', //图表类型 pie 表示饼图
radius : '55%',
center: ['50%', '60%'],
data:[
{
value:1500,
name:'CSDN',
itemStyle: {
emphasis: {color: '#333'}
//emphasis 用来配置鼠标移上去 区块的颜色
}
},
{
value:1300,
name:'博客园',
itemStyle: {
emphasis: {color: '#666'}
}
},
{
value:750,
name:'51CTO',
itemStyle: {
emphasis: {color: '#999'}
}
},
{
value:390,
name:'掘金',
itemStyle: {
emphasis: {color: '#ggg'}
}
},
{
value:960,
name:'简书',
itemStyle: {
emphasis: {color: '#777'}
}
},
]
}
]
};
//为echarts对象加载配置项
myChart.setOption(option);
// url 数组顺序 ，可以拼接参数 注意顺序要和后台服务获取的顺序保持一致
var data_url=['https://blog.csdn.net/','https://www.cnblogs.com/','https://blog.51cto.com/','https://juejin.cn/','https://www.jianshu.com/'];
function urlGoToClick(param,i,txt,url){
// 这里可以对url进行参数拼接，根据实际的业务需要
if(param.seriesIndex==0&¶m.dataIndex==i){
window.open (url,'_blank','');
}
}
//增加监听事件
function echartListen(param) {
if (typeof param.seriesIndex != 'undefined') {
if (param.type == 'click') {
var peiLenght= option.legend.data.length;
for(var i=0;i<peiLenght;i ){
urlGoToClick(param,i,option.legend.data[i],data_url[i])
}
}else{
document.getElementById('hover-console').innerHTML = '事件选中的饼图区域是 : ' param.dataIndex;
}
}
}
// 给图表设置点击、鼠标覆盖等事件
myChart.on("click", echartListen);
myChart.on("hover", echartListen);
</script>
</body>
</html>
5、 工具栏组件参数详解
参考官方文档
代码语言：javascript复制toolbox={
show : true, //是否显示工具栏组件
orient:"horizontal", //工具栏 icon 的布局朝向'horizontal' 'vertical'
itemSize:15, //工具栏 icon 的大小
itemGap:10, //工具栏 icon 每项之间的间隔
showTitle:true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题
feature : {
mark : { // '辅助线开关'
show: true
},
dataView : {
//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
show: true, //是否显示该工具。
title:"数据视图",
readOnly: false, //是否不可编辑（只读）
lang: ['数据视图', '关闭', '刷新'],
//数据视图上有三个话术，默认是['数据视图', '关闭', '刷新']
backgroundColor:"#fff", //数据视图浮层背景色。
textareaColor:"#fff",//数据视图浮层文本输入区背景色
textareaBorderColor:"#333",
//数据视图浮层文本输入区边框颜色
textColor:"#000", //文本颜色。
buttonColor:"#c23531", //按钮颜色。
buttonTextColor:"#fff", //按钮文本颜色。
},
magicType: {
//动态类型切换
show: true,
title:"切换",//各个类型的标题文本，可以分别配置。
type: ['line', 'bar'],
//启用的动态类型，包括'line'（切换为折线图）, 'bar'（切换为柱状图）, 'stack'（切换为堆叠模式）, 'tiled'（切换为平铺模式）
},
restore : {//配置项还原。
show: true,//是否显示该工具。
title:"还原",
},
saveAsImage : { //保存为图片。
show: true, //是否显示该工具。
type:"png", //保存的图片格式。支持 'png' 和 'jpeg'。
name:"pic1",//保存的文件名称，默认使用 title.text 作为名称
backgroundColor:"#ffffff",
//保存的图片背景色，默认backgroundColor，不存在的话为白色
title:"保存为图片",
pixelRatio:1
//保存图片的分辨率比例，默认跟容器相同大小，可以设置为大于1的值
},
dataZoom :{ //数据区域缩放。目前只支持直角坐标系的缩放
show: true, //是否显示该工具。
title:"缩放", //缩放和还原的标题文本
xAxisIndex:0,
//指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴
yAxisIndex:false,
//指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴
},
},
zlevel:0,
//所属图形的Canvas分层，zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
z:2, //所属组件的z分层，z值小的图形会被z值大的图形覆盖
left:"center",//组件离容器左侧的距离,'left', 'center', 'right','20%'
top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'
right:"auto",//组件离容器右侧的距离,'20%'
bottom:"auto",//组件离容器下侧的距离,'20%'
width:"auto", //图例宽度
height:"auto", //图例高度
}
