格式化 千分位
window.formatData = function(v)
{
v += "";
if(4 <= v.length)
{
var re=/(\d{1,3})(?=(\d{3})+(?:$|\.))/g;
v = v.replace(re,"$1,");
}
return v;
};
/**
* 添加单,小于是红色
*/
window.addUnit = function(v)
{
if(!v || "-" == v) return "-";
if(parseFloat(v) < 0)//大于0
{
return "<span style='color:red'>" + v+ "%</span>";
}
return v + "%";
};
tooltip 为 鼠标移上柱图或线图 显示的图例
tooltip : {
trigger: 'axis',
formatter:function(params)
{
var title = "";
for(var i = 0; i < params.length; i++)
{
var arrs = params[i];
var value = arrs[2];
if("销量" == arrs[0] || $("#target").store().value == 1)
{
if(-1 != (value).indexOf("."))
{
var s1 = (value).substr(0,(value).indexOf("."));
var s2 = (value).substr((value).indexOf("."));
value = formatData(s1) + s2 + "万辆";
}
else value = formatData(value) + "辆";
}
else value += "%";
if(0 == i)
{
title += arrs[1] + "<br>" + arrs[0] + ":" + value + "<br>";
}
else title += arrs[0] + ":" + value + "<br>";
}
return title;
}
}
dataZoom 为图下可以拉伸的进度条
dataZoom : {
show : true,
realtime : true,
start : zoomStart,
end : zoomEnd,
zoomLock:false,
height : 35
}
legend 为 图上的图例
legend: {
data:json.legend.data
}
grid 可以控制 X轴 文字的高度
grid:{
y2:75,
y:35
}
xAxis yAxis X轴 Y轴
轴 的边线
axisLine:{show: true,lineStyle:{color:'#BBBBBB'}}
轴 的 刻度
axisLine:{show: true,lineStyle:{color:'#BBBBBB'}}
轴 的 网格线
splitLine : {show : true,lineStyle:{color:'#F0F0F0'}},
无论多少个都全部显示
axisLabel:{interval:0}
显示数据的格式
axisLabel : {
formatter: '{value}',
margin:30,
formatter:function(v1,v2,v3){ return window.formatData(v1+"%");}
}
series对应 legend 图例 一般有几个图例 series里面就有几组数据
name:对应图例
type: 主要是什么 例如 bar 柱子 line 线
itemStyle : 控制显示数据的格式下
"itemStyle": {
"normal": {
"color": "#4f81bd",
"label": {
"show": true,
"position": "insideBottom",
"textStyle": {
"color": "#000",
"fontFamily": "微软雅黑",
"fontSize": "12px"
}
}
}
}
window.formatData = function(v)
{
v += "";
if(4 <= v.length)
{
var re=/(\d{1,3})(?=(\d{3})+(?:$|\.))/g;
v = v.replace(re,"$1,");
}
return v;
};
/**
* 添加单,小于是红色
*/
window.addUnit = function(v)
{
if(!v || "-" == v) return "-";
if(parseFloat(v) < 0)//大于0
{
return "<span style='color:red'>" + v+ "%</span>";
}
return v + "%";
};
tooltip 为 鼠标移上柱图或线图 显示的图例
tooltip : {
trigger: 'axis',
formatter:function(params)
{
var title = "";
for(var i = 0; i < params.length; i++)
{
var arrs = params[i];
var value = arrs[2];
if("销量" == arrs[0] || $("#target").store().value == 1)
{
if(-1 != (value).indexOf("."))
{
var s1 = (value).substr(0,(value).indexOf("."));
var s2 = (value).substr((value).indexOf("."));
value = formatData(s1) + s2 + "万辆";
}
else value = formatData(value) + "辆";
}
else value += "%";
if(0 == i)
{
title += arrs[1] + "<br>" + arrs[0] + ":" + value + "<br>";
}
else title += arrs[0] + ":" + value + "<br>";
}
return title;
}
}
dataZoom 为图下可以拉伸的进度条
dataZoom : {
show : true,
realtime : true,
start : zoomStart,
end : zoomEnd,
zoomLock:false,
height : 35
}
legend 为 图上的图例
legend: {
data:json.legend.data
}
grid 可以控制 X轴 文字的高度
grid:{
y2:75,
y:35
}
xAxis yAxis X轴 Y轴
轴 的边线
axisLine:{show: true,lineStyle:{color:'#BBBBBB'}}
轴 的 刻度
axisLine:{show: true,lineStyle:{color:'#BBBBBB'}}
轴 的 网格线
splitLine : {show : true,lineStyle:{color:'#F0F0F0'}},
无论多少个都全部显示
axisLabel:{interval:0}
显示数据的格式
axisLabel : {
formatter: '{value}',
margin:30,
formatter:function(v1,v2,v3){ return window.formatData(v1+"%");}
}
series对应 legend 图例 一般有几个图例 series里面就有几组数据
name:对应图例
type: 主要是什么 例如 bar 柱子 line 线
itemStyle : 控制显示数据的格式下
"itemStyle": {
"normal": {
"color": "#4f81bd",
"label": {
"show": true,
"position": "insideBottom",
"textStyle": {
"color": "#000",
"fontFamily": "微软雅黑",
"fontSize": "12px"
}
}
}
}