鼠标点击事件以及ECharts事件
下面是几种事件的方法：
结合上面的事件，下面的代码中有详解用法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>echartslnstance对象常用方法</title>
<script src="./lab/echarts.min.js"></script>
<script src="./lab/jquery.min.js"></script>
</head>
<body>
<div style="width:600px; height:500px;"></div>
<button id="btn1">触发行为</button>
<button id="btn2">clear</button>
<button id="btn3">setOption</button>
<button id="btn4">dispose</button>
<script>
var mCharts = echarts.init(document.querySelector('div'));
//创建饼图数据 数组 数组中包含多个对象
var pieData = [
{name:'淘宝',value:11231},
{name:'京东',value:22673},
{name:'唯品会',value:6123},
{name:'1号店',value:8989},
{name:'聚美优品',value:6700},
]
var option ={
legend:{
data:['淘宝','京东','唯品会','1号店','聚美优品']//会在表的上方显示各个部分 更好的对表的筛选
},
series:[ //由于饼图没有x与y轴 所以在这里只需要写series即可
{
type:'pie',
data:pieData,
}
]
}
mCharts.setOption(option)
mCharts.on('click',function(arg){ //鼠标事件 对事件的监听 内含点击事件click,dblclick,mousedown,mousemove,mouseup
console.log(arg) //有on自然还有off解绑事件
console.log('点击了...')
})
mCharts.off('click')//解绑事件 再次点击已经失效
mCharts.on('legendselectchanged',function(arg){ //点击上方独立的legend筛选部分会显示出剩余的内容信息
console.log(arg) //可得点击后就为false类似于开关
console.log('legendselectchanged')
})
//jquery获取数据的写法 对整体部分的设置
// $("#btn1").click(function(){
// 模拟用户的行为
// mCharts.dispatchAction({
// type:'highlight',//通过点击后可以使得饼图产生高亮的效果同时也会让饼图放大些
//
// })
// })
//jquery获取数据的写法 对个体设置
$("#btn1").click(function(){
// 模拟用户的行为
mCharts.dispatchAction({
type:'highlight',//通过点击后可以使得饼图产生高亮的效果同时也会让饼图放大些
seriesIndex:0,//第几个图表 控制系列的索引
dataIndex:1,//数据的指引 该图表中的第几个数据 这里的1是下标为1
})
mCharts.dispatchAction({ //触发提示框 该案例未加 可以添加后使用
type:'showTip',
seriesIndex:0,
dataIndex:2,
})
})
//清空实例
$("#btn2").click(function(){
//清空图标的实例
mCharts.clear()
})
//结合上面的情况实例 再次点击该按钮就会再次显示
$("#btn3").click(function(){
mCharts.setOption(option) //重新显示数据
})
$("#btn3").click(function(){
//销毁mCharts 这里如果点击了 再次使用setOption也不管用了
mCharts.dispose()
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内置主题的使用</title>
<script src="./lab/echarts.min.js"></script>
<!-- 引入主题调色盘 在官方中找到下载，内部就有主题下载 填写好主题名称，根据样式需求调整一下即可下载 -->
</head>
<body>
<div style="width:700px;height:500px;"></div>
<script>
//init方法有两个参数 ，第一个参数代表是一个dom节点，第二个参数，代表你需要使用哪一套主题
//默认内置两套主题，light,dark
//自定义在线编辑主题编辑网址：https://www.echartsjs.com/theme-builder/
var mCharts = echarts.init(document.querySelector('div'),'dark'); //dark背景色变为黑色 light柱状图的颜色为蓝色
var xdata = ['小明','小红','小王','小李','田思思','王五','赵六','张三','李四','孙林','阿婷']
var ydata = [70,92,87,67,89,90,45,89,70,90,100]
var option = {
xAxis:{
type:'category',//类目轴
data:xdata,
},
yAxis:{
type:'value'//数值轴 设置了value就不需要设置data值了
},
series:{
name:'语文',
type:'bar',//柱状图 pie 饼图 line折线图 这里是图表的类型
data:ydata,
label:{
show:true, //显示出每一个人的成绩信息
rotate:60, //将成绩以60度方向旋转
position:'inside',//每个人的数值显示
},
},
tooltip:{
trigger:'axis', //坐标轴，在坐标轴上就显示
}
}
mCharts.setOption(option)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>全局ECharts对象的常用方法</title>
<script src="./lab/echarts.min.js"></script>
<!-- 在使用地图时，需要引入jquery才可以 否则就会报错 -->
<script src="./lab/jquery.min.js"></script>
</head>
<body>
<div style="width:600px;height:500px;border:1px solid red;"></div>
<div style="width:600px;height:500px;border:1px solid green;" id="div1"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'));
var xdata = ['小明','小红','小王','小李','田思思','王五','赵六','张三','李四','孙林','阿婷']
var ydata = [70,92,87,67,89,90,45,89,70,90,100]
var option={
xAxis:{
type:'category',//类目轴
data:xdata,
},
yAxis:{
type:'value'//数值轴 设置了value就不需要设置data值了
},
series:{
type:'bar',//柱状图 pie 饼图 line折线图 这里是图表的类型
data:ydata,
markPoint:{
data:[
{
type:'max',name:'最大值'
},
{
type:'min',name:'最小值'
}
]
},
}
}
mCharts.setOption(option)
var mCharts2 = echarts.init(document.querySelector('#div1'));
$.get('./json/map/china.json',function(ret){
console.log(ret)
echarts.registerMap('aa',ret)
var option2={
geo:{
type:'map',
map:'aa'
}
}
mCharts2.setOption(option2)
// 将两个表关联起来
echarts.connect([mCharts,mCharts2])//将柱状图和地图关联在一起 使用该代码后 在下载该表时就会将两个表关联在一起
//下载在foolbox中设置
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图标自适应的表现</title>
<script src="./lab/echarts.min.js"></script>
</head>
<body>
<div style="width:100%;height:500px;"></div>
<script>
//自定义在线编辑主题编辑网址：https://www.echartsjs.com/theme-builder/
var mCharts = echarts.init(document.querySelector('div'));
var xdata = ['小明','小红','小王','小李','田思思','王五','赵六','张三','李四','孙林','阿婷']
var ydata = [70,92,87,67,89,90,45,89,70,90,100]
var option = {
xAxis:{
type:'category',//类目轴
data:xdata,
},
yAxis:{
type:'value'//数值轴 设置了value就不需要设置data值了
},
series:{
name:'语文',
type:'bar',//柱状图 pie 饼图 line折线图 这里是图表的类型
data:ydata,
label:{
show:true, //显示出每一个人的成绩信息
rotate:60, //将成绩以60度方向旋转
position:'inside',//每个人的数值显示
}
}
}
mCharts.setOption(option)
//监听window窗口的大小变化的事件
//第一种写法
// window.οnresize=function(){
// console.log('111')
// 调用echarts实例对象的resize方法
// mCharts.resize()
// }
//第二种写法 window.onresize执行时直接将mCharts.resize传给它 切记不能加()
window.onresize = mCharts.resize
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色渐变的使用</title>
<script src="./lab/echarts.min.js"></script>
<!-- 引入主题调色盘 在官方中找到下载，内部就有主题下载 填写好主题名称，根据样式需求调整一下即可下载 -->
</head>
<body>
<div style="width:700px;height:500px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'));
var xdata = ['小明','小红','小王','小李','田思思','王五','赵六','张三','李四','孙林','阿婷']
var ydata = [70,92,87,67,89,90,45,89,70,90,100]
var option = {
xAxis:{
type:'category',//类目轴
data:xdata,
},
yAxis:{
type:'value'//数值轴 设置了value就不需要设置data值了
},
series:[
{
type:'bar',//柱状图 pie 饼图 line折线图 这里是图表的类型
data:ydata,
itemStyle:{
//线性渐变演示
// color:{
// type:'linear',//线性渐变类型
// x:0,//位置的设置0%
// y:0,//位置的设置0% 综上所述：颜色是从上到下的渐变
// x2:0,//位置的设置0%
// y2:1,//位置的设置100%
// colorStops:[
// {
// offset:0,color:'red' //0% 处的颜色为红色
// },
// {
// offset:1,color:'blue' //100% 处的颜色为蓝色
// }
// ]
// }
// 径向渐变的演示
color:{
type:'radial',//径向渐变类型
x:0.5,
y:0.5,
r:0.5,
colorStops:[
{
offset:0,color:'red',//0% 处的颜色为红色（中心出现一个圆点 红色）
},
{
offset:1,color:'blue'//100% 处的颜色为蓝色
}
]
}
}
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>不同城市显示不同颜色之与涟漪动画结合</title>
<script src="./lab/echarts.min.js"></script>
<script src="./lab/jquery.min.js"></script>
</head>
<body>
<div style="width:700px; height:500px;"></div>
<script>
//1,给series下增加一个新的对象
//2,准备数据散点数据 ，配置给series下的另一个对象
//3,配置series下的新对象的type值为effectScatter
//4,指明散点图的坐标系统未geo
//5,调整涟漪动画效果
var airData = [//空气质量的数据
{name:'北京',value:39.92},
{name:'天津',value:57.92},
{name:'上海',value:89.90},
{name:'重庆',value:90.0},
{name:'河北',value:68.56},
{name:'河南',value:67.23},
{name:'云南',value:34.34},
{name:'辽宁',value:16.92},
{name:'黑龙江',value:67.78},
{name:'湖南',value:54.78},
{name:'安徽',value:23.56},
{name:'山东',value:78.80},
{name:'新疆',value:56.78},
{name:'江苏',value:116},
{name:'浙江',value:89.35},
{name:'江西',value:35.80},
{name:'湖北',value:78.90},
{name:'广西',value:96.35},
{name:'甘肃',value:98.67},
{name:'山西',value:89.78},
{name:'内蒙古',value:56.78},
{name:'陕西',value:39.92},
{name:'吉林',value:89.67},
{name:'福建',value:56.87},
{name:'贵州',value:99.65},
{name:'广东',value:65.66},
{name:'青海',value:34.45},
{name:'西藏',value:34.56},
{name:'四川',value:114},
{name:'宁夏',value:55.78},
{name:'海南',value:67.35},
{name:'台湾',value:56.67},
{name:'香港',value:56.89},
{name:'澳门',value:67.78},
{name:'南海诸岛',value:56}
]
var scatter = [ //涟漪动画的数据
{
value:[117.283042,31.86119]
}
]
var mCharts = echarts.init(document.querySelector('div'));
//百度地图的api ‘./json/map/china.json’
$.get('./json/map/china.json',function(ret){
echarts.registerMap('chinaMap',ret)//第一个数值是别名 第二个数值是函数的 参数
var option ={ //必须要在注册好之后就执行 不能放在外层执行
geo:{
type:'map', //类型是地图map
map:'chinaMap',//数据 创建的别名与上面注册的别名一致
roam:true,//设置允许缩放及拖拽的效果
label:{
show:true,//显示省份的名称
}
},
series:[
{
type:'map',//类型：地图
data:airData,//获取数据
geoIndex:0,//将空气质量的数据和元素是第0个geo配置关联在一起
},
{
data:scatter,//配置散点的坐标数据
type:'effectScatter',//哪一种图标
coordinateSystem:'geo',//指明散点使用的坐标系统 geo的坐标系统 //即出现动画
rippleEffect:{ //设置涟漪动画是缩放比例10倍
scale:9
}
}
],
visualMap:{//给每个地区添加填充色
min:0,//空气质量最小值
max:200,//空气质量最大值
inRange:{
color:['white','red'],//根据每个城市的空气质量显示不同颜色 这里指的是从白色到红色之间的渐变
},
calculable:true,//筛选多少区间内的城市空气质量 渐变色 出现滑块的效果
},
}
mCharts.setOption(option)
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>调色盘的使用</title>
<script src="./lab/echarts.min.js"></script>
<!-- 引入主题调色盘 在官方中找到下载，内部就有主题下载，省略部分 -->
</head>
<body>
<div style="width:700px;height:500px;"></div>
<script>
var mCharts = echarts.init(document.querySelector('div'));
//创建饼图数据 数组 数组中包含多个对象
var pieData = [
{name:'淘宝',value:11231},
{name:'京东',value:22673},
{name:'唯品会',value:6123},
{name:'1号店',value:8989},
{name:'聚美优品',value:6700},
]
var option ={
//全局主题调色盘 会覆盖主题调色盘
color:['blue','pink','green','purple','skyblue',],
series:[ //由于饼图没有x与y轴 所以在这里只需要写series即可
{
type:'pie',
data:pieData,
//局部调色盘 会覆盖全局调色盘
color:['red','yellow','blue','purple','orange'],
}
]
}
mCharts.setOption(option)
</script>
</body>
</html>