ECharts实现变压器油中溶解气体分析和判断导则DL/T722-2014中的大卫三角

需求

需要实现DL/T722-2014中的大卫三角形，展示如下:

根据标准将点描在所需范围，标准详见：www.jianbiaoku.com/webarbs/boo…

实现

具体实现思路，将大卫三角标准图转换为svg，结合echarts的map地图，实现描点功能。

图片转为svg

利用AI将图片转为svg

关键点：对象-图像临摹-建立

svg作为外部文件引入

关键点：import

原工程使用axios请求资源

1. 将svg存为外部文件通过import引入

import dd from 'svg文件路径'

2. 通过axios请求

this.$axios.get(dd, {}).then((res) => {
    //获取到外部svg的内容
    _this.ddsvg = res.data
});

echarts渲染使用svg

echarts.registerMap('some_svg', {svg: svg});

描点

series: {
    type: 'effectScatter',
    coordinateSystem: 'geo',
    geoIndex: 0,
    symbolSize: function (params) {
        return (params[2] / 100) * 15 + 5;
    },
    itemStyle: {
        color: '#b02a02'
    },
    encode: {
        tooltip: 2
    },
    data: [
        [x,y,数据点大小]
    ]
}

具体参考官方文档：echarts.apache.org/examples/zh…

毕竟是图片转的svg，把旁边的标识字符都转进去了没那么精确，简单扣去了误差具体实现效果如下: