资讯专栏INFORMATION COLUMN

echarts如何修改数据视图dataView中的样式

wanglu1209 / 3573人阅读

摘要:在表格中遇到的一点小问题,解决方案如下场景重现这是一个显示两个折线图的图表,一切看起来都很顺利。但是点击红色箭头所指的图标,这个作用就是以表格的形式展现。总结和数据视图有关的都可以这样改,不一定是我的那个场景。

做了一个现实折线图的图表,通过右上角icon可以自由切换成柱状图,表格。
在表格中遇到的一点小问题,解决方案如下:

1、场景重现


这是一个显示两个折线图的图表,一切看起来都很顺利。
但是点击红色箭头所指的图标,这个作用就是以表格的形式展现。
展现如下。

很丑是吧,测试姐姐说一定要改掉。
附加一下右上角的实现代码,在options配置项加下面的配置就OK。

//右上角切换实现方法
toolbox: {
    show: true,
        right: "5%",
        feature: {
        dataView: {
            readOnly: true              
        },
        magicType: {type: ["line", "bar"]}
    }
},
2、解决方案

点击文档传送门

echarts给的解决的办法就是自定义。
下面写了一个小表格,opt包含了所有折线图的数据,自己组装下。
可以console看看都有什么。

optionToContent: function (opt) {
    let axisData = opt.xAxis[0].data; //坐标数据
    let series = opt.series; //折线图数据
    let tdHeads = "时间"; //表头
    let tdBodys = ""; //数据
    series.forEach(function (item) {
        //组装表头
        tdHeads += `${item.name}`;
    });
    let table = `${tdHeads} `;
    for (let i = 0, l = axisData.length; i < l; i++) {
        for (let j = 0; j < series.length; j++) {
            //组装表数据
            tdBodys += ``;
        }
        table += `${tdBodys}`;
        tdBodys = "";
    }
    table += "
${ series[j].data[i]}
${axisData[i]}
"; return table; }

改完效果如下,大家可以自己试试看哦。可以改成自己想要的风格哦。

3、总结

和数据视图有关的都可以这样改,不一定是我的那个场景。

如果项目中图表很多,可以把这段代码抽取出来,毕竟篇幅很长。
写这篇文章,主要是自己刚学会,其次是搜了一会没找到合适的答案。就分享下自己的小喜悦吧,嘻嘻。

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

转载请注明本文地址:https://www.ucloud.cn/yun/84536.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中的样式

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

    MingjunYang 评论0 收藏0
  • 三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?

    摘要:最近阿里正式开源的图表库基于技术栈,各个图表项皆采用了组件的形式,贴近的使用特点。相关文档组件化阿里的图表组件手拉手,用开发动态刷新组件文档地址一安装通过引入二引用成功安装完成之后,即可使用或进行引用。最近阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点。同时BizCharts基于G2进行封装,Bizcharts也继承了G2相...

    draveness 评论0 收藏0

发表评论

0条评论

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