一、视觉映射
注:visualMap 以前叫dataRange,如果你看到了比较老的教程或博客,里面有dataRange,要知道那就是视觉映射 visualMap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>视觉映射</title>
<style>
#main{
margin: 20px;
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
// 基于准备好的dom,初始化echarts实例
const myChart = echarts.init(document.getElementById('main'));
//数据源
const source = [
//x y z w
[2, 1, 10, 90],
[4, 2, 20, 80],
[6, 3, 30, 70],
[8, 4, 40, 60],
[10, 5, 50, 50],
[12, 6, 60, 40],
[14, 7, 70, 30],
[16, 8, 80, 20],
[18, 9, 90, 10],
];
//颜色范围
const color=['#70ad47', '#c00000'];
// 指定图表的配置项和数据
const option = {
tooltip: {},
/*绘图区*/
grid:{
left:100
},
/*x 轴*/
xAxis: {},
/*y 轴*/
yAxis: {},
/*数据集*/
dataset:{source},
/*
* visualMap 视觉映射 {}
* type 映射方式
* continuous 连续型
* piecewise 分段型
* min 映射区间的起始位置,如0
* max 映射区间的结束位置,如90
* range [] 显示此范围内的项目(在连续型中有效),百分百类型,如[0,100]
* calculable 是否显示拖拽用的手柄
* inRange 自定义映射范围
* color[] 颜色映射
* symbolSize[] 大小映射
*
* */
visualMap:{
type:'continuous',
// type:'piecewise',
min:0,
max:100,
range:[0,90],
calculable: true,
inRange:{
color,
symbolSize:[10,60],
},
// dimension:2,
dimension:3
},
/*系列列表*/
series: [
{
name: '视觉映射',
type: 'scatter',
encode:{
tooltip:[0,1,2]
}
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
二、事件
ECharts 如何监听事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件</title>
<style>
#main{
margin: 20px;
width: 700px;
height: 500px;
}
</style>
</head>
<body>
<!--建立dom 容器-->
<div id="main"></div>
<!--引入echarts-->
<script src="./js/echarts.min.js"></script>
<script>
// 基于准备好的dom,初始化echarts实例
const myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
const option = {
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
/*
* 使用on 方法绑定click点击事件
* */
myChart.on('click',function(param){
console.log(param)
})
</script>
</body>
</html>
鼠标事件有哪些
![](https://img-blog.csdnimg.cn/img_convert/e7b1f43cdf6c33f71652e6ad158de5c5.png)
组件交互事件的监听