data4 = [{ xAxis: result.AvgEvaluate, seriesId: '', name: '基干360综合分' },
{ yAxis: evalue, seriesId: '',name: '管理幅度' }]
// 特定线的值
data0 = {
"name": item.OrganizationUnitName,
"value": [
item.EvaluateTotal ? (item.EvaluateTotal).toFixed() : '',
item.Radio ? (item.Radio).toFixed() : ''
]
}//图中显示的值
var option = {
color: ['#082778', '#e4d426'],
legend: {
left: ''
},
grid: {
left: '8%',
containLabel: true
},
// 数据被遮住,可设置此选项
tooltip: {
trigger: 'item',
// 只要是鼠标上移的效果,通过此选项进行设置(提示,线提示)
formatter: function (item) {
if (!item.data.seriesId) {
if (item.data.formatValue === "LocationName") {
return item.name + ' : ' + '(' + item.value[] + "," + item.value[] + "%" + ')';
} else {
return item.name + ' : ' + '(' + item.value + ')';
}
} else {
if (item.data.seriesId === "") {
return (item.name+':'+item.value + '%')
} else {
return item.name + ':'+item.value
}
} }
},
xAxis: [
{
type: 'value',
scale: true,//可以设置鼠标上移是否显示tool提示
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
lineStyle: {
color: '#cccccc'
}
}
}
],
yAxis: [
{
type: 'value',
scale: true,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
lineStyle: {
color: '#cccccc'
}
}
}
],
series: [
{
zlevel: ,
type: 'scatter',//散点图
data: data1,
label: {
normal: {
show: true,
position: 'left',
formatter: '{b}',
color: "#3f3f3f"
}
},
markLine: {// 另外标记的线(平均值、最大值、特定值)
lineStyle: {
normal: {
type: 'dashed',
width:
}
},
//silent:true,
data: data4,// 可以进行设置
label: {
normal: {
position: 'end',
formatter: function (item) { //标记线数值的格式
if (item.data.seriesId === "") {
return (item.value + '%')
} else {
return item.value
} },
show: true
},
emphasis: {
show: true,
textStyle: {
fontSize: '',
fontWeight: 'bold'
},
formatter: function (item) {
if (item.data.seriesId === "") {
return (item.value + '%')
} else {
return item.value
} }
}
}
},
itemStyle: {
emphasis: {
opacity:
},
normal: {
shadowBlur: ,
shadowColor: 'rgba(0, 145, 234, 1)',
shadowOffsetY: ,
color: new echarts.graphic.RadialGradient(0.4, 0.3, , [{
offset: ,
color: 'rgba(0, 145, 234, 1)'
}, {
offset: ,
color: 'rgba(0, 145, 234, 1)'
}])
}
},
emphasis: {
label: {
textStyle: {
color: "#000",
borderColor: "#fff",
fontFamily: 'sans-serif',
fontSize: ,
fontWeight: "normal"
}
}
},
markArea: {
silent: true,
itemStyle: {
normal: {
borderWidth: ,
borderType: 'dashed'
}
}
}
}
]
};
myChart.setOption(option)
散点图
  1.如果数值被遮挡住,可设置grid选项值
  2.如果是显示特定的线,通过makeLine进行设置
  3.特定线的数值格式,可以通过label中的format进行设置

echarts-detail---散点图的更多相关文章

  1. Vue中使用ECharts画散点图加均值线与阴影区域

    [本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...

  2. 【前端图表】echarts实现散点图x轴时间轴

    话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日. 实现代码如下: <!DOCTYPE html> <html> <head> < ...

  3. echarts的散点图

    目前页面中有一个故障数据,做成散点图的效果,打算用echarts 来实现,国内的图表类其实选择挺多的,个人觉得echarts是比较好用的,来看看它有什么优点,一时中文的,联合百度地图,很多都对国内很友 ...

  4. ECharts问题--散点图中对散点添加点击事件

    1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...

  5. Echarts特效散点图全解

    mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 font ...

  6. 用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容

    本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...

  7. 报表工具-ECharts 特性介绍

    ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,S ...

  8. echarts入门

    一直好奇,今晚就学习了一番,算是入门的级别,学习总是一个渐进的过程. 一路记录,一路足迹. 一:学习资料 1.主要参考的代码 https://github.com/shengxinjing/imooc ...

  9. 【Echarts】图表用echarts【待完善】

    echarts是做数据统计. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox ...

  10. leaflet 结合 Echarts4 实现散点图(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

随机推荐

  1. 动态 K th

    每一棵线段树是维护每一个序列前缀的值在任意区间的个数,如果还是按照静态的来做的话,那么每一次修改都要遍历O(n)棵树,时间就是O(2*M*nlogn)->TLE考虑到前缀和,我们通过树状数组来优 ...

  2. POJ-1458 LCS(线性动态规划)

    此题经典线性动态规划. 代码如下: #include<iostream> #include<cstdio> #include<cstdlib> #include&l ...

  3. 【链接】SpringBoot启动错误

    [错误解决]SpringBoot启动错误 https://blog.csdn.net/Small_Mouse0/article/details/78551900

  4. Java 1.7 ThreadPoolExecutor源码解析

    Java中使用线程池技术一般都是使用Executors这个工厂类,它提供了非常简单方法来创建各种类型的线程池: public static ExecutorService newFixedThread ...

  5. Thinkphp5 模块的自动生成

    首先到根目录下的build.php文件中去 是这样子滴: 然后去public目录中的index.php中去添加代码 这样子: 然后运行项目 就搞定了. 是不是美滋滋! 在public 下index.p ...

  6. Asp.Net将Session保存在数据库中

    1.由于项目dll文件变动比较频繁,而保存登陆的状态又保存在Session中,所以导致用户经常无故掉线.(dll变动的时候导致Session丢失) 2.有一种方法可以长期保存session,那就是se ...

  7. Java_SQL_类型对应_资料

    1.http://argel-lj.iteye.com/blog/1183123 2.http://www.fx114.net/qa-119-110105.aspx JDBC 的"类型&qu ...

  8. Shell date 命令详解

    格式: date [选项] ... [+格式] 选项说明: -d ,--date=字符串 显示指定字符串所描述的时间 格式说明: 例子1: #!/bin/bash ##. 获取当前系统时间 YYYY- ...

  9. ctci1.3

    ; i < len; i++){         if(str0[i] != str1[i])             return false;     }          return t ...

  10. raid write back / write throught

    RAID write back指的是raid控制器能够将写入的数据写入自己的缓存中,并把它们安排到后续再执行,这样做的好处就是不需要等实际写入磁盘再返回,因此写入更快.对于数据库而言,这一点更为重要, ...