散点图的常见效果
散点图的常见效果:
气泡图效果:
散点的大小不同(symbolSize)
散点的颜色不同(itemStyle中的color)
涟漪动画效果:
type: "effectScatter", // 具有涟漪动画的散点图
showEffectOn: 'emphasis', // render每个散点渲染完成都有涟漪动画的效果;emphasis当散点被鼠标移出才展示涟漪动画
// 控制涟漪动画的范围
rippleEffect: {
scale: 10
},
散点图在项目中可能会结合地图进行相关地区的标注
<div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> // 讲data这个数组中的身高体重取出来,变成一个二维数组 var data = [{ 'gender': "fenale", "height": 162.3, "weight": 51.9 }, { 'gender': "fenale", "height": 156.9, "weight": 55.9 }....] var axisData = [] for (var i = 0; i < data.length; i++) { var height = data[i].height var weight = data[i].weight var newArr = [height, weight] axisData.push(newArr) } var myChart = echarts.init(document.getElementById('main')); var option = { xAxis: { type: 'value', scale: true // 摆脱0值比例 }, yAxis: { type: 'value', scale: true // 摆脱0值比例 }, series: [{ // type: 'scatter', // 散点图 type: "effectScatter", // 具有涟漪动画的散点图 showEffectOn: 'emphasis', // render每个散点渲染完成都有涟漪动画的效果;emphasis当散点被鼠标移出才展示涟漪动画 // 控制涟漪动画的范围 rippleEffect: { scale: 10 }, data: axisData, // 控制散点大小和颜色 // symbolSize:20, // 让不同散点大小不一样 // arg包含了当前散点所具备的数据 symbolSize: function (arg) { var height = arg[0] / 100 var weight = arg[1] // bmi = 体重kg/(身高m*身高)> 28 散点大一些,<28散点小一些 var bmi = weight / (height * height) if (bmi > 28) { return 20 } return 5 }, //控制散点颜色 itemStyle: { // color: 'green' // 让不同散点颜色不一样 color: function (arg) { var height = arg.data[0] / 100 var weight = arg.data[1] // bmi = 体重kg/(身高m*身高)> 28 散点大一些,<28散点小一些 var bmi = weight / (height * height) if (bmi > 28) { return "red" } return "pink" } } }] }; // 步骤5:将配置项设置给echarts实例对象 myChart.setOption(option);