实现svg动态插入图表

需求场景

实现在SVG组件中插入各种echarts的图表，并且能够正常显示与事件的使用。

解决思路

思路一：初始化图表，然后通过 $('#svg').append(图表) 来插入； 结果SVG是能正常查插入，但是相关事件都失效了。

思路二：往svg api方向查阅资料，结果发现foreignObject 标签，能满足需求。

SVG <foreignObject>简介与截图等应用： www.zhangxinxu.com/wordpress/2…

解决方案

HTML代码

<!--SVG元素-->
<svg id="svg" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="orange" />

  <!--echart-->
  <foreignObject id="echart-foreign" x="200" y="0" width="800" height="400"></foreignObject>
  <!--highchart-->
  <foreignObject id="highchart-foreign" x="200" y="500" width="800" height="400"></foreignObject>

</svg>

<script>
  $(function () {
    // echart
    svgUtils.initEchart('echart-foreign')

    // Highcharts
    svgUtils.initHighcharts('highchart-foreign')
  })
</script>

JS代码

svgUtils = {
    initEchart(eleId) {
        var chartDom = document.getElementById(eleId);
        var myChart = echarts.init(chartDom, null, { renderer: 'svg' });
        var option = {
            title: {
                text: 'World Population'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
            },
            series: [
                {
                    name: '2011',
                    type: 'bar',
                    data: [18203, 23489, 29034, 104970, 131744, 630230]
                },
                {
                    name: '2012',
                    type: 'bar',
                    data: [19325, 23438, 31000, 121594, 134141, 681807]
                }
            ]
        };
        option && myChart.setOption(option);
    },
    initHighcharts(eleId) {
        var chart = Highcharts.chart(eleId, {
            title: {
                text: '2010 ~ 2016 年太阳能行业就业人员发展情况'
            },
            subtitle: {
                text: '数据来源：thesolarfoundation.com'
            },
            yAxis: {
                title: {
                    text: '就业人数'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle'
            },
            plotOptions: {
                series: {
                    label: {
                        connectorAllowed: false
                    },
                    pointStart: 2010
                }
            },
            series: [{
                name: '安装，实施人员',
                data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
            }, {
                name: '工人',
                data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
            }],
            responsive: {
                rules: [{
                    condition: {
                        maxWidth: 500
                    },
                    chartOptions: {
                        legend: {
                            layout: 'horizontal',
                            align: 'center',
                            verticalAlign: 'bottom'
                        }
                    }
                }]
            }
        });
    }
}

实现效果