玩转ECharts制作图表之散点图

散点图适用于三维数据集，但其中只有两维需要比较。

散点图

ECharts基本构建代码结构
准备x轴和y轴数据，二维数组[[身高,体重],[]…]
将type的值设置为scatter，x轴和y轴的type都是value

准备和处理json数据

//准备数据 数据太多只拿出一部分
var data = [{"gender": "female","height": 161.2,"weight": 51.6}, {"gender": "female","height": 167.5,"weight": 59}, {"gender": "female","height": 159.5,"weight": 49.2}, {"gender": "female","height": 157,"weight": 63}, {"gender": "female","height": 155.8,"weight": 53.6}]//处理数据var axisData = []for (var i = 0; i < data.length; i++) {var height = data[i].heightvar weight = data[i].weightvar newArr = [height, weight]axisData.push(newArr)}

准备ECharts图表容器

    <div style="width: 600px;height:400px"></div>

初始化ECharts实例

var mCharts = echarts.init(document.querySelector("div"))

配置配置项

var option = {xAxis: {type: 'value',scale: true},yAxis: {type: 'value',scale: true},series: [{type: 'scatter', // 指明图表的类型为散点图data: axisData}]}

将配置项设置给echarts实例

        mCharts.setOption(option)

散点图样式

缩放，脱离0值比例 -scale

                 xAxis: {type: 'value',//缩放，脱离0值比例scale: true},yAxis: {type: 'value',scale: true},

带涟漪动画的散点图

type: 'effectScatter'

出现涟漪动画的时机

 //render 绘制完成后显示 emphasis  高亮的显示
showEffectOn: 'emphasis'

涟漪动画时, 散点的缩放比例

  rippleEffect: {scale: 10 // 涟漪动画时, 散点的缩放比例},

控制散点的样式 -itemStyle
控制散点的大小 -symbolSize

玩转ECharts制作图表之散点图相关推荐

玩转ECharts制作图表之折线图
折线图适合二维的大数据集,尤其是那些趋势比单个数据点更重要的场合 markArea //标注空间 (xAxis的值要与xdata值中取出)markArea: {data: [[{xAxis: '1月' ...
在jsp中使用ECharts制作图表
ECharts插件的下载地址http://echarts.baidu.com/download.html 先来看看我们要达到的效果!后面直接上代码,如下图: 下面直接贴上代码我们这里写的都是些死的数 ...
echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...
使用Echarts制作图表基础教程
在我们前端开发的过程中,会涉及到很多图表,如果用源生的js和css3制作的话,需要耗费大量的时间,同时代码量需求也比较大,那么我们在开发的过程中讲究的是效率,如果单单在制作图表的过程中就耗费了大量的时 ...
echarts ucharts 和_使用chart和echarts制作图表
前言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕 ...
在Java web页面使用ECharts制作图表
前言因为最近在做一项课设,需要可视化,因此选择echarts.但因为太久没用了,所以忘记了怎么在web页面引用echarts,在这里做个记录,开发工具是VSCODE. 一.下载echarts.min ...
echarts 制作图表固定的三个步骤
1.导入js() (1)Echarts官网(第三方可视化图表库):Apache ECharts (2)echart.js(引入的js文件)下载地址:https://cdn.jsdelivr.net/n ...
【微信小程序】关于使用ECharts制作图表
halo小伙伴们,在原生微信小程序中会遇到需要开发图表,这总不能自己手撸一个吧?多费力啊,这就不得不说ECharts的好用之处了.接下来我来说下微信小程序使用ECharts的一个过程吧 ECharts ...
ECharts常用图表饼图
1.图表4 饼图 1.1.饼图的实现步骤步骤1 ECharts 最基本的代码结构此时 option 是一个空空如也的对象步骤2 准备数据步骤3 准备配置项在 series 下设置 type: ...

玩转ECharts制作图表之散点图

散点图

散点图样式

玩转ECharts制作图表之散点图相关推荐

最新文章

热门文章