主页 » 建站笔记 » 正文

echarts之自定义mappoint

 bandian 5,089 ℃ 0条点评
小号字体中号字体大号字体
在echarts中,我们经常会修改一些自定义展示图标,今天,我们以mappoint为例,创建一个地图自定义图标闪烁。下面就是最终效果了:代码:option = { ...

在echarts中,我们经常会修改一些自定义展示图标,今天,我们以mappoint为例,创建一个地图自定义图标闪烁。
下面就是最终效果了:

echarts1

代码:

option = {
    backgroundColor: '#1b1b1b',
    series : [
        {
            name: '北京 Top10',
            type: 'map',
            mapType: 'china',
            data:[],
            itemStyle:{
                normal:{
                    borderColor:'rgba(100,149,237,1)',
                    borderWidth:0.5,
                    areaStyle:{
                        color: '#1b1b1b'
                    }
                }
            },
            markPoint : {
		symbol: 'image://../asset/ico/favicon.png',//这里是最关键的地方
                symbolSize : function (v){
                    return 10 + v/10
                },
                effect : {
                    show: true,
                    shadowBlur : 0
                },
                itemStyle:{
                    normal:{
                        label:{show:false}
                    },
                    emphasis: {
                        label:{position:'top'}
                    }
                },
                data : [
                    {name:'上海',value:95},
                    {name:'广州',value:90},
                    {name:'大连',value:80},
                    {name:'南宁',value:70},
                    {name:'南昌',value:60},
                    {name:'拉萨',value:50},
                    {name:'长春',value:40},
                    {name:'包头',value:30},
                    {name:'重庆',value:20},
                    {name:'常州',value:10}
                ]
            }
        }
    ]
};

代码分析:
在我们查看手册时,可以看到symbol这个修改自定义图片的关键点,但一时反应不过来的是:symbol: 'image://../asset/ico/favicon.png',这个图片的路径,下面我上图,让大家一目了然:

echartsmulu

大家可以看到,这是echarts的目录,上面所产生的文件是在:目录->doc->asset->ico这个目录下,也就是说他本生不是在我们的项目images目录中,这是最容易混的地方。

上一篇:datatables修改英文为中文
下一篇:echarts之我的第一个可视化图
版权信息
本文遵循 BY-NC-SA 共享方式,永久链接:https://www.augsky.com/?p=987
转载请注明转自 » 格部落格 » echarts之自定义mappoint

已有0条评论,欢迎点评!

骚年,现在来一发沙发就是你的。