echarts-detail---散点图
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---散点图的更多相关文章
- Vue中使用ECharts画散点图加均值线与阴影区域
[本文出自天外归云的博客园] 需求 1. Vue中使用ECharts画散点图 2. 在图中加入加均值线 3. 在图中标注出阴影区域 实现 实现这个需求,要明确两点: 1. 知道如何在vue中使用ech ...
- 【前端图表】echarts实现散点图x轴时间轴
话不多说,老规矩,先上图,实现echarts实现散点图,x轴数据为时间年月日. 实现代码如下: <!DOCTYPE html> <html> <head> < ...
- echarts的散点图
目前页面中有一个故障数据,做成散点图的效果,打算用echarts 来实现,国内的图表类其实选择挺多的,个人觉得echarts是比较好用的,来看看它有什么优点,一时中文的,联合百度地图,很多都对国内很友 ...
- ECharts问题--散点图中对散点添加点击事件
1. 我们这次就没有先讲解怎么使用散点图了,这个跟之前的一些图还是很类似的,不会的可以去官网上面查看 API 使用.我们这次讲解的是为散点图中的散点添加点击事件,然后在图表之外的一个 div 里面显示 ...
- Echarts特效散点图全解
mytextStyle={ color:"#333", //文字颜色 fontStyle:"normal", //italic斜体 oblique倾斜 font ...
- 用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容
本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...
- 报表工具-ECharts 特性介绍
ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,S ...
- echarts入门
一直好奇,今晚就学习了一番,算是入门的级别,学习总是一个渐进的过程. 一路记录,一路足迹. 一:学习资料 1.主要参考的代码 https://github.com/shengxinjing/imooc ...
- 【Echarts】图表用echarts【待完善】
echarts是做数据统计. ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox ...
- leaflet 结合 Echarts4 实现散点图(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
随机推荐
- mysql常见知识点总结
mysql常见知识点总结 参考: http://www.cnblogs.com/hongfei/archive/2012/10/20/2732516.html https://www.cnblogs. ...
- 【网络结构】GoogLeNet inception-v1:Going deeper with convolutions论文笔记
目录 0. 论文链接 1. 概述 2. inception 3. GoogleNet 参考链接 @ 0. 论文链接 1. 概述 GoogLeNet是谷歌团队提出的一种大体保持计算资源不变的前提下, ...
- 虚拟机 Ubuntu18.04 tensorflow cpu 版本
虚拟机 Ubuntu18.04 tensorflow cpu 版本 虚拟机VMware 配置: 20G容量,可扩充 2G内存,可扩充 网络采用NAT模式 平台:win10下的Ubuntu18.04 出 ...
- HDU1698 just a Hook - 带有lazy标记的线段树
2017-08-30 16:44:33 writer:pprp 上午刚刚复习了一下不带有lazy标记的线段树, 下午开始学带有lazy标记的线段树 这个是我看大佬代码敲的,但是出了很多问题, 这提醒我 ...
- 物料类型AM11没有任务清单类型N定义
CA01 创建工艺路线时报错信息:“物料类型AM11没有为任务清单类型N定义” (如下图) 处理方法: 配置路径:生产->基本数据->工艺路线->通用数据->定义物料类型分配 ...
- Windows 10上强制Visual Studio 2017 以管理员身份运行
1. 打开VS的安装目录,找到devenv.exe,右键,选择“兼容性疑难解答”. 2. 选择“疑难解答程序” 3. 选择“该程序需要附加权限” 4. 确认用户帐户控制后,点击测试程序,不然这个对话框 ...
- Android6.0------权限申请管理(单个权限和多个权限申请)
Android开发时,到6.0系统上之后,有的权限就得申请才能用了. Android将权限分为正常权限 和 危险权限 Android系统权限分为几个保护级别.需要了解的两个最重要保护级别是 正常权限 ...
- Vue实例的生命周期created和mounted的区别
生命周期先上图 什么是生命周期 Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这是Vue的生命周期.通俗说就是Vue实例 ...
- c# Middleware impl
using NUnit.Framework; using System; using System.Collections.Generic; using System.Linq; using Syst ...
- python 重新修炼之路
第一篇 基础篇 1.1 打造万能的开发环境-conda 1.2 python的代码规范与vscode配置 1.3 变量 与 关键字 1.4 数据类型 1.4.1 数字 ...