基于echarts实现非常规可视化图表

最新推荐文章于 2024-08-07 02:46:45 发布

weixin_33862188

最新推荐文章于 2024-08-07 02:46:45 发布

阅读量584

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/qstan/blog/2877339

版权

为什么80%的码农都做不了架构师？>>>

词汇：非常规图表——指在实际业务中需要用到的可视化图表但对应组件库不具备相关功能，甚至暂时不存在与实际需求相匹配的可视化图表，总之没有信手拈来的图表。

在实际业务中，特别是对外项目中，需要快速反应做出满足业务需求的可视化图表，我们可以使用原生方法代替，但根据图表的复杂情况，可能在开发过程中出现时间长、bug率高、稳定性差等，而用成熟的图表库之上做二次利用，可大概率减少以上等几种情况出现，快速响应需求和增进效率。

本PPT基于echarts的特征编写，其他插件同理。

案例一

以下demo预满足点与点之间关系、状态、信息、状态方向、事件等可视化需求。

案例二

作为案例，为大家提供启示。也有实际需求提出实现基于数据驱动的该效果图。

案例三、

作为案例，为大家提供启示。本ppt完成时，echarts暂不支持同一实例中给多个图标同时配置标题

一、对开发者的基本要求

1.对echarts的文档较熟悉http://echarts.baidu.com/option.html#title ，

2.了解echarts主要api、配置项的作用，如坐标系、各图表特征等

3.了解定时器，可实现炫酷的动画

二、实现思路

1.张冠李戴

本来不是实现该功能的配置项（API）用来实现该功能（案例三）

2. 修枝剪叶

修改、隐藏、增加已知的属性，实现对应功能的图表（案例二）

3.相得益彰

将多个图表合并在一起，通过1、2方法以及其其他方式，组成一个全新的“图表” （案例一）

4.官方提供自定义配置

http://echarts.baidu.com/examples/editor.html?c=wind-barb

以上思路中标记有案例的，其主要为突出思路的使用，实际上是多个思路是相互作用共同实现。

三、源码对照

案例一

对应思路3--相得益彰，主要使用到echarts中的笛卡尔坐标系、散点图、飞线图（lines属性），这个demo的实际应用场景也到布局计算、页面自适应、点大小自适应。

无源码

案例二

对应思路2--使用饼图的属性+定时器实现一个雷达效果图


let arr = [];

let color = [];
let len = 70
arr.length = len;

arr.fill({value:1}).push({value:len*3})
color.unshift('#fff')

//生成渐变颜色
arr.map((val,idx)=>{
    color.push(`rgba(43,181,26,${1-1/len*idx})`)  
} )


option = {
    color:color,
    series : [
        {
            name: '访问来源',
            type: 'pie',
            startAngle:90,
            radius : '55%',
            center: ['50%', '60%'],
            data:arr,
            labelLine:{
              show:false  
            },
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};
setInterval(()=>{
   
    myChart.setOption({series:[
    {
        startAngle:myChart.getOption().series[0].startAngle+20  //重置绘制起始角度
    }
    
    ]})
},100)};

案例三

echarts暂不支持同一实例中给多个图标同时配置标题，借助data值的特征来模拟标题


option = {
   
    series : [
        {
            name:'半径模式',
            type:'pie',
            radius : [90, 110],
            center : ['25%', '50%'],
           
            data:[
                 //模拟标题
                {value:0, name:'我是标题一',label:{
                   
                    position:'center'
                }},
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
                {value:25, name:'rose4'},
               
            ]
        },
        {
            name:'面积模式',
            type:'pie',
            radius : [90, 110],
            center : ['75%', '50%'],
            
            data:[
                 //模拟标题
                {value:0, name:'我是标题二',label:{
                   
                    position:'center'
                }},
                {value:10, name:'rose1'},
                {value:5, name:'rose2'},
                {value:15, name:'rose3'},
               
            ]
        }
    ]
};

四、实现讨论

人物画像需求：

已知人物列表，当点击某人名称时，在可视化区域显示：最中间是该人的照片，图片四周环绕该人的标签，每个人标签数量未知，有零个或多个，且标签名称不规定。实现结果图类似图一、图二（图片来源与网络）