百度echart使用上遇到问题记录

最新推荐文章于 2024-09-06 14:05:52 发布

u011010407

最新推荐文章于 2024-09-06 14:05:52 发布

阅读量706

点赞数

分类专栏：百度图标echarts 文章标签： echart

本文链接：https://blog.csdn.net/u011010407/article/details/84935554

版权

百度图标echarts 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

下面图片是公司写的一个页面，先不纠结功能是否合理，能够帮助到客户，我们就简单的记录下技术问题；

解决的问题

1.条形统计图，我的颜色突出显示，即某一个显示不一样的颜色

2.漏斗图，如何同事显示数字和名称，层叠两个漏洞图完成，一个显示类目，一个显示数值

3.漏斗图，官方或者非官方找的例子，在数值相同的时候可能出现类目和数字对不上，因为排序导致的

4.折线统计图，双y轴的时候，如何让刻度数字对其，其实就是解决分段

5.条形统计图，y轴作为类目轴的时候，被倒序了

6.一个画板多个图表的新的

7.一个画板多个，图表的时候，标题怎么挨个设置

发现截图有些缺陷啊，麻烦请忽略，请忽略，哈哈

1.条形统计图，我的颜色突出显示，即某一个显示不一样的颜色

这个很简单，一般配置颜色是在一级对象设置color来配置统一的颜色，例如我上面的第一个图表自己的颜色要特殊显示的时候，其实只需要设置series[i].data即可，一般我们就是一个值数组int[]这样额，需要特殊处理的时候他可以是一个对象，如下关键代码

 
series:[
    '100',
    '90',
    //关键代码
    {
        value:80,    //值
        itemStyle: {
            color: "orange"    //设置你需要特殊的颜色
        }
    }
    /*
     *  ........省略
     */
]

2.漏斗图，如何同事显示数字和名称，层叠两个漏斗图完成，一个显示类目，一个显示数值

这个问题看一个官方例子吧

http://echarts.baidu.com/examples/editor.html?c=funnel-customize

这个例子里面你只要把第一个漏斗图的数据，和第二个漏斗图的数据改为一样，让后去掉一些悬浮的操作，即可看到你需要的效果了

3.漏斗图，官方或者非官方找的例子，在数值相同的时候可能出现类目和数字对不上，因为排序导致的

参考第二个问题的例子，这个例子你在实际操作的时候会发现类目和数字对不上的问题，就是两个类目的数字是一样的时候就很有可能出现这样的问题，漏斗图自带排序功能的，只要把他的排序功能禁用掉，然后自己处理好排序的数据即可

 
series:[
    //第一个漏斗图
    {
        sort: "none"    //禁用排序
    },
    //第二个漏斗图
    {
        sort: "none"    //禁用排序
    }
]

4.折线统计图，双y轴的时候，如何让刻度数字对其，其实就是解决分段

//简单的分段api
xAxis[i].splitNumber   你需要分段的个数

但是在双轴的时候，死活不给我设为一样，有变的总是多一个分段，连线就不能重叠显示了两条，极不美观，解决方式是使用另外三个api（min,max,interval；interval的说法是强制设置坐标轴分割间隔。）

做法大概是min设置最小值为0，max设置最大值，然后如果你需要几段就用最大值除以你的段数，然后设置给interval即可

我写了一个小方法，来解决y轴的数字尽量凑整，代码如下

 
function chartSplit(max, splitNumber) {
  var avg = max / splitNumber;
  max % splitNumber == 0 && avg++;
  avg = Math.ceil(avg);
  if (avg < 10) {
    return { avg: avg, max: avg * splitNumber };
  }
  var avg_temp = avg;
  for (var i = 0; avg_temp > 10; i++) avg_temp = avg_temp / 10;
  avg_temp = Math.ceil(avg_temp);
  for (; i > 0; i--) avg_temp = avg_temp * 10;
  return { avg: avg_temp, max: avg_temp * splitNumber };
}

max 就是这个数字最大值，splitNumber 就是你要分段数，返回是一个对象

 
yAxis:[
    {
        interval: totalInfo.avg,       //totalInfo是chartSplit返回的对象，avg是计算出来凑整的平均值
        max: max,   //这个轴中最大的数值
    },
    {
        interval: avgInfo.avg,
        max: avgInfo.max
    }
]

5.条形统计图，y轴作为类目轴的时候，被倒序了

这个简单啊，只要细心看官方的配置项即可

 
yAxis:[
    {
        inverse:true    //是否是反向坐标轴。ECharts 3 中新加。
    }
]

6.一个画板多个图表的

上面是我图片我只有四个画板，但是有九个图表，漏斗图和三个仪表盘的其实是一个画板，并不是用了四个div做四个画板，这个实现需要用到grid这个配置项，具体的不多说，体会一下吧，其实相当于吧一个画板分成了四个画板

  
series:[
    { 
        type: "funnel",
        left: "20px",   //设置一点点边距
        width: "34%",   //设置漏斗图的宽度，这样他就只占这么一个小区域
    },{ 
        type: "gauge",
        //官方api没看到，我是从一个示例上仿造的
        //50%，这个图表x轴放在正中间，60%，这个图表y轴放在正中间，偏下10%
        center: ["50%", "60%"],     
        //从正常大小，缩小40%，显示60%这么大
        radius: "60%",
    },
    {
        type: "gauge",
        center: ["70%", "60%"],
        radius: "60%",
    },
    {
        type: "gauge",
        center: ["90%", "60%"],
        radius: "60%",
    }
]

center参照的示例：http://www.echartsjs.com/examples/editor.html?c=gauge-car-dark

我的第四个图表，也就是最下面的三个条形统计图，他并不能像上面的一样利用center配置项来控制显示的位置，他需要用到drig，代码如下

 
{
    top: "90px",
    left: "20px",
    width: "30%",
    bottom: "20px",
    gridIndex: 0,
    containLabel: true
},
{
    top: "90px",
    left: "35%",
    width: "30%",
    bottom: "20px",
    gridIndex: 1,
    containLabel: true
},
{
    top: "90px",
    left: "70%",
    right: "20px",
    bottom: "20px",
    gridIndex: 2,
    containLabel: true
}

需要注意的是gridIndex，每个都drig项都配置了这个东西，这个是很关键的东西来的

需要对xAxis，yAxis对应写上gridIndex，意思就是这个轴放在那个drig上面，因为drig有描述区域大小drig[i].containLabel这也是一个很好的额配置，他能帮你计算类目轴字数过多的时候不变形，当然你也可以自己处理字符过多的情况

除上面两个点之外还有一个点，series是配置图表的，数组里面每一项都要配置他使用那个轴，不然全部会叠在一起

 
series:[
    {
        xAxisIndex: 0,
        yAxisIndex: 0,
    },{
        xAxisIndex: 1,
        yAxisIndex: 1,
    },{
        xAxisIndex: 2,
        yAxisIndex: 2,
    }
]

上面代码一看就能懂的哈

7.一个画板多个，图表的时候，标题怎么挨个设置

这个东西在配置项真的忽略掉了，还是百度到的结果，title居然也能利用数组配置

官方原画，所以你得注意你的版本：在 ECharts 2.x 中单个 ECharts 实例最多只能拥有一个标题组件。但是在 ECharts 3 中可以存在任意多个标题组件，这在需要标题进行排版，或者单个实例中的多个图表都需要标题时会比较有用。

 
title: [
    {
        text: "排名前3的科室",
        left: "15%",
        textAlign: "center",
        padding: [40, 0, 0, 0]
    },
    {
        text: "排名前3的医生",
        left: "50%",
        textAlign: "center",
        padding: [40, 0, 0, 0]
    },
    {
        text: "排名前3的医生",
        left: "85%",
        textAlign: "center",
        padding: [40, 0, 0, 0]
    }
]

============================

上面的需求，肯定还有其他解决方案的，可以给我留言一起学习哈！

有问题多悄悄配置项啦，配置项真的很丰富，也可以去看看示例，因为示例上有很多可以点醒你的地方

http://www.echartsjs.com/option.html#title