echart-柱状图显示说明

最近在作数据分析,绘制图表时用到了echart库,官网上官方实例有很多,大部分直接套用即可,少部分需要个根据需求自由定制。下面说下使用echart库的一些心得:

1、添加“进度条”:

主要是设置option下dataZoom参数,根据

    dataZoom: [
                {
                    // 鼠标缩放效果           
                    type: 'inside',
                    start: 50,
                    end: 100
                },
                {
                    // 进度条初始显示
                    show: true,
                    type: 'slider',
                    y: '90%',
                    start: 50,
                    end: 100
                }
            ],

2、鼠标悬停显示内容设置:

默认是显示x轴(名称),y轴(数值)的内容,可自定义显示格式和内容

// 默认
tooltip : {
            trigger: 'axis'
            },
// 自定义formatter函数
tooltip: {
            formatter:function(a){  
                return (a['seriesName'] +'</br>'+a['name']+':'+a['value']); 
            }
        },

注:

  1. formatter中参数a包含整个图标的信息,可添加断点调试,选择想要显示的参数;
  2. formatter: “{a}
    {b}: {c} ({d}%)”这种简写方式暂未了解其原理;

    tooltip对应鼠标悬停的显示效果,itemStyle对应图标中文字的显示效果,也可以设置formatter函数;例如根据‘-’分割文字,换行显示:

// series中:
data:[
        {value:'{{wins.0}}', name:'Windows-7/8/10', selected:true},
        {value:'{{wins.1}}', name:'Windows-Server'},
        {value:'{{wins.2}}', name:'Vista'},
        {value:'{{wins.3}}', name:'Windows-XP'},
        {value:'{{wins.4}}', name:'未-知'},
    ],
itemStyle: {  
   normal:{  
     label:{  
         show:true,  
         formatter:function(val){   //让series 中的文字进行换行  
             return val.name.split("-").join("\n");}  
         },  
         labelLine:{  
         show:true  
         }  
     },  
       emphasis: {  
           shadowBlur: 10,  
           shadowOffsetX: 0,  
           shadowColor: 'rgba(0, 0, 0, 0.5)'  
       }  
   },

这里写图片描述

3、柱状上显示数值设置:

设置normal-label,show-是否显示,formatter-显示格式,position-显示位置(’right’、‘inne…):

itemStyle: {
        normal: {
                label: {  
                    show: true,//是否展示  
                }  
},

4、柱状图最大、最小、平均线显示:

最大、最小值,平均线能根据当前显示界面内的柱状图动态计算。显示类型 type: ‘min’,’max’,’average’等。

    markLine : {
            data : [
                        {type : 'average', name: '平均值'}
                    ]
    },
    markPoint: {
        label: {
                normal: {
                    formatter: function (param) {
                        return param != null ? Math.round(param.value) : '';
                    }
                }
        },
        data : [
                {type : 'max', name: '最大值'},
                {type : 'min', name: '最小值'}
            ]
    },

这里写图片描述

菜鸟用echart,刚开始觉得模板很强大,实际用的时候发现很多想实现的效果不知道在修改哪个参数,希望能通过这样总结对比来拓宽理解。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts是一款强大的JavaScript表库,它允许你在柱上添加详细的标签和标题,包括上方的文本内容。要在柱上方编辑文本,你可以按照以下步骤操作: 1. **创建柱**: 首先,通过`echarts.init()`初始化一个ECharts实例,并选择合适的容器元素。 ```javascript var myChart = echarts.init(document.getElementById('main')); ``` 2. **配置柱**: 使用`setOption()`方法设置选项,其中包含系列(series)配置,包括数据、x轴和y轴信息,以及形样式。例如,设置一个简单的柱: ```javascript var option = { series: [{ name: '销售额', type: 'bar', // 柱类型 data: [50, 90, 140, 70] }] }; myChart.setOption(option); ``` 3. **添加标题和标签**: 在`title`和`label`部分添加需要显示的文字。例如,将标题设为“总览”并让标签显示在每个柱子顶部: ```javascript option = { title: { text: '销售统计', textStyle: { fontSize: 16 } }, // 标题 xAxis: {}, // x轴配置 yAxis: {}, // y轴配置 series: [ { ... label: { show: true, position: 'top', // 文本位于柱子上方 formatter: function (value) { return value; } // 格式化值 } } ] }; ``` 4. **更新表**: 最后,调用`setOption()`更新表内容,显示新的配置。 如果你想要更复杂的编辑功能,比如动态改变文字或者使用富文本,可以查阅ECharts文档中关于`textStyle`和`formatter`的详细说明

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值