博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
echarts scatter散点图 简单设置
阅读量:6516 次
发布时间:2019-06-24

本文共 3330 字,大约阅读时间需要 11 分钟。

用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: true11             },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: false37                     }38                 }39             ],40             yAxis : [41                 {42                     type : 'value',43                     scale:false,44                     axisLabel : {45                         formatter: '{value}'46                     },47                     axisTick:{48                         show: false49                     }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=1086 { xAxis: 10 },87 { yAxis: 10 }88 ]89 }90 }91 ]92 };93 94

 

转载于:https://www.cnblogs.com/pqblog/p/8479197.html

你可能感兴趣的文章
lvm磁盘在线扩容
查看>>
cacti监控机硬盘满了,于是mysql的表损坏了,通过查看cacti日志的报错信息,搜索到解决办法...
查看>>
START – MODERN MINIMALIST OPENCART 2.X 自适应主题模板 ABC-0573-02
查看>>
运维自动化之使用PHP+MYSQL+SHELL打造私有监控系统(三)
查看>>
mysql基础操作命令
查看>>
新建独立博客
查看>>
IT十八掌作业_java基础第九天_多线程、自动拆装箱
查看>>
使用交互式shell脚本实现对DNS服务的管理以及启动
查看>>
Mysql主从同步部署
查看>>
Asterisk Elastix2.3版咬线问题解决方法
查看>>
声明式限定.NET函数的调用用户
查看>>
光猫手机自动激活系统-开发指南-004- OLT添加vlan(ADD- VLAN)
查看>>
Linux运维 第四阶段 (三) MySQL的SQL语句
查看>>
php&获取当前字符串的编码格式
查看>>
AWK 简明教程
查看>>
smarty只能更包含include的困惑
查看>>
mysql架构
查看>>
linux导出>>文件到Window txt乱码
查看>>
我的友情链接
查看>>
我的友情链接
查看>>