zoukankan      html  css  js  c++  java
  • echarts scatter散点图 简单设置

    用echarts写了个简单的散点图

    该散点图设置了两条标准线:x=10 和 y=10

    具体代码:

     1 option = { 
     2     title : {
     3                 left: 'center',
     4                 show: false
     5             },
     6             grid: {
     7                 left: '3%',
     8                 right: '5%',
     9                 bottom: '5%',
    10                 containLabel: true
    11             },
    12             tooltip : {
    13                 showDelay : 0,
    14                 formatter : function (params) { //格式化鼠标移上去显示内容样式
    15                     if (params.value.length > 1) {
    16                         return params.value[2] ;
    17                     }
    18                     
    19                 },
    20                 backgroundColor: '#fff', //气泡背景色
    21                 textStyle: { //文字样式
    22                     color: '#333'
    23                 },
    24                 borderColor:'#CBCBCB',//气泡边框颜色
    25                 borderWidth:1,//气泡边框款
    26                 extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'//API中的让气泡带有阴影的效果
    27             },
    28             xAxis : [
    29                 {
    30                     type : 'value',
    31                     scale:false,
    32                     axisLabel : {
    33                         formatter: '{value}%'
    34                     },
    35                     axisTick:{ //刻度线样式
    36                         show: false
    37                     }
    38                 }
    39             ],
    40             yAxis : [
    41                 {
    42                     type : 'value',
    43                     scale:false,
    44                     axisLabel : {
    45                         formatter: '{value}'
    46                     },
    47                     axisTick:{
    48                         show: false
    49                     }
    50                 }
    51             ],
    52             series : [
    53                 {
    54                     type:'scatter',
    55                     data:  [
    56                             [10.0, 8.04,'point1'],
    57                             [8.0, 6.95,'point2'],
    58                             [13.0, 7.58,'point3'],
    59                             [9.0, 8.81,'point4'],
    60                             [11.0, 8.33,'point5']
    61                         ],
    62                     itemStyle:{ //当前数据的样式
    63                       normal:{color:'#556EAA'}
    64                   }
    65                 },
    66                 {
    67                     type:'scatter',
    68                     data:  [
    69                             [10.0, 11.2,'point6'],
    70                             [12.5, 16.3,'point7'],
    71                             [14.1, 10.2,'point8'],
    72                             [11.0, 12.0,'point9'],
    73                             [11.0, 13.1,'point10']
    74                         ],
    75                     itemStyle:{
    76                       normal:{color:'#DB442D'}
    77                     },
    78                     markLine : {//标记线设置
    79                         lineStyle: {
    80                             normal: {
    81                                 type: 'solid'
    82                             }
    83                         },
    84                         symbolSize:0,//控制箭头和原点的大小、官方默认的标准线会带远点和箭头
    85                         data : [ //设置两条标准线——x=10 和 y=10
    86                             { xAxis: 10 },
    87                             { yAxis: 10 }
    88                         ]
    89                     }
    90                 }
    91             ]
    92          };
    93 
    94                        
  • 相关阅读:
    留言板
    阿里云ECS 个人博客搭建流程
    安卓包 无崩溃文件的崩溃问题解决
    win10家庭版 远程桌面解决方案
    python int(a/b)和//的区别(转)
    git基本操作
    《代码整洁之道》读后总结
    《人月神话》的观点:是与非?
    小白第一次装机体验
    python2和python3之间的差异和区别
  • 原文地址:https://www.cnblogs.com/pqblog/p/8479197.html
Copyright © 2011-2022 走看看