echarts⾃定义markPoint的symbol样式
两种⾃定义标记
在 echarts 中 markPoint 的样式内置了 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’ ⼏种，如果这些都不太符合需要就必须⾃定义我们需要的样式。
⾃定义标记的图形有两种⽅式：
1. 通过 ‘image://url’ 设置为图⽚，其中 URL 为图⽚的链接，或者 dataURI。
2. 通过 ‘path://’ 将图标设置为任意的⽮量路径。这种⽅式相⽐于使⽤图⽚的⽅式，不⽤担⼼因为缩放⽽产⽣锯齿或模糊，⽽且可以设置为任意颜⾊。路径图形会⾃适应调整为合适的⼤⼩。
svg 的 path
<path> 标签⽤来定义路径。 使⽤ path 标签时，就像⽤指令的⽅式来控制⼀只画笔，⽐如：移动画笔到某⼀坐标位置，画⼀条线，画⼀条曲线等等
下⾯的指令可⽤于路径数据：
M = moveto(M X,Y) ：将画笔移动到指定的坐标位置
L = lineto(L X,Y) ：画直线到指定的坐标位置
H = horizontal lineto(H X)：画⽔平线到指定的X坐标位置
V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY)
Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：⼆次贝赛曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线
Z = closepath()：关闭路径
说明：
坐标轴为以(0,0)为中⼼，X轴⽔平向右，Y轴⽔平向下。
所有指令⼤⼩写均可。⼤写绝对定位，参照全局坐标系；⼩写相对定位，参照⽗容器坐标系
指令和数据间的空格可以省略
同⼀指令出现多次可以只⽤⼀个
⽐如绘制⼀个三⾓形：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%"height="100%"version="1.1"xmlns="/2000/svg">
<path d="M250 150 L150 350 L350 350 Z" />
</svg>
详细说明可参考：
或者 w3c：
echarts 的path://
在 echarts 上使⽤ path 只需把 path 标签上的指令写在 path:// 之后：
symbol: 'path://M250 150 L150 350 L350 350 Z',
⼀个绘制⽂本提⽰框的⼩例⼦：
代码：
var myChart = echarts.ElementById(id));
var option = {
title: {
text: "标题",
top: 20,
left: '10%',
textStyle:{
fontSize: 14,
fontWeight: 600
}
},
legend: {
data: ["line1"],
top: 30,
right: "6.5%",
formatter: function(name) {
return  name;
},
itemGap: 40
},
grid:{
top: 60,
left: "10%",
right: "7%",
bottom: 40
},
tooltip: {
trigger: 'axis',
formatter: function(data){
var html = '';
if(dataponentType == 'markPoint'){
html = data.seriesName;
}else{
html = data[0].name;
for(var i=0; i<data.length; i++){
var now = data[i];
html += '</br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+lor+                        }
}
return html
}
},
xAxis: [
{
type : 'category',
boundaryGap: false,
axisTick: {
},
axisLine:{
lineStyle:{
color:'#8cccca'
}
},
axisLabel: {
textStyle: {
color: '#a19e9e'
},
interval:0,
formatter: function(value, index) {
return value;
}
},
splitLine:{
show: true,
lineStyle:{
color:'#dadada'
}
},
data:["01","02","03","04","05","06","07","08"]                }
],
yAxis: [
{
type : 'value',
axisLine:{ // y 线样式修改
lineStyle:{
color:'#8cccca'
}
},
axisLabel: { // y 名称样式修改
textStyle: {
color: '#a19e9e'
},
formatter: function(data){
return toHSpeed(data, 2);
}
},
splitLine:{ // 取消y轴的⽹格
show: true,
lineStyle:{
color:'#dadada'
}
},
min: 0,
max:function(value) {
return value.max + 100;
}
}
],
series: [
{
name: "line1" ,
type: 'line',
color: ['#31b573'],// 颜⾊
showSymbol: false,
silent: true, // 取消点击事件
//                    areaStyle:{ // 填充颜⾊
//                        normal:{
//                            opacity: 0.1
//                        }
itemStyle:{ // 转折点控制
normal:{
borderColor:'#277cdc'
}textstyle
},
data: [35,50,44,30,60,33,70,61],
markPoint: {
symbol: 'path://m 0,0 h 48 v 20 h -30 l -6,10 l -6,-10 h -6 z', // 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', path://m 0,0 h 48 v                        symbolSize: function(val){
return [textSize(toHSpeed(val, 2),"12px").width+5,40]
},
symbolOffset: ['34%', '-50%'],
symbolKeepAspect: true,// 如果 symbol 是 path:// 的形式，是否在缩放时保持该图形的长宽⽐。
label:{
position: "insideTop",
distance: 7,
formatter: function(data){
return toHSpeed(data.value, 2);
}
},
data: [
{type: 'max', name: '最⼤值'},
{type: 'min', name: '最⼩值'}
]
}
}
]
};
myChart.setOption(option,true);
window.addEventListener("resize", function() {
});
/**
* 获取⽂本宽⾼
* @param text      ⽂本
* @param fontSize  代表汉字的⼤⼩，英⽂字会⾃动按照默认值
* @returns {{width: *, height: *}}
*/
function textSize(text,fontSize) {
var span = ateElement("span");
var result = {
"width": span.offsetWidth,
"height": span.offsetHeight
};
span.style.visibility = "hidden";
span.style.fontSize = fontSize || "14px";
document.body.appendChild(span);
if (Content != "undefined")
else span.innerText = text || "国";
result.width = span.offsetWidth - result.width;
result.height = span.offsetHeight - result.height;
veChild(span);
return result;
}
function toHSpeed(speed,fix) {
if(isNaN(speed))
return speed;
fix=2;
if(speed>=125000000)
{
speed/=125000000;
Fixed(fix)+"Gbps"        }
else if(speed>=125000)
{
speed/=125000;
Fixed(fix)+"Mbps"        }
else if(speed>=125)
{
speed/=125;
Fixed(fix)+"Kbps"        }
else
{
speed*=8;
Fixed(fix)+"bps"        }
return speed
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。