ECharts 提供的标记类型
包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’。也可以通过 ‘image://url’ 设置为图片,其中 url 为图片的链接,或者 dataURI。可以通过 ‘path://’ 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式,不用担心因为缩放而产生锯齿或模糊,而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。
var myChart = echarts.init(document.getElementById(id));
var option = {
color: ['#727272', '#5682CB', '#C790B8', '#FACD8A', '#8CCCCB'],
legend: {
bottom: "15%",
right: "2%",
itemWidth: 8,
itemHeight:8,
data: [
{
name:'0-10dBm',
icon : 'circle' // 圆点 其他可选 'rect', 'roundRect', 'triangle', 'diamond', 'pin'
},
{
name:'11-15dBm',
icon : 'circle'
},
{
name:'16-20dBm',
icon : 'circle'
},
{
name:'21-25dBm',
icon : 'circle'
}
,
{
name:'26-30dBm',
icon : 'circle'
}
],
formatter:function(name){
var datas = option.series;
for(var i = 0; i< datas.length ; i++){
if(name == datas[i].name){
return name +' '+(datas[i].data[0])+ '%';
}
}
}
}, tooltip : {
trigger: 'item',
formatter: " {a} : {b}<br/> {c}{d}"
},
grid: {
left: '0%',
right: '2%',
top: '40%',
bottom: '30%',
width: "98%",
containLabel: true
},
xAxis: {},
yAxis: {},
series: []
};
myChart.setOption(option);
window.addEventListener("resize", function () {//每个图 自适应
myChart.resize();
});
myChart.on('click', function (obj){
console.log(obj)
});
echarts的标记一般都是根据图表的类型默认的~(效果如下图)
legend: {
data:['蒸发量','降水量','平均温度']
},
但是我们可爱的UI小姐姐喜欢圆的~(效果如下图)
legend: {
data:[
{
name:'蒸发量',
icon : 'circle'
},{
name:'降水量',
icon : 'circle'
},{
name:'平均温度',
icon : 'circle'
}
]
},
嗯~小点点 ~(效果如下图)
legend: {
data:[
{
name:'蒸发量',
icon : 'circle'
},{
name:'降水量',
icon : 'circle'
},{
name:'平均温度',
icon : 'circle'
}
],
itemWidth: 8,
},