解决Echarts中线状图的X轴坐标显示不全的问题
在echarts中应用线状图时，当数据量过多的时候，X轴的坐标就会显示不全，原来ECharts图表组件内部有一个机制，用于统计xAxis坐标刻度的个数和图表宽度，从而会自动调整刻度间隔个数以此达到刻度相互之间不致于很拥挤而影响图表欣赏性。刻度间隔的相关属性就是：interval。
number}interval
标签显示挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的）
| 0（全部显示）
|{number}（用户指定选择间隔）
还有一个属性：rotate: number 度角是倾斜的控制所在
用例如下：
axisLabel: {
interval：0，//横轴信息全部显示
rotate: 60,//60度角倾斜显示
&&formatter:function(val){
val.split("").join("\n");
//横轴信息文字竖直显示},
已投稿到：
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。1489人阅读
研发管理（3）
近来做CRM系统，里面要用到各种图表展示数据。于是研究了一下当前流行的图表组件如
FusionchartsAnyChartHighchartsamChartXml/Swf ChartsFlotr2Open Flash Chart 2&jqplotichartjsecharts
等等，可以说各有个的优势，在UED团队的推荐下，最后选择了百度团队开发的echarts。
ECharts (Enterprise Charts 商业产品图表库)
提供商业产品常用图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图，同时支持任意维度的堆积和多图表混合展现。&
从介绍中可以看到echarts提供的图表很丰富功能很强大，支持几乎涵盖了所有的主流设备和浏览器及其版本，基本上能满足项目的需要，并且提供多种开发方式（模块化包引入、模块化单文件引入，标签式单文件引入等）以及丰富的API，开发人员可以用自己最熟悉的方式使用，减少了学习的成本，大大方便了开发人员。
目前处于应用初期，使用起来还不是非常熟练，很多开发开发团队在使用过程里面遇到或多或少的问题。比如下面的更新图表数据与漂浮的问题。在这里分享一下解决的办法，对于初次使用的人员，应该会有一些参考价值。
更新图表数据
举例：在一个查看页面，运营人员弹层更新销售排行数据，完毕后在界面不刷新能即时看到更新后的排行榜图表。
解决方案：一般的会用ajax到服务器获取需要更新的数据，然后调用echarts的api更新排行榜图表。
&!DOCTYPE HTML&
&meta http-equiv=&Content-Type& content=&text/ charset=gbk&&
&title&echarts demo&/title&
&script type=&text/javascript& src=&/jquery/1.7.2/jquery.min.js&&&/script&
&div id=&bwOrder& style=&height:350width:800border:1px solid #&&&/div&
&script src=&echarts-plain-map.js& charset=&utf-8&&&/script&
&script type=&text/javascript&&
&pre name=&code& class=&javascript&&
var bwO//红黑榜
$(function() {
var defaultTooltip = {
trigger: 'item',
formatter: &{a} &br/&{b} : {c} ({d}%)&
defaultToolbox = {
show : false
bwOrder = echarts.init(document.getElementById('bwOrder'));
bwOrder.setOption({
text: '红黑榜',
x : 'center'
tooltip : {
trigger: 'item',
formatter: function (params) {
var series = bwOrder.getSeries();
var sery = series[0];
if (params[1][2] != '-') {
tar = params[1];
tar = params[2];
var name = '';
var value = params[2];
var data = sery.
for(var i = 0; i & data. i++){
var d = data[i];
var v = d.
if(v == value){
var r = '';
if(value & 0 ){
r += '倒数';
return r + '第' + params[1] + '名&br/&' +
calculable : true,
type : 'category',
data : ['1','2','3','4','5','6','6','5','4','3','2','1']
type : 'value'
series : [
name:'红黑榜',
type:'bar',
itemStyle: {
borderRadius: 5,
show : true,
position: 'inside',
//格式化显示名次
formatter: function(value) {
if(!window._counter){
window._counter = [];
var len = window._counter.
window._counter.push(len + 1);
//获取名次数据
var series = bwOrder.getSeries();
var sery = series[0];
var data = sery.
var d = data[len];
var name = d.
//清空计数器
if(len == data.length - 1){
window._counter = [];
textStyle : {
fontSize : '12',
fontFamily : '微软雅黑'
{value:12,name : '王燕'},
{value:10,name : '张毅'},
{value:8,name : '刘文'},
{value:6,name : '谭静淑'},
{value:4,name : '高玫红'},
{value:2,name : '严咏全'},
{value:-2,name : '严土城'},
{value:-4,name : '赵祎'},
{value:-6,name : '周宏昌'},
{value:-8,name : '李红常'},
{value:-10,name : '全进贤'},
{value:-12,name : '赵易山'}
//刷新红黑榜:这里用setTimeout代替ajax请求进行演示
window.setTimeout(function(){
var data = [
{value:12,name : 'Sky'},
{value:10,name : 'Lyn'},
{value:8,name : 'Lucifer'},
{value:6,name : 'Moon'},
{value:4,name : 'Fly100%'},
{value:2,name : 'Focus'},
{value:-2,name : 'Sojo'},
{value:-4,name : 'Remind'},
{value:-6,name : 'Sweet'},
{value:-8,name : 'XiaoT'},
{value:-10,name : 'GoStop'},
{value:-12,name : 'Ted'}
refreshBwOrderData(data);
* 刷新红黑榜
function refreshBwOrderData(data){
if(!bwOrder){
// Todo something？
//更新数据
var option = bwOrder.getOption();
option.series[0].data =
if (bwOrder && bwOrder.dispose) {
bwOrder.dispose();
bwOrder = echarts.init(document.getElementById('bwOrder'));//重新实例化
bwOrder.setOption(option);
代码其实很简单，api也有介绍，稍微熟悉的应该都可以完成，这里贴出来供新手参考。
漂浮（float）
项目里面有一个栏目，想在一个行内展示多个图表，需要使用到元素的漂浮(float)，向左或向右。一开始定义了用来初始化图表的div元素如下：
&div id=&bwOrder& style=&height:350border:1px solid #float:&&&/div&
这段代码在IE8和谷歌下竟然导致了echarts脚本的出现死循环（算BUG吗？）！后来在UED同事的帮助下，将问题解决了。解决的办法是为div元素定义宽度。
&div id=&bwOrder& style=&height:350width:350border:1px solid #float:&&&/div&
在官方的例子里面也很少看到有显示为图表的容器定义宽度的，所以大家也没注意。其实，在echarts的文档中，其初始化方法有说明到，新手或者不做前端的开发人员，一般不会在意或遗漏甚至视而不见，特别是那些只看实例代码不看api说明文档的开发人员。看api文档，其实还是可以解决大部分问题的，新手真的要学会看api文档。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：10055次
排名：千里之外