资讯专栏INFORMATION COLUMN

echarts优化数据视图dataView中的样式

MingjunYang / 2167人阅读

摘要:在使用过程中,里有个视图模式,里面的数据没有对整,影响展示效果,情形如下改问题解决方案为,在回调函数中处理,具体代码如下数据视图名称修改后的效果为问题完美解决,希望对你有帮助

在使用echart过程中,toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下:


改问题解决方案为,在optionTocontent回调函数中处理,具体代码如下:

toolbox:{
        show: true,
        feature: {
            dataView: {
                show: true,
                title: "数据视图",
                optionToContent: function (opt) {
                    var axisData = opt.xAxis[0].data;
                    var series = opt.series;
                    var tdHeads = "名称";
                    series.forEach(function (item) {
                        tdHeads += ""+item.name+"";
                    });
                    var table = ""+tdHeads+"";
                    var tdBodys = "";
                    for (var i = 0, l = axisData.length; i < l; i++) {
                        for (var j = 0; j < series.length; j++) {
                            if(typeof(series[j].data[i]) == "object"){
                                tdBodys += "";
                            }else{
                                tdBodys += "";
                            }
                        }
                        table += ""+ tdBodys +"";
                        tdBodys = "";
                    }
                    table += "
"+series[j].data[i].value+""+ series[j].data[i]+"
"+axisData[i]+"
"; return table; } }, mark: {show:true}, restore:{show:true}, magicType: {type: ["line", "bar","pie"]}, saveAsImage:{show:true} } }

修改后的效果为:

问题完美解决,希望对你有帮助!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/98513.html

相关文章

  • echarts优化数据视图dataView中的样式

    摘要:在使用过程中,里有个视图模式,里面的数据没有对整,影响展示效果,情形如下改问题解决方案为,在回调函数中处理,具体代码如下数据视图名称修改后的效果为问题完美解决,希望对你有帮助 在使用echart过程中,toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下:showImg(https://segmentfault.com/img/bVbipp7?w=1...

    wemallshop 评论0 收藏0
  • echarts优化数据视图dataView中的样式

    摘要:在使用过程中,里有个视图模式,里面的数据没有对整,影响展示效果,情形如下改问题解决方案为,在回调函数中处理,具体代码如下数据视图名称修改后的效果为问题完美解决,希望对你有帮助 在使用echart过程中,toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下:showImg(https://segmentfault.com/img/bVbipp7?w=1...

    nihao 评论0 收藏0
  • echarts如何修改数据视图dataView中的样式

    摘要:在表格中遇到的一点小问题,解决方案如下场景重现这是一个显示两个折线图的图表,一切看起来都很顺利。但是点击红色箭头所指的图标,这个作用就是以表格的形式展现。总结和数据视图有关的都可以这样改,不一定是我的那个场景。 做了一个现实折线图的图表,通过右上角icon可以自由切换成柱状图,表格。在表格中遇到的一点小问题,解决方案如下: 1、场景重现 showImg(https://segmentf...

    wanglu1209 评论0 收藏0
  • antv g2的理解总结

    摘要:也同样支持配置项声明构成一个可视化框架需要四部分数据处理模块,对数据进行加工的模块,包括一些数据处理方法。因此上的同基本相同。总结起来,分面其实提供了两个功能按照指定的维度划分数据集对图表进行排版。 G2 G2本身是一门图形语法,G2和传统的图表系统(HighCharts,ACharts等)不同,G2是一个基于统计分析的语义化数据可视化系统。它真正做到了让数据驱动图形,让你在使用它时候...

    baihe 评论0 收藏0

发表评论

0条评论

MingjunYang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<