Echarts 的grid各个参数的含义

在谈 formatter 之前,先来说说 grid。在官方文档中,grid 介绍的很详细。

grid 为直角坐标系内绘图网格,可以设置 x y x2 y2 等值。这在控制图表摆放位置上,起了重要的作用。 

如图所示,

x 为直角坐标系内绘图网格左上角横坐标,数值单位px,支持百分比(字符串),如'50%'(显示区域横向中心)

y 为左上纵坐标,x2为右下横坐标,y2为右下纵坐标。

需要设置的话,就按照tooltip 或 legend 的格式设置就行。

接下来就是 formatter 了。为了弥补 echarts 在时间或计量单位上格式的不足,echarts 暂时利用 formatter 来加上需要个格式,对数据呈现方式进行修改。

在设置 formatter 的时候可以用在 tooltip 和 y 轴上。

  • {Function},传递参数列表如下:
    • <Array> params : 数组内容同模板变量,[[a, b, c, d, e, data], [a1, b1, c1, d1, e1, data1], ...],不同的是当trigger为item时最后一项返回option中的完整data
    • <String> ticket : 异步回调标识
    • <Function> callback : 异步回调,回调时需要两个参数,第一个为前面提到的ticket,第二个为填充内容html
    • *函数回调时this指针指向当前图表实例(myChart)

这里举个例子:

tooltip : {

    trigger: 'axis',

    formatter: function(params,ticket,callback){

    var res = params[0][0] + '<br/>';

    for (var i = 0; i < params.length; i++) {

    if (params[i][2]==1)

    {var rank="B"}

    else if (params[i][2]==2)

    {rank="A"}

    else if (params[i][2]==3)

    {rank="C"};

    res += params[i][1] + ": " + rank;

    };

    return res;

    }

},

如果用 console 来看到 params 其实是一组模板中的变量,这里都可以加到 variable res 中,然后将某些数字的变量变成我们想要的格式,然后 return 就行了。

axisLabel:{

    formatter : function(v) {

    if (v == 1) {return 'B'}

    else if (v ==2 ) {return 'A'}

    else if (v ==3 ) {return 'C'};
    
    }

},

还有 y 轴的使用,就更加简单,直接一个 function 搞定。

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

例如:

一:x=100

二:x=1000

三:y=100

四:y2=100

五:y2=1000

  • 21
    点赞
  • 58
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,下面是 echarts 图表中常用的一些参数和选项的解释: 1. title: 图表的标题,可以是字符串类型或者是包含文本样式的对象类型,例如: ``` title: { text: '某地区销售情况', textStyle: { color: '#333', fontSize: 16 } } ``` 2. xAxis: x 轴的配置选项,可以包括类型(category, value, time),坐标轴线、刻度线、标签等样式的配置,例如: ``` xAxis: { type: 'category', data: ['周一','周二','周三','周四','周五','周六','周日'], axisLine: { lineStyle: { color: '#333' } }, axisTick: { show: false } } ``` 3. yAxis: y 轴的配置选项,与 xAxis 类似,例如: ``` yAxis: { type: 'value', axisLine: { lineStyle: { color: '#333' } }, axisLabel: { formatter: '{value} 元' } } ``` 4. series: 数据系列的配置选项,可以包括数据、图表类型、样式、标注等,例如: ``` series: [{ name: '销售额', type: 'line', data: [120, 132, 101, 134, 90, 230, 210], itemStyle: { color: 'red' }, markLine: { data: [ {type: 'average', name: '平均值'} ] } }] ``` 5. legend: 图例的配置选项,用于展示数据系列的名称和颜色对应关系,例如: ``` legend: { data: ['销售额'], textStyle: { color: '#333' } } ``` 6. tooltip: 提示框的配置选项,用于展示鼠标悬浮在图表上时的数据信息,例如: ``` tooltip: { trigger: 'axis', axisPointer: { type: 'cross' } } ``` 7. grid: 图表的布局配置选项,可以设置图表的大小、位置和间距等,例如: ``` grid: { top: '10%', left: '3%', right: '4%', bottom: '3%', containLabel: true } ``` 这些是 echarts 图表中常用的一些参数和选项,具体的使用方式可以参考 echarts 的官方文档或者在线示例。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值