echarts 自定义 markPoint 的 symbol 样式

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_39759115/article/details/80506194

两种自定义标记

在 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" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path d="M250 150 L150 350 L350 350 Z" />
</svg>

详细说明可参考:svg中path标签的用法
或者 w3c: SVG -path

echarts 的 path://

在 echarts 上使用 path 只需把 path 标签上的指令写在 path:// 之后:

 symbol: 'path://M250 150 L150 350 L350 350 Z', 

一个绘制文本提示框的小例子:
这里写图片描述

代码:


        var myChart = echarts.init(document.getElementById(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(data.componentType == '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:'+now.color+'"></span>' + now.seriesName + ': ' + toHSpeed(now.data, 2);
                        }
                    }
                    return html
                }
            },
            xAxis: [
                {
                    type : 'category',
                    boundaryGap: false,
                    axisTick: {
                        alignWithLabel: false,
                        interval: 0
                    },
                    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
//                        }
//                    },
                    smooth:true,
                    itemStyle:{ // 转折点 控制
                        normal:{
                            borderColor:'#277cdc'
                        }
                    },
                    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 20 h -30 l -6,10 l -6,-10 h -6 z,  path://m 0,0 h 48 v 20 h -34 l -6,10 l -6,-10 h -2 z
                        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 () {
            myChart.resize();
        });


    /**
     * 获取文本宽高
     * @param text       文本
     * @param fontSize   代表汉字的大小,英文字会自动按照默认值
     * @returns {{width: *, height: *}}
     */
    function textSize(text,fontSize) {
        var span = document.createElement("span");
        var result = {
            "width": span.offsetWidth,
            "height": span.offsetHeight
        };
        span.style.visibility = "hidden";
        span.style.fontSize = fontSize || "14px";
        document.body.appendChild(span);

        if (typeof span.textContent != "undefined")
            span.textContent = text || "国";
        else span.innerText = text || "国";

        result.width = span.offsetWidth - result.width;
        result.height = span.offsetHeight - result.height;
        span.parentNode.removeChild(span);
        return result;
    }

   function toHSpeed(speed,fix) {
        if(isNaN(speed))
            return speed;
        if(!fix&&fix!=0)
            fix=2;
        if(speed>=125000000)
        {
            speed/=125000000;
            speed=speed.toFixed(fix)+"Gbps"
        }
        else if(speed>=125000)
        {
            speed/=125000;
            speed=speed.toFixed(fix)+"Mbps"
        }
        else if(speed>=125)
        {
            speed/=125;
            speed=speed.toFixed(fix)+"Kbps"
        }
        else
        {
            speed*=8;
            speed=speed.toFixed(fix)+"bps"
        }
        return speed
    }
展开阅读全文

没有更多推荐了,返回首页