java echarts 散点图_echarts参数详解--散点图

// 基于准备好的dom，初始化echarts实例

var myChart = echarts.init(document.getElementById('main'));

//第二步构造数据

var data1 = [];//数据区域缩放组件

var data2 = [];

var data3 = [];

//构造随机数

var random = function (max){

return (Math.random() * max).toFixed(3);

};

//将数据装载到数组中

for (var i = 0; i < 500; i++) {

data1.push([random(15), random(10), random(1)]);

data2.push([random(10), random(10), random(1)]);

data3.push([random(15), random(10), random(1)]);

};

//3、配置option项

//第三步就是使用echarts的option进行参数的配置

option = {

animation: false,//是否开启动画，默认是开启的，true是开启的,false是关闭的

//图例

legend: {

data: [

{

name:'scatter2',

icon:'circle',//强制设置图形长方形

textStyle:

{color:'red'}//设置文本为红色

},

{

name:'scatter',

icon:'rectangular',//强制设置图形为长方形

textStyle:

{color:'red'}//设置文本为红色

},

{

name:'scatter3',

icon:'rectangular',//强制设置图形为长方形

textStyle:

{color:'red'}//设置文本为红色

}

],

zlevel:5,//设置Canvas分层 zlevel值不同会被放在不同的动画效果中,传说中z值小的图形会被z值大的图形覆盖

z:3,//z的级别比zlevel低，传说中z值小的会被z值大的覆盖，但不会重新创建Canvas

left:'center',//图例组件离容器左侧的距离。可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。

//如果 left 的值为'left', 'center', 'right'，组件会根据相应的位置自动对齐。

top:'top',

//rigth:'',

//bottom:''

width:'auto',//设置图例组件的宽度，默认值为auto,好像只能够使用px

orient:'horizontal',//设置图例组件的朝向默认是horizontal水平布局，'vertical'垂直布局

align:'auto',//'left' 'right'设置图例标记和文本的对齐，默认是auto

//默认自动，根据组件的位置和 orient 决定，当组件的 left 值为 'right' 以及纵向布局(orient 为 //'vertical')的时候为右对齐，及为 'right'。

padding:[20,20,20,20],//设置图例内边距 默认为上下左右都是5，接受数组分别设定

itemGap:20,//图例每项之间的间隔，横向布局时为水平间隔，纵向布局时为纵向间隔。默认为10

itemWidth:30,//图例标记的图形宽度，默认为25

itemHeight:20,//图例标记的图形高度，默认为14

//formatter:'Legend {name}'//图例文本的内容格式器，