11:07 提问
echarts散点图原点自定义，而不是默认（0，0）
自己定义散点图的坐标原点，而不是默认（0，0），比如定义成（50,50）
按赞数排序
定义grid，可以定义成{x:50,y2:50}
其他相关推荐在 SegmentFault，解决技术问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
一线的工程师、著名开源项目的作者们，都在这里：
获取验证码
已有账号？
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
如何在echarts散点图，对每一个点加一个闪烁的动画效果
假设在这个图例上，对每一个点加一个闪烁的效果
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
闪烁的话只有Echarts2里有，Echarts3里目前还没有支持
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：Echarts scatter 气泡图-获取某时间段数据（气泡大小半径做了控制） - CSDN博客
Echarts scatter 气泡图-获取某时间段数据（气泡大小半径做了控制）
&script type=&text/javascript& src=&&%=basePath%&js/echarts/esl.js&&&/script&
&script type=&text/javascript&&
var today=new Date();
var currentDateStart = today.getFullYear()+&-&+ (today.getMonth()+1) +&-&+today.getDate()+' 00:00:00';
var currentDateEnd = today.getFullYear()+&-&+ (today.getMonth()+1) +&-&+today.getDate()+' 23:59:59';
$(document).ready(function(){
// 时间控件
$('#dtStart').datetimebox({&
value: currentDateStart, & &
editable:false,
& required: true, &&
& & & showSeconds:false &
$('#dtEnd').datetimebox({
value: currentDateEnd,&
editable:false,&
required: true, & &
& & & showSeconds:false &
& & // 初始给气泡面板赋高度
& & $('#mainScatter').panel({height:mainTableHeight(),width:mainTableWidth()});
& & //$('#mainScatter').panel({height:openWindowHeight(0.87),width:openWindowWidth(0.97)});
// 执行查询
function searchData(){
var start = $('#dtStart').datetimebox('getValue');
var end = $('#dtEnd').datetimebox('getValue');
//alert(start + &-& +end );
var reg = /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2}):(\d{2}):(\d{2})$/ ;&
if (reg.test(start) && reg.test(end)) {
getScaterData(start,end);
$.messager.alert('提示','时间格式中有非法字符，请重新选择！','info');
//清空查询条件
function clearForm(){
$('#dtStart').datetimebox('setValue',currentDateStart);
$('#dtEnd').datetimebox('setValue',currentDateEnd);
//$('#queryForm').form('clear');
// 使用echart start
& & & & & & &
// 路径配置
require.config({
& & paths:{echarts:'./js/echarts/echarts',
& & 'echarts/chart/scatter' : './js/echarts/echarts',
& & 'echarts/chart/bar' : './js/echarts/echarts',
& & 'echarts/chart/line': './js/echarts/echarts'
& & & & 'echarts',
& & & & 'echarts/chart/scatter',//
& & & & 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
& & function (ec) {
& // 基于准备好的dom，初始化echarts图表
& & & & myScatter = ec.init(document.getElementById('mainScatter'));&
// 标准气泡图 &三个值
var optionScatter2 = {
& & & &text: '',
& & & &subtext: '',
& & & &x:'left',
& & & &y:'top'
& &/*tooltip : {
& & & &trigger: 'axis',
& & & &showDelay : 0,
& & & &axisPointer:{
& & & & & &type : 'cross',
& & & & & &lineStyle: {
& & & & & & & &type : 'dashed',
& & & & & & & &width : 1
& & & & & &}
& & tooltip : {
& & & &trigger: 'item',//axis item
& & & &formatter : function (value) {
& & & & & &return value[0] +' （' &+ '名称:' + value[2][3] + '）&br/&'
& & & & & & & & & + '成功率：' + value[2][0] + '（%）&br/& '&
& & & & & & & & & + '交易时长：' +parseFloat( value[2][1]) + '（秒）&br/&'&
& & & & & & & & & + '交易量：' + value[2][2] + '（笔）&br/&' ;&
& &legend: {
& & & &data:['业务1']
& &toolbox: {
& & & &show : true,
& & & &feature : {
& & & & & &mark : {show: true},
& & & & & &dataZoom : {show: true},
& & & & & &dataView : {show: true, readOnly: false},
& & & & & &restore : {show: true},
& & & & & &saveAsImage : {show: true}
& &xAxis : [
name : '成功率(%)',
& & & & & &type : 'value',
& & & & & &power: 1,//整数精度
& & & & & &//splitNumber: 4,//分割段数 默认5
& & & & & &scale: true,//脱离0值比例，放大聚焦到最终_min，_max区间
& & & & & &max:100,
& & & & & &//min:90,
& & & & & &axisLabel : {
& & & & & & & &formatter: '{value} %'
& & & & & &}
& &yAxis : [
name : '交易时长(s)',
& & & & & &type : 'value',
& & & & & &precision: 1,//小数精度
& & & & & &power: 1,
& & & & & &//max:2,
& & & & & &splitNumber: 5,
& & & & & &scale: true,
& & & & & &axisLabel : {
& & & & & & & &formatter: '{value} s'
& & & & & &}
& &series : [
& & & & & &name:'业务1',
& & & & & &type:'scatter',
& & & & & &symbolSize: function (value){
& & & & & &
// 根据最大的交易量值 来控制气泡半径 &（最小 3 &最大 40）
& & & & & & & &return Math.round(3 + value[2] * 40 / maxTotalCount);
& & & & & &},
& & & & & &data: [[0,0,0,'操作a']]//设置一个初始化值，设值为0气泡无大小不会显示，就可以
& & & & & &//itemStyle : { normal: {label : {show: true, position: 'top'}}}
& & & & // 为echarts对象加载数据&
& & & & myScatter.setOption(optionScatter2);&
& & & & myScatter.hideLoading();&
// 记录最大 的 交易量 值 &初始设置为1 不要为 0
var maxTotalCount = 1;
// 执行获取气泡图数据，并给图赋值&
function getScaterData(date1,date2) {
& & //获得图表的options对象 &
& & var options = myScatter.getOption();
& & //var url = getKpiSerivceUrl()+'/service2/scatter.json?dt1='+date1+'&dt2='+date2;
& & //var url = getKpiSerivceUrl()+'/service2/scatter.json?dt1= 00:00:00&dt2= 23:59:00';
& & var url = '&%=basePath%&logMonitor/echarts.do?dt1='+date1+'&dt2='+date2;
& & $.ajax({
type: 'get',
url : url,
beforeSend : function() {
$(&body&).mask(&正在处理中...&);
success : function(data) {
//alert(data);
$(&body&).unmask();
var data = $.parseJSON(data);//eval('(' + data + ')');// json 转对象
var objs = data.
var arr = [];//格式如：[[20,2,306,'气泡a'],[1,1,54,'气泡b'],[71,5,3200,'气泡c']];
for ( var i = 0; i & objs. i++) {
var success = objs[i].
var timeout = objs[i].
var totalcount = objs[i].total_
var objdesc = objs[i].object_
// [成功率，时延，交易量，操作描述]
arr.push([ success,timeout,totalcount,objdesc]);
& &// 获取到最大的交易量值 来控制气泡半径
& &if (parseInt(totalcount) &= maxTotalCount) {
& & maxTotalCount = parseInt(totalcount);
//options.legend.data[0] = &我是操作&;//图例赋值
//options.series[0].name = &我是操作&;//图例赋值
options.series[0].data =//
myScatter.hideLoading();
myScatter.setOption(options,false);//每次数据不合并，保证数据刷新
&style type=&text/css&&
& & html, body{
& & & & margin:0;padding:0;border:0;width:100%;height:100%;overflow:
&body class=&easyui-layout& &
&div region=&center& &
&div &style=&padding: 20&&
&form id=&queryForm& style=&margin: 10;&&
&table id=&t1&&
开始时间：
&input id=&dtStart& type=&text&&&/input&
结束时间：
&input id=&dtEnd& type=&text&&&/input&
&a href=&javascript:void(0)& onclick=&searchData();&
class=&easyui-linkbutton& iconCls=&icon-search&&加载&/a&
&a href=&javascript:void(0)& onclick=&clearForm();&&
class=&easyui-linkbutton& iconCls=&icon-cancel&&重置&/a&
&!-- 为ECharts准备一个具备大小（宽高）的Dom height:400--&
&div id=&mainScatter& class=&easyui-panel& title=&气泡图& &style=&padding: 10; float:&&&/div&
以上是JSP中代码，气泡图的数据这里是从java后台获取json格式如下：
data-& & {&kpis&:[{&object_desc&:&携号转网&,&success&:&90&,&total_count&:&1000&,&timeout&:&0.99&}]}
界面如图：
本文已收录于以下专栏：
相关文章推荐
先看两张图
按目前情况，官方并为对axislabel的高度或者宽度做调整。所以解决方案只能从其他方案下手
解决方案有几种
第一种为上图解决方案
设置grid属性定义图的大小来释...
最近项目组需要在web画图表，在网上找了一下，发现百度出品的echarts非常好用
在谈 formatter 之前，先来说说 grid。在官方文档中，grid
需要动4个地方：1. var formatLabel = '{b}'，2.数据拼接的for循环里加上formatLabel+='{a'+i+'}:{c'+i+'} 万元 '。3.tooltip里加上f...
站点地图不外乎就是罗列一个网站的层次结构，提炼地讲就是一个关系结构图。那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢？另外如何点击某个节点的时候实现页面跳转呢？
之前在做报表的时候用过echart 用完也就完了，而这次在用的时候已经忘了，所以这里简单记录一下，好记性不如烂笔头！！！
1、折线图修改颜色：
type: 'category...
先看两张图
按目前情况，官方并为对axislabel的高度或者宽度做调整。所以解决方案只能从其他方案下手
解决方案有几种
第一种为上图解决方案
[摘要]： 格式化之所以存在，主要是因为我们想把一些不够人性化的内容通过某种处理让其变得人性化，便于用户更好地理解内容。ECharts图表组件内的格式化方法formatter比起highcharts图...
看到这个问题了，提供个解决办法，可以让文字竖直显示。
在axisLabel下添加属性：
formatte...
Echarts数据可视化开发代码注释全解
Echarts数据可视化开发参数配置全解点击进入其他功能详解：
Echarts数据可视化title详解
Echarts数据可视化tooltip详解
他的最新文章
讲师：吴岸城
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}