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

wanglu1209 发布于2019-08-20 18:27 / 3629人阅读

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

做了一个现实折线图的图表，通过右上角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、总结

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

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

GPU云服务器云服务器数据库中的视图修改样式修改网站程序中的数据库连接串 dataview数据绑定

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

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

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

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

wemallshop 2019-08-29 17:01 评论0 收藏0
echarts优化数据视图dataView中的样式

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

nihao 2019-08-02 11:44 评论0 收藏0
echarts优化数据视图dataView中的样式

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

MingjunYang 2019-08-23 12:26 评论0 收藏0
三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？

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

draveness 2019-04-23 13:19 评论0 收藏0